aspect-ratio 不能直接作用于 video 标签，因其是替换元素，固有宽高比由文件元数据决定；必须用外层容器承载比例逻辑，并配合 object-fit、清空内联尺寸及 @supports 降级。
aspect-ratio 不能直接写在 video 标签上——这不是你漏写了，是浏览器按规范主动忽略它。视频是替换元素（replaced element），它的固有宽高比由文件元数据决定，aspect-ratio 对它完全不生效。
为什么直接给 video 加 aspect-ratio 没反应？
常见现象包括：video 高度为 0、只显示一条细线、加载时突然跳动（CLS）、横竖屏切换后比例错乱。DevTools 里能看到该属性被划掉，height 计算为 auto 或 0，就是这个原因。
根本原因是：CSS 规范明确限定 aspect-ratio 不作用于替换元素自身。必须用外层容器承载比例逻辑。
- 容器需有明确宽度来源（如
width: 100%、max-width: 100vw） - 容器不能声明
height、min-height或max-height（会覆盖比例计算） - 容器
display值应为block、flex或grid；避免inline - Safari 15.4+ 才稳定支持，15.3 及更早版本静默忽略，无警告
video 标签本身必须清空内联尺寸并填满容器
即使容器比例正确，video 内容仍可能拉伸、溢出或留大片黑边。
- 移除 HTML 中的
width和height属性（如width="640" height="360"），否则会强制覆盖 CSS 行为 -
video必须设width: 100%和height: 100%（仅在相对/绝对定位或 flex/grid 子项中有效） - 必须加
object-fit: cover或object-fit: contain控制填充方式；漏配会导致默认拉伸失真 -
object-fit: cover会裁切边缘，适合封面/背景；object-fit: contain保证完整显示，但可能留黑边
兼容旧浏览器必须用 @supports + padding-bottom 降级
不能只靠 JS 检测再插入样式，得用 CSS 原生降级。Safari 15.3 及更早、旧版安卓 WebView 完全不支持 aspect-ratio，且不会 fallback。
- 用
@supports not (aspect-ratio: 1)包裹降级规则，这是唯一可靠检测方式 - 降级结构必须是：
position: relative的外层 +height: 0+padding-bottom: 56.25%（16:9 → 9 ÷ 16 = 0.5625） - 内部
video设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 注意：
padding-bottom必须写成56.25%，不是56%或56.2%，少一位小数就偏形
移动端和多比例视频的细节陷阱
实际项目里最容易翻车的点不在比例本身，而在边界场景：
-
poster图片尺寸必须匹配视频真实比例，否则加载瞬间黑边错位 - 别依赖文件名判断比例（
cover-16x9.jpg不代表就是 16:9），应以服务端返回或视频元数据为准 - 混用不同比例视频时，建议用语义类名（如
ratio-4x3）或data-ratio属性动态控制，避免硬写死16 / 9 - iOS 上必须加
playsinline和webkit-playsinline，否则点击就跳原生全屏播放器
video 在其中自适应填充。现代写法简洁，但降级结构、属性顺序、内联尺寸清理、object-fit 配合，缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
