aspect-ratio 必须作用于 video 的父 div 容器而非 video 本身，因 video 是替换元素，其固有宽高比覆盖 CSS 设置；正确写法为 aspect-ratio: 16 / 9，需搭配 width 和 overflow 控制，并为旧浏览器兜底 padding-top: 56.25%。
aspect-ratio 是现代方案的首选，但直接写在 <video> 上基本无效——必须套一层 <div> 容器，否则高度塌陷、拉伸变形或 CLS（布局偏移）频发。
为什么 video { aspect-ratio: 16 / 9 } 不生效
因为 <video> 是替换元素（replaced element），浏览器按其内建元数据决定固有宽高比，aspect-ratio 属性对其被忽略。常见现象包括：height 计算为 0、视频压成一条横线、父容器高度塌缩。
- 别在
<video>标签上直接设aspect-ratio，哪怕加了width: 100% - 必须用
<div class="video-wrapper">包裹，再对这个<div>应用aspect-ratio - 确保该
<div>有明确宽度来源（如width: 100%或max-width），否则比例推导失败
aspect-ratio: 16 / 9 的正确写法和兼容兜底
现代写法干净直接，但 Safari 15.4 之前、Firefox 89 之前、所有 IE 都不支持。生产环境必须考虑降级。
- 写法必须是
16 / 9（空格分隔），不是16:9或1.777，后者会导致解析失败 - 容器样式示例：
.video-wrapper { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } -
<video>本身只设：width: 100%; height: 100%; object-fit: cover;（或contain，按需选） - 兜底用
padding-top: 56.25%：父容器设position: relative、禁用height，子元素position: absolute填满；注意百分比必须精确到小数点后两位（9 / 16 = 0.5625）
移动端自动播放必须的三要素
即使宽高比正确，iOS/Android 上视频仍可能黑屏或静音——这不是 CSS 问题，但常被误认为“响应式失败”。
-
<video>必须同时带三个属性：muted、autoplay、playsinline - 缺任意一个，Safari 会阻止自动播放，Chrome on Android 可能仅静音播放但不触发画面
- 不要依赖 JS 检测后再调
play()：移动端策略越来越严，用户手势触发才允许有声播放 - 若需有声播放，必须显式交互（如按钮点击）+
play()调用，且不能跨域或含 CORS 问题
避免 CLS 和布局抖动的关键细节
宽高比控制失效最直接影响就是 CLS（Cumulative Layout Shift），尤其首屏视频加载时突然撑开高度，用户体验极差。
立即学习“前端免费学习笔记（深入）”；
- 移除
<video>标签上的width和heightHTML 属性（如width="640" height="360"），它们会覆盖 CSS 行为并干扰比例计算 - 用
object-fit: cover时，确保父容器overflow: hidden，否则裁剪部分可能溢出造成滚动条意外出现 - 如果视频源加载慢，建议用占位色块（如
background: #000）或低质量封面图，避免空白高度导致后续内容上跳 - 媒体查询中调整比例（如竖屏切
9 / 16）时，务必同步更新padding-top百分比或aspect-ratio值，别只改一个
height 硬编码、padding-top 少一位小数、移动端漏掉 playsinline……这些才是上线后反复复现的真问题。 
