video元素不能直接设aspect-ratio，因其是替换元素，固有宽高比由视频元数据决定，CSS的aspect-ratio对其无效，浏览器会忽略该声明导致高度塌陷或拉伸。
直接给视频容器设 aspect-ratio: 16 / 9 + width: 100% + height: 100% 不行——<video> 本身不响应 aspect-ratio，必须套一层 <div>。
为什么 video 元素不能直接设 aspect-ratio
<video> 是替换元素（replaced element），其固有宽高比由视频元数据决定，CSS 的 aspect-ratio 属性对它无效。浏览器会直接忽略 video { aspect-ratio: 16 / 9 }，导致高度塌陷或拉伸。
- 常见错误现象：容器高度为 0，视频压成一条线；或宽度正常但高度没按比例撑开
- 正确做法是用
<div class="video-wrapper">包住<video>，把aspect-ratio设在 wrapper 上 - 务必移除
<video>标签上的width和height属性（如width="640" height="360"），否则会覆盖 CSS 控制
全屏铺满的关键样式组合
要让视频在视口内“全屏铺满”（即宽度占满、高度自适应且不溢出），核心是容器控制比例 + 子元素填满 + 渲染方式匹配：
- 外层
.video-wrapper设aspect-ratio: 16 / 9+width: 100%+max-width: 100vw（防超宽） -
.video-wrapper必须是块级容器，推荐加display: block或display: grid（避开 Safari flex bug） -
<video>设width: 100%+height: 100%+object-fit: cover（填满裁边）或object-fit: contain（完整居中） - 如果父容器是
position: relative，<video>可加position: absolute; inset: 0确保严丝合缝
Safari 15.4–16.3 的 flex 容器兼容性问题
当 .video-wrapper 在 display: flex 父容器里时，Safari 15.4–16.3 会忽略其 aspect-ratio，导致高度计算失效，视频被压缩或错位。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：打开 Safari 开发者工具 → 检查元素 → 查看 computed height 是否为 auto 或 0
- 临时解法：将父容器改为
display: grid，或加align-items: start阻止 flex 项目拉伸 - 更稳方案：用
@supports (aspect-ratio: 1 / 1)包裹新写法，外部降级为padding-top: 56.25%+position: relative方案 - 注意：微信 iOS 客户端（v8.0.4x）识别
aspect-ratio但渲染异常，建议 UA 判断后统一降级
动态宽高比如何安全设置
从 API 拿到视频宽高（如 { width: 3840, height: 2160 }）时，不能简单算小数：3840 / 2160 = 1.7777777777777777，某些浏览器解析失败。
- 永远用最简整数比，比如调用
gcd(3840, 2160) === 240，得3840/240 = 16，2160/240 = 9，拼成"16/9" - 避免
Math.round(w / h * 100) / 100这类近似，精度损失会导致窄屏下出现 1px 黑边或裁切 - Tailwind 用户慎用
aspect-[${w}/${h}]：需 JIT 启用 + class 不拼接，否则编译不生成规则
真正容易被忽略的点是：即使 aspect-ratio 生效，<video> 内容是否“铺满”还取决于 object-fit 和父容器的 overflow。漏掉 overflow: hidden 或误设 object-fit: fill，都可能让黑边、拉伸或滚动条意外出现。
