video标签上直接写aspect-ratio: 16 / 9无效，因其为替换元素，需用div wrapper设置aspect-ratio并清除video的width/height属性，配合width: 100%、max-width和object-fit才能实现响应式无CLS布局。
video 元素上直接写 aspect-ratio: 16 / 9 会失效
浏览器会忽略 video 标签上的 aspect-ratio 声明，因为它属于替换元素（replaced element），其固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不生效。常见现象是容器高度塌陷为 0，或视频被横向拉伸成一条线。
必须用一层 <div class="video-wrapper"> 包住 <video>，把 aspect-ratio 写在 wrapper 上——这是唯一能提前锁定布局空间、防止加载时 CLS（布局偏移）的方式。
- 移除
<video>标签里自带的width和height属性（如width="640" height="360"），否则会覆盖 CSS 控制 - wrapper 必须是块级容器，推荐设
display: block或display: grid；避免在display: flex父容器中使用，Safari 15.4–16.3 会忽略其aspect-ratio - 不要写成
aspect-ratio: 16:9或aspect-ratio: 1.777，语法只接受16 / 9这种分数形式
如何让容器既响应式又不撑爆屏幕
只写 aspect-ratio: 16 / 9 不够——它只管比例，不管尺寸上限。小屏下可能正常，大屏下会无限拉宽，超出视口或破坏版式。
正确组合是：width: 100% + max-width: 800px（按需调整）+ aspect-ratio: 16 / 9。这样容器在小屏占满，在大屏最多显示 800px 宽，高度自动按比例计算。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
max-width值建议根据内容密度设定，比如文章内嵌视频常用720px～800px，全屏横幅可用100vw配合margin: 0 auto - 避免对 wrapper 设
height，否则会与aspect-ratio冲突，导致高度计算异常 - 若父容器有 padding 或 max-width，wrapper 的
width: 100%会继承该上下文宽度，无需额外处理
为什么 object-fit 必须和 aspect-ratio 配合使用
aspect-ratio 只控制容器盒子的尺寸，不管里面 video 怎么显示。不加约束的话，video 可能溢出、留黑边，甚至被拉伸变形，反而放大视觉跳动。
务必给 video 加三件套：width: 100% + height: 100% + object-fit: cover（或 contain）。
-
object-fit: cover：填满容器，裁切边缘——适合短视频流、封面预览等强调视觉冲击的场景 -
object-fit: contain：完整显示，可能留透明/背景区域——适合教学视频、演示录屏等信息完整性优先的场景 - 如果用
position: absolute布局，记得加inset: 0替代top/left/bottom/right: 0，更简洁且兼容性好
Safari 和微信 iOS 的兼容性坑要手动兜底
虽然 aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+ 已稳定支持，但 Safari 15.3 及更早版本、部分微信 iOS 客户端（v8.0.4x）仍存在渲染异常或完全不识别的问题。
不能只靠 @supports (aspect-ratio: 1 / 1) 包裹新写法——旧浏览器解析失败后会回退到无约束状态，CLS 更严重。必须提供降级方案：
- 降级用
padding-top: 56.25%（16:9 = 9 ÷ 16 = 0.5625）+position: relative+ 绝对定位子元素 - 父容器设
position: relative和padding-top: 56.25%，同时height: 0；video设position: absolute; inset: 0; width: 100%; height: 100% - 动态宽高比（如从 API 拿到
{ width: 3840, height: 2160 }）必须转为最简整数比：gcd(3840, 2160) === 240→"16/9"，不能直接算小数
