video标签是替换元素，css的aspect-ratio对其无效，必须用块级容器包裹并设width和aspect-ratio，同时清除video内联宽高、设置100%宽高及object-fit。
aspect-ratio 不能直接写在 <video></video> 上——浏览器会静默忽略，容器高度为 0 是必然结果，不是你漏写了样式。
为什么 video { aspect-ratio: 16 / 9 } 完全无效
因为 <video></video> 是替换元素（replaced element），其宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不参与计算。DevTools 里该声明常标为 “inactive”，height 计算为 auto 或 0px，导致：页面加载瞬间视频压成一条线、下方内容突然下移（CLS）、横竖屏切换后比例错乱。
这不是兼容性问题，是规范行为——所有现代浏览器（Chrome 100+、Safari 15.4+、Firefox 102+）都如此。
必须用块级容器包裹并设 width + aspect-ratio
最小可靠组合：.video-wrapper 必须同时满足：
-
display: block或display: grid（避开 Safari 15.4–16.3 在flex子项中的 bug） -
width: 100%或max-width: 100vw（没宽度，aspect-ratio就无法推导高度） -
aspect-ratio: 16 / 9（注意空格，不能写成16/9或16:9） - 不设
height（包括height: auto），否则覆盖比例计算
示例：
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
overflow: hidden;
}
video 标签本身必须清空内联属性并填满容器
容器比例正确 ≠ 视频画面正确。漏掉任一条件，就会留黑边、拉伸或溢出：
- 删掉
<video></video>标签上的width和height属性（如width="640"），否则强制覆盖 CSS -
<video></video>必须设width: 100%; height: 100%（仅在相对/绝对定位或 flex/grid 子项中生效） - 必须加
object-fit: cover（填满裁边）或object-fit: contain（完整居中） - 若容器是
position: relative，推荐给<video></video>加position: absolute; inset: 0，确保严丝合缝
结构示例：
<div class="video-wrapper"> <video controls><source src="demo.mp4" type="video/mp4"></source></video> </div>
@supports 降级必须覆盖 iOS 15.2 及更早版本
旧版 Safari（iOS 15.2 及更早）和部分安卓 WebView 会完全忽略 aspect-ratio，容器高度塌为 0，CLS 更严重。不能只测最新 Chrome。
降级方案要满足三点：
- 容器设
position: relative; width: 100%; height: 0 - 用
padding-top: 56.25%（16:9 →9 / 16 = 0.5625），小数位必须精确到百分位，写成56.2%就会偏形 -
<video></video>设position: absolute; top: 0; left: 0; width: 100%; height: 100%
最易被忽略的是：这个降级逻辑必须写在 @supports 外层，且需真机验证 iOS 15.2 —— 模拟器常不触发该 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
