video上设aspect-ratio: 16 / 9无效，因其为替换元素，固有宽高比由视频元数据决定，CSS该属性对其不生效；必须用div包裹并设aspect-ratio，配合width: 100%、max-width和object-fit才能实现响应式且防CLS。
aspect-ratio 能固定视频容器比例，但不能直接写在 video 元素上——浏览器会忽略它，导致高度塌陷或拉伸变形。
为什么 video 上设 aspect-ratio: 16 / 9 没用
因为 video 是替换元素（replaced element），其宽高由视频元数据决定，CSS 的 aspect-ratio 属性对其不生效。常见现象包括：
• 容器高度为 0，视频只显示一行像素
• 视频被横向拉伸成细条，或上下留大片空白
• 加载时发生 CLS（布局偏移），影响 LCP 和用户体验
必须用 div 包裹并设 aspect-ratio
真正起作用的是给 video 的父容器（比如 <div class="video-wrapper">）设置 aspect-ratio，让布局引擎在首帧渲染前就锁定空间：
-
video标签里必须移除width和height内联属性（如width="640"），否则会覆盖 CSS 控制 - 包裹容器推荐设
display: block或display: grid；避免放在display: flex父容器中（Safari 15.4–16.3 会忽略其aspect-ratio） - 语法必须是
16 / 9这种分数形式，不能写成16:9或1.777 - 容器不能设
height，否则与aspect-ratio冲突，导致高度计算异常
怎么配合 object-fit 防止视频溢出或留黑边
aspect-ratio 只管容器盒子尺寸，不管里面视频怎么铺满。不加约束的话，video 可能撑破、留黑边、甚至被拉伸：
立即学习“前端免费学习笔记（深入）”；
-
video必须设width: 100%+height: 100%，才能填满容器 - 加上
object-fit: cover（裁边填满）或object-fit: contain（完整居中），根据内容需求选 - 如果需要限制最大宽度（比如文章内嵌），加
max-width: 800px；全屏横幅可用max-width: 100vw配合margin: 0 auto
兼容旧浏览器的兜底方案
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持良好，但若需兼容 Safari 15.3 或更早版本，得用 padding-top 技巧：
- 父容器设
position: relative，且不能有height - 用
padding-top: 56.25%（16:9 对应值，9 / 16 = 0.5625），少一位小数（如56.2%）就会偏形 -
video设position: absolute; top: 0; left: 0; width: 100%; height: 100%
这个方案兼容到 IE9，但结构更复杂，且无法响应式动态调整比例——所以优先用 aspect-ratio，仅对老环境降级。
真正容易被忽略的是：所有尺寸逻辑必须在 DOM 解析阶段完成，不能依赖 JS 计算、不能等视频元数据加载、也不能靠 height: auto 回退。否则 CLS 无法避免。
