aspect-ratio不能直接写在video元素上，因其是替换元素，宽高比由视频元数据决定，CSS该属性对其无效；必须用容器包裹并设aspect-ratio: 16 / 9、width: 100%，video内设width: 100%; height: 100%; object-fit: cover，同时移除video的width/height属性。
aspect-ratio 不能直接写在 video 元素上，写了也无效——这不是你代码错了，是浏览器按规范忽略它。
为什么 video { aspect-ratio: 16 / 9 } 不生效
video 是替换元素（replaced element），它的宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对其不作用。你在开发者工具里看到该属性状态为 “inactive”，计算出的 height 往往是 auto 或 0，导致视频显示为一条细线、高度塌陷，或横竖屏切换后比例错乱。
- 常见错误现象：页面刚加载时视频高度为 0，下方内容突然下移（CLS）
- Safari 15.4–16.3 在
display: flex容器中会完全忽略子项的aspect-ratio - 写成
aspect-ratio: 16:9或aspect-ratio: 1.777会语法报错或精度偏差，必须用16 / 9
必须用容器包裹并设 aspect-ratio
正确做法是用 <div class="video-wrapper"> 包住 <video>，把 aspect-ratio 写在 wrapper 上，并确保它能提前预留空间，从根源抑制 CLS。
- 移除
<video>标签上的width和height属性（如width="640" height="360"），否则会覆盖 CSS 控制 - wrapper 必须是块级容器：
display: block或display: grid；避免嵌套在display: flex父容器中（Safari bug） - wrapper 要有明确宽度约束：
width: 100%+max-width: 800px（按需调整），只写aspect-ratio会导致塌陷 - 不要给 wrapper 设
height，否则与aspect-ratio冲突
video 元素本身怎么填满容器
aspect-ratio 只管容器尺寸，不管内部视频如何显示。不加控制的话，视频可能拉伸、留黑边，甚至溢出边界。
立即学习“前端免费学习笔记（深入）”；
-
video必须设width: 100%+height: 100% - 必须配合
object-fit: cover（裁切填满）或object-fit: contain（完整居中） - 如果 wrapper 是
position: relative，可加position: absolute; inset: 0确保严丝合缝 - 别忘了设
overflow: hidden防止object-fit: cover时内容溢出
兼容旧浏览器的降级方案
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，但 IE 或 Safari 15.3- 仍需 fallback。
- 用
@supports (aspect-ratio: 1 / 1)包裹新写法，外部写 padding-top 方案 - 父容器设
position: relative+padding-top: 56.25%（16:9 = 9 ÷ 16 = 0.5625） -
video设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 注意：
padding-top: 56.25%必须写在父容器上，且该容器不能有height值，否则压垮 padding 计算
最容易被忽略的一点：aspect-ratio 的价值不在“让视频看起来比例对”，而在于“让浏览器在 HTML 解析阶段就确定容器高度”，从而彻底消灭布局偏移（CLS）。很多团队测完视觉效果就上线，却没验证首屏加载时的 layout shift 分数——那才是这个属性真正要解决的问题。
