video是替换元素，其宽高比由元数据决定，CSS的aspect-ratio对其无效；必须用div包裹并设aspect-ratio: 16 / 9、width: 100%、overflow: hidden，video内设width: 100%、height: 100%、object-fit: cover，且移除内联宽高属性。
aspect-ratio 不能直接写在 video 元素上——浏览器会忽略它，容器高度塌陷或视频拉伸变形是必然结果。必须用 div 包裹并设 aspect-ratio，再配合定位和尺寸控制才能真正生效。
为什么 video { aspect-ratio: 16 / 9 } 完全无效
因为 video 是替换元素（replaced element），其宽高由视频元数据决定，CSS 的 aspect-ratio 对它不作用。你在 DevTools 里看到该声明标为 “inactive”，计算出的 height 常为 auto 或 0，导致：
- 页面加载瞬间视频高度为 0，下方内容突然下移（CLS）
- 视频被横向压成一条细线，或上下留大片空白
- 在 Safari 15.4–16.3 中，若父容器是
display: flex，aspect-ratio会被完全忽略
aspect-ratio 必须搭配 width 和定位才起作用
aspect-ratio 只定义比例，不提供尺寸基准。没有宽度约束，浏览器无法推导高度，容器可能塌缩或无限拉伸。
- 包裹容器（如
.video-wrapper）必须设width: 100%或max-width: 800px等明确宽度来源 - 容器不能设
height，否则与aspect-ratio冲突，导致高度计算异常 - 推荐设
display: block或display: grid；避免嵌套在display: flex父容器中（Safari bug） - 语法必须是
16 / 9（空格分隔），不是16:9或1.777，后者会导致解析失败或精度偏差
如何用 position 配合 object-fit 填满且防溢出
aspect-ratio 只管容器盒子尺寸，不管内部视频怎么铺。不加定位和填充控制，video 可能撑破、留黑边、甚至被拉伸。
立即学习“前端免费学习笔记（深入）”；
-
video必须设width: 100%+height: 100%，才能填满容器 - 加
object-fit: cover（裁边填满）或object-fit: contain（完整居中），按需选择 - 若容器是
position: relative，可给video加position: absolute; inset: 0，确保严丝合缝 - 务必加
overflow: hidden到容器上，防止object-fit: cover时内容溢出边界 - 移除
video标签上的width和height属性（如width="640"），否则会覆盖 CSS 控制
兼容旧浏览器的 position 降级方案
Chrome 88+、Firefox 89+、Safari 15.4+ 支持良好，但 iOS 15.2 或更早版本会完全忽略 aspect-ratio。生产环境必须降级。
- 父容器设
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% - 用
@supports (aspect-ratio: 1 / 1)包裹现代样式，降级规则写在外部
真正容易被忽略的是：所有尺寸逻辑必须在 DOM 解析阶段完成，不能依赖 JS 计算、不能等视频元数据加载、也不能靠回退。否则 CLS 无法避免。
