aspect-ratio 必须作用于 video 的父 div 容器而非 video 本身，因 video 是替换元素，其固有宽高比覆盖 CSS 设置；正确写法为 aspect-ratio: 16 / 9，需搭配 width 和 overflow 控制，并为旧浏览器兜底 padding-top: 56.25%。
直接用 aspect-ratio 最省事，但必须套在 <div> 容器上，不能写在 <video> 或 <iframe> 自身上——否则高度塌陷、拉伸变形、CLS 偏移全来。
为什么 video { aspect-ratio: 16 / 9 } 不生效
因为 <video> 是替换元素（replaced element），浏览器按其内建元数据决定固有宽高比，aspect-ratio 对它被忽略。常见现象包括：height 计算为 0、视频压成一条横线、父容器高度塌缩。
- 必须用
<div class="video-wrapper">包裹<video>或<iframe> -
.video-wrapper要有明确宽度来源（如width: 100%或max-width: 800px） -
aspect-ratio: 16 / 9写法必须是空格分隔，不是16:9或1.777，否则解析失败
如何兼容旧版 Safari 和 Firefox
Chrome 88+、Firefox 89+、Safari 15.4+ 支持 aspect-ratio；更早版本（尤其 iOS 15.2 及以前）会直接忽略，导致 iframe 拉伸或空白。兜底必须用 padding-bottom 技巧。
- 容器设
position: relative; height: 0; padding-bottom: 56.25%（16:9 → 9 ÷ 16 = 0.5625） -
iframe或video设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别给容器设
height: auto或min-height，否则padding-bottom失效
iframe 嵌入 YouTube/Vimeo 时最常踩的坑
不是宽高比没设对，而是 HTML 层级和属性冲突。Bootstrap 的 .embed-responsive 或 Tailwind 的 aspect-video 都只是“辅助”，真正卡住的是这几个硬条件：
立即学习“前端免费学习笔记（深入）”；
-
<iframe>上写了width="560"或height="315"—— 这些内联属性会强制覆盖响应式行为，必须删掉 - 父容器被加了
overflow: hidden或固定height（比如<div class="col">里又嵌了height: 400px） - CSS 加载顺序错乱：自定义样式覆盖了
.embed-responsive-item的position: absolute和四边0 - Tailwind 用户用了
aspect-video却没升级到 v3.4+，或没启用aspect-ratio插件
移动端自动播放黑屏/跳全屏？这不是 CSS 问题
宽高比再准，缺这四个 HTML 属性中的任意一个，iOS Safari 和 Android WebView 就不会静音自动播：
-
autoplay（必须显式存在，不能靠 JS 触发） -
muted="true"（空值muted在 Safari 解析不稳定，务必写"true"） -
playsinline（禁用全屏跳转，iOS 必须，Android Chrome 也依赖） -
preload="metadata"（preload="none"会导致滑到页面才开始加载，首帧必黑）
另外，z-index: -1 对默认 position: static 的 <video> 完全无效；要压到背景层，必须配 position: fixed 或 absolute，且注意父容器是否创建了新层叠上下文（比如有 transform 或 opacity: 0.99）。
