最稳定方案是用 padding-bottom + absolute 实现宽高比锁定：父容器设 position: relative、height: 0、padding-bottom: 56.25%（16:9），iframe 设 absolute、top:0、left:0、width:100%、height:100%，并移除内联 width/height 属性。
用 padding-bottom + position: absolute 锁定 16:9 比例
这是目前兼容性最好、不依赖 JS、不挑浏览器的方案，连 iOS Safari 8 都能稳住。核心不是“让 iframe 自己缩放”，而是用父容器的 padding-bottom 撑出一个固定比例的空间，再把 iframe 绝对定位填满它。
必须满足三个条件，缺一不可：
- 外层容器设
position: relative、width: 100%、height: 0、padding-bottom: 56.25%（因为 9 ÷ 16 × 100 = 56.25） - iframe 标签上不能有
width或height内联属性，否则会覆盖 CSS - iframe 元素本身设
position: absolute、top: 0、left: 0、width: 100%、height: 100%
aspect-ratio 能不能直接用？
能，但只在支持它的环境里可靠：Chrome ≥ 88、Firefox ≥ 89、Safari ≥ 15.4。如果你明确不需要兼容旧版 Safari 或 IE，可以写成：
.video-wrapper iframe {
width: 100%;
height: 100%;
aspect-ratio: 16/9;
}
注意两点：
-
aspect-ratio不读取内容真实高度，只按比例推算——YouTube 视频没问题，但嵌入的是文字页或表单，就会底部被裁剪 - 它不触发重绘监听，内容加载后变高（比如 AJAX 补充了区块），iframe 不会自动拉伸
为什么移除 iframe 的 width 和 height 属性这么关键？
HTML 中的 width="640" height="360" 是内联样式，优先级高于外部 CSS。一旦存在，哪怕你写了 width: 100%，浏览器也会先按 640px 渲染，导致比例错乱、小屏溢出或留白。
常见错误现象：
- 桌面正常，手机上看视频只显示左上角四分之一
- 父容器宽度变化时，iframe 高度纹丝不动
- 加了
max-width: 100%也没用——因为内联width已经锁死了基准值
iOS Safari 小屏下 iframe 渲染塌陷怎么办？
某些 iOS 版本（尤其是 Safari ≤ 15.6）在初始渲染时，可能把 height: 0 的父容器当成“无内容”，导致 iframe 高度为 0 或极小。临时解法是给 iframe 加一行防御性样式：
.video-wrapper iframe {
min-height: 200px;
}
这不是万能补丁，但它能防止首屏白屏或内容消失。如果嵌入的是后台系统或搜索页这类动态高度内容，padding-bottom 方案依然会卡死高度——这时候就得切到 postMessage 通信方案，靠子页面主动上报真实 scrollHeight 来重设 iframe 高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
