video 元素不支持 aspect-ratio，需用容器包裹并设 aspect-ratio、width:100% 和 overflow:hidden，video 本身设 width:100%、height:100%、object-fit:cover，且移除 HTML 中的 width/height 属性。
aspect-ratio 不能直接写在 video 元素上——写了也白写，浏览器会忽略，视频高度塌陷或拉伸。这不是你代码有误，是规范行为。
为什么 video { aspect-ratio: 16 / 9 } 不生效
video 是替换元素（replaced element），它的固有宽高比由视频文件元数据决定，aspect-ratio 对其完全无效。你在开发者工具里看到该属性状态为 “inactive”，computed height 往往是 auto 或 0px。
常见现象包括：
- 页面刚加载时
video高度为 0，只显示一条细线 - 横竖屏切换后比例错乱，尤其在 Safari 15.4–16.3 的
flex容器中 - 服务端返回不同宽高比（如
9 / 16、21 / 9）时硬写死16 / 9导致裁切或留白
必须用容器包裹并设 aspect-ratio：三步缺一不可
核心操作就这三步，少一个都会出问题：
- 给
video套一层<div class="video-wrapper"></div> -
.video-wrapper上写aspect-ratio: 16 / 9+width: 100%（单独写aspect-ratio会导致容器塌陷） -
video本身设width: 100%+height: 100%+object-fit: cover，并移除 HTML 中的width和height属性（如width="640"）
配套样式不能漏：overflow 和 flex-shrink
overflow: hidden 必须加到 wrapper 上，防止 object-fit: cover 失效时内容溢出；若 wrapper 在 flex 容器中，还需加 flex-shrink: 0 或 min-width: 0，否则 Flex 默认的 min-width: auto 会锁死缩放空间。
立即学习“前端免费学习笔记（深入）”；
另外注意：
-
aspect-ratio: 16 / 9写法合法，16:9或1.777都不合法 -
aspect-ratio只定义比例，不提供尺寸基准——没width或max-width，它就算不出高度 - Safari 15.4+、Chrome 88+、Firefox 89+ 支持稳定；旧版 Safari 或 IE 需用
padding-top: 56.25%+ 绝对定位兜底
动态宽高比视频怎么处理
如果后端返回的视频宽高比不固定（比如竖屏 9 / 16、超宽屏 21 / 9），别硬写死 16 / 9。可以：
- 服务端返回比例值（如
data-aspect-ratio="9/16"），CSS 用属性选择器动态匹配：[data-aspect-ratio="9/16"] { aspect-ratio: 9 / 16; } - 或 JS 注入 class：
video-wrapper--9-16，对应写.video-wrapper--9-16 { aspect-ratio: 9 / 16; } - 避免用 JS 计算 height——既破坏 CLS 防御，又增加重排开销
最易被忽略的是：HTML 中残留的 width/height 属性，哪怕只是 width="100%"，也会干扰 CSS 控制逻辑，务必删干净。
