直接用 aspect-ratio: 16 / 9，但需 fallback 到 padding-bottom: 56.25% + position: relative/absolute 结构；现代浏览器（chrome 88+、firefox 89+、safari 15.4+）支持，旧版 safari、ie、x5 内核等会静默忽略，必须手动降级且 @supports 需正确分层。
直接用 aspect-ratio: 16 / 9，但得确认浏览器是否支持；不支持时必须 fallback 到 padding-bottom + position: absolute 套路，否则视频或 iframe 会拉伸变形、留黑边、甚至溢出容器。
用 aspect-ratio 最省事，但别忘了检查兼容性
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+、Edge 88+）都支持 aspect-ratio: 16 / 9，它让容器主动按比例缩放，不用 JS、不依赖父宽、也不用 hack。但 Safari 15.3 及更早版本、所有 IE 版本、部分安卓 WebView 完全忽略该属性。
实操建议：
- 给视频/iframe 的**直接父容器**设
aspect-ratio: 16 / 9，不是给video或iframe自身设 - 务必移除
video标签上的width和height属性（HTML 属性），否则会覆盖 CSS 行为 - 配合
width: 100%和height: 100%+object-fit: cover（对video）或object-fit: contain（对iframe）才真正适配
padding-bottom 是最稳的降级方案，但结构和定位不能错
当 @supports not (aspect-ratio: 16 / 9) 生效时，老办法靠 padding-bottom: 56.25% 撑高——因为这个值 = 9 ÷ 16 × 100%，是基于父元素宽度计算的。但它本身不产生“高度”，只是 padding，所以内容必须用绝对定位塞进去。
常见错误现象：
- 子元素没加
position: absolute→ 内容堆在底部，看不见 - 父容器没设
position: relative→ 绝对定位脱标，乱飘 - 写了
height: 0却漏了padding-bottom→ 容器塌陷成一条线 - 用了
padding-top但没预留顶部空间 → 控制栏被遮挡
正确结构示例：
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video-container > video,
.video-container > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
object-fit 决定内容怎么填满，不是可选项
即使容器比例对了，video 或 iframe 默认仍会按原始尺寸拉伸或压缩。必须显式控制渲染方式：
-
object-fit: cover：裁剪填满，适合主视觉视频（推荐） -
object-fit: contain：完整显示，带黑边，适合嵌入式 iframe（如 YouTube） -
object-fit: fill：强制拉伸，通常要避免 - 注意：
object-fit对iframe的支持有限，某些旧版 Safari 不生效，此时需用width: 100%; height: 100%+ 父容器 padding 保证比例，再靠 iframe 自身响应式参数兜底（如 YouTube 的?modestbranding=1&fs=0）
浮动场景下特别容易踩的坑
所谓“浮动多媒体元素”，往往指 float: left 或 display: inline-block 的容器。这时 padding-bottom 仍有效，但 aspect-ratio 在 float 元素上行为不稳定（尤其 Safari），且 float 容器默认不参与 BFC，可能引发父容器高度塌陷。
关键处理点：
- 浮动容器必须设
width（百分比或具体值），否则padding-bottom计算基准失效 - 父容器建议加
overflow: hidden或display: flow-root清除浮动影响 - 避免对浮动容器同时设
aspect-ratio和float—— Chrome 可能忽略比例，Safari 可能渲染错位 - 如果用 Flex/Grid 布局替代 float，
aspect-ratio支持更可靠，也更易维护
真正麻烦的从来不是写哪一行 CSS，而是判断当前环境到底走哪条路径：现代浏览器直接上 aspect-ratio，但只要项目还要兼容微信内置浏览器（X5 内核）、钉钉旧版或海外低端安卓机，padding-bottom 就不是备选，是必选。而且这两套逻辑不能共存于同一选择器里——必须用 @supports 隔开，否则旧引擎会把不认识的 aspect-ratio 整条声明丢弃，导致降级失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
