video 元素上直接设置 aspect-ratio: 16 / 9 无效，因其为替换元素，固有宽高比由视频元数据决定；必须用 div 包裹并设 aspect-ratio，配合 width: 100%、max-width 和 object-fit 才能实现响应式且防 CLS。
video 元素上直接写 aspect-ratio: 16 / 9 为什么无效
浏览器会忽略该声明，因为 video 是替换元素（replaced element），其固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 属性对它不生效。常见现象是容器高度塌陷为 0，或视频被横向拉伸成一条线。你写 video { aspect-ratio: 16 / 9; }，实际渲染时高度不会按比例计算，布局阶段就已出错。
必须用 div 包裹并设置 aspect-ratio
唯一能提前锁定布局空间、防止加载时 CLS（布局偏移）的方式，是用一层 <div class="video-wrapper"> 包住 <video>，把 aspect-ratio: 16 / 9 写在 wrapper 上。
- wrapper 必须是块级容器，推荐设
display: block或display: grid；避免放在display: flex父容器中，Safari 15.4–16.3 会忽略其aspect-ratio - 移除
<video>标签里自带的width和height属性（如width="640" height="360"），否则会覆盖 CSS 控制 - 语法只接受
16 / 9这种分数形式，不能写成16:9或1.777
如何让容器既响应式又不撑爆屏幕
只写 aspect-ratio: 16 / 9 不够——它只管比例，不管尺寸上限。小屏下可能正常，大屏下会无限拉宽，超出视口或破坏版式。
- 正确组合是：
width: 100%+max-width: 800px（按需调整）+aspect-ratio: 16 / 9 -
max-width值建议根据内容密度设定：文章内嵌常用720px～800px，全屏横幅可用100vw配合margin: 0 auto - 绝对不要给 wrapper 设
height，否则会与aspect-ratio冲突，导致高度计算异常
object-fit 必须和 aspect-ratio 配合使用
aspect-ratio 只控制容器盒子的尺寸，不管里面 video 怎么显示。不加约束的话，video 可能溢出、留黑边，甚至被拉伸变形，反而放大视觉跳动。
立即学习“前端免费学习笔记（深入）”；
-
video必须设width: 100%+height: 100%+object-fit: cover（填满裁边）或object-fit: contain（完整居中） - 如果父容器是
position: relative，可加position: absolute; inset: 0确保严丝合缝 - 旧版 Android WebView（≤4.4）不支持
object-fit，需降级监听 resize 手动缩放
height: auto 回退——所有尺寸逻辑必须由 CSS 原生属性在首帧渲染前完成。 
