在网页开发中，将第三方视频通过iFrame嵌入页面是很常见的需求。但在采用响应式布局时，如果直接把平台提供的固定尺寸iFrame放进弹性容器，就容易出现比例失调、溢出或留白等问题。要让视频在各种屏幕下都保持正确比例并自动适应，需要从HTML结构和CSS控制两方面入手。
一、为什么iFrame视频嵌入在响应式布局下会失控
iFrame本质上是一个独立的浏览上下文，它默认按照自身width和height属性给定的像素值渲染。当外层容器变窄时，iFrame并不会像普通块级元素那样自动收缩，因为其尺寸是写死的内部属性。如果我们在CSS里强行用width:100%覆盖，高度却仍是固定值，视频就会被压扁或者留下难看的黑边。
另外一个容易被忽略的点是，很多视频平台（如YouTube、B站）生成的嵌入代码已经带有固定宽高，例如width="560" height="315"。开发者若只给iFrame加样式而不处理外层比例，在竖屏手机上就会横向溢出，逼迫页面产生水平滚动条。理解这一机制，才能选择正确的包裹方案。
二、纯CSS方案：用aspect-ratio实现按比例自适应
现代浏览器已经支持CSS的aspect-ratio属性，这让我们无需JavaScript即可让容器保持固定宽高比。思路是：用一个外层div设定width:100%和aspect-ratio:16/9，然后把iFrame的绝对定位填满该div。这样无论屏幕多宽，高度都会随宽度按比例计算。
下面是一段可直接使用的示例代码，注意iFrame内部的&等字符已转义，且未破坏原有嵌入参数：
<div class="video-wrap">
<iframe src="https://www.ipipp.com/embed/demo"
title="示例视频"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<style>
.video-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
这种写法的优点十分明显：不依赖脚本、没有resize监听的性能损耗，也不会在窗口变化时出现闪烁。缺点是aspect-ratio在个别老旧浏览器（如IE）上不支持，如果项目必须兼容那些环境，就需要回到padding-top占位法。
三、兼容旧环境的padding-top占位法
在aspect-ratio尚未普及之前，前端常用padding-top百分比来模拟比例容器。因为padding的百分比是相对于父级宽度的，所以设padding-top:56.25%即可对应16:9（9除以16等于0.5625）。iFrame同样绝对定位铺满。
示例代码如下：
<div class="video-old">
<iframe src="https://www.ipipp.com/embed/demo" allowfullscreen></iframe>
</div>
<style>
.video-old {
position: relative;
width: 100%;
padding-top: 56.25%;
height: 0;
}
.video-old iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
该方案的兼容性极广，几乎覆盖所有需要支持的浏览器。不过它在语义上不如aspect-ratio直观，且后续若想改成4:3比例，需要手动重算padding值。在维护旧系统时可以保留，新项目建议优先用aspect-ratio。
四、何时需要用JavaScript辅助控制
绝大多数响应式视频嵌入场景，纯CSS已经足够。但如果你嵌入的不是标准视频播放器，而是带动态工具栏、尺寸会随交互改变的iFrame应用，就可能需要脚本介入。此时应避免在resize里反复读写布局属性，推荐使用ResizeObserver监听容器变化后只更新一次样式。
参考代码：
const wrap = document.querySelector('.video-wrap');
const iframe = wrap.querySelector('iframe');
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
const w = entry.contentRect.width;
iframe.style.height = (w * 9 / 16) + 'px';
}
});
ro.observe(wrap);
这段脚本的逻辑是：当包裹器宽度改变时，按16:9算出高度并赋值给iFrame。相比监听window.resize，ResizeObserver更精准且不会在无关区域变化时触发。但要注意，能不用脚本就不用，CSS方案始终更轻量。
五、常见误区与注意事项
一个典型误区是直接在iFrame标签上写style="width:100%;height:auto"，以为高度会自动跟随。实际上iFrame没有内在替换内容比例（不像img标签），height:auto会被解析为0或回退到属性值，导致视频区域塌陷。必须用外层比例容器约束。
此外，使用第三方平台代码时，不要随意删除allowfullscreen或frameborder等属性，否则可能影响播放体验。若平台本身提供了响应式嵌入选项（如B站的“自适应代码”），应优先选用，再在外层做微调即可。
| 方案 | 兼容性 | 是否需要JS | 适用场景 |
|---|---|---|---|
| aspect-ratio | 现代浏览器 | 否 | 新项目、移动端优先 |
| padding-top占位 | 极广 | 否 | 旧系统兼容 |
| ResizeObserver | 较新浏览器 | 是 | 动态非标准iFrame |
通过上述几种方式的对比可以看出，响应式布局下的iFrame视频嵌入控制核心在于“外层比例容器加iFrame铺满”。选对结构，就能以最低成本解决尺寸调整难题。