起因

只有B站支持IFRAME接入到本地网站，所以我一些视频就传到B站去了，在更新博客的时候，会出现一个问题

1. 要么在PC页面，引用的视频窗口很小，那么我设置iframe宽度100%

2. 要么在手机端，宽度100%后，自适应高度就特别的高

所以，不完美！

方案

直接把 iframe 包一层容器，用 CSS 把容器撑成 16:9（B 站播放器固定比例），宽度设 100%，再给个最大宽度控制 PC 端，这样手机端会自动等比缩小，两端都适配。

几个关键点：

• iframe 不能像图片那样直接 height:auto，它必须有明确高度，所以必须靠外层容器按比例撑出高度，这是适配的核心。

• 56.25% 就是 16:9（9 ÷ 16），B 站播放器就是这个比例。

• max-width:900px 控制 PC 端最大宽度（可按页面宽度改成 100% 或 1200px）；width:100% 让手机端自动缩到屏幕宽度。

• 如果要把视频居中、加圆角、加阴影，在中间那层容器上加样式即可，比例不受影响。

<div style="max-width:900px; margin:0 auto;">
  <div style="aspect-ratio:16/9; width:100%;">
    <iframe src="//player.bilibili.com/player.html?isOutside=true&aid=117537366870794&bvid=BV1NSxH6zE5e&cid=43220536074&p=1"
            style="width:100%; height:100%; border:0; display:block;"
            scrolling="no" frameborder="no" allowfullscreen="true"></iframe>
  </div>
</div>

如果担心老浏览器兼容性，用 padding 撑高法（同样效果，兼容到很老的机型）：

<div style="position:relative; width:100%; max-width:900px; margin:0 auto; padding-top:56.25%; height:0; overflow:hidden;">
  <iframe src="//player.bilibili.com/player.html?isOutside=true&aid=117537366870794&bvid=BV1NSxH6zE5e&cid=43220536074&p=1"
          style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
          scrolling="no" frameborder="no" allowfullscreen="true"></iframe>
</div>

测试效果看看