注意：这篇文章距离上次更新已有 355 天了，文章的内容可能已过时。

对于哔哩哔哩和Youtube的视频，我们首先需要获取他们的iframe嵌入代码。这个可以在 “分享” -> “嵌入代码”获取：

bilibili嵌入代码:
bilibili嵌入代码

youtube嵌入代码:
youtube嵌入代码

然后按照下面这个模板添加div包装和styles, ...的地方就是iframe嵌入代码的主体部分：
javascript
1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe ... style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;"></iframe>
</div>

效果展示

Bilibili

嵌入代码：

javascript
1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe src="//player.bilibili.com/player.html?aid=90978812&cid=155358422&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;" ></iframe>
</div>

Youtube

嵌入代码：

javascript
1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/YES16mVB0lQ?rel=0&amp;showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;"></iframe>
</div>