上一篇文章嵌入了一个 bilibili 的视频，根据其官方提供的代码采用 iframe 标签方式。

<iframe src="//player.bilibili.com/player.html?aid=290363084&bvid=BV1ff4y1p7T8&cid=330441793&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

直接插入以上代码，大小不合适，观看体验糟糕。

按照如下形式添加代码就可以固定播放窗口比例大小自适应不同设备。

<div class="bili">
    <iframe src="视频地址" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="bilibili">
    </iframe>
</div>

.bili {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.bilibili {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bili 的样式：

• position: relative和iframe的位置在这里非常重要。position: relative以便稍后我们可以将iframe与div相关联。这是因为在CSS中，position: absolute基于最接近的非静态父元素定位元素。
• overflow: hidden 是否隐藏任何可能放在容器外面的元素。
• padding-top: 56.25%这就是关键所在。在CSS中，padding-top属性可以设置百分比，这使我们的iframe保持正确的比例。通过使用百分比，它将根据元素的宽度计算要使用的填充。在我们的示例中，我们希望保持56.26％的比率，也就是按16：9的宽高比。根据视频的宽高比，也可以采用75%的比率，也就是4：3。

.bilibili 的样式：

• position: absolute;这将为iframe提供相对于包装器的位置，并将其放置在包装器的填充上。
• top: 0并left: 0用于将iframe定位在容器的中心。
• width: 100%并且height: 100%使IFRAME采取所有包装的空间。

完成后，就可以得到一个自适应的iframe。

便于以后多次使用，我把css代码做一个修改,增加特定比例的类：

.bili16-9 {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
 
.bili4-3 {
    position: relative;
    overflow: hidden;
    padding-top: 75%;
}

Html代码相应修改为：

<div class="bili16-9">
    <iframe src="//player.bilibili.com/player.html?aid=290363084&bvid=BV1ff4y1p7T8&cid=330441793&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="bilibili">
    </iframe>
</div>

在网页上, 用户点击视频上面的一些图标, 会跳转到B站. 这个可通过设置 iframe 的 sandbox 属性去禁止。
sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts”
但用户切换不了视频清晰度，就是用户只能在 360p，点击 720p 或者 1080p 都无效。