因为video是替换元素，其宽高比由视频元数据决定，css的aspect-ratio对其无效；必须用容器包裹并设aspect-ratio和width:100%，video自身设width:100%;height:100%;object-fit:cover，同时移除html中的width/height属性。
为什么直接给 <video></video> 写 aspect-ratio 没反应
因为 <video></video> 是替换元素（replaced element），浏览器按其固有尺寸或 HTML 的 width/height 属性决定大小，aspect-ratio 对它完全无效。你写 video { aspect-ratio: 16 / 9; }，它照样按默认 300×150 渲染，加载后可能塌陷、跳动或拉伸。
常见错误现象：<video></video> 高度为 0、压成一条线、宽度正常但高度没撑开。
- 必须用外层容器（如
<div class="video-wrapper">）包裹 <code><video></video> - 移除
<video></video>标签上的width和heightHTML 属性——它们会覆盖 CSS 控制 - 把
aspect-ratio和width或max-width一起写在 wrapper 上 -
aspect-ratio对display: inline元素无效，确保 wrapper 是block、flex或grid - 如果同时写了
height: 200px，aspect-ratio会被忽略——显式height优先级更高 - 必须给 wrapper 加
min-width: 0，这是让aspect-ratio能响应缩放的前提 - wrapper 还需设
width: 100%和aspect-ratio: 16 / 9 -
<video></video>本身要设width: 100%; height: 100%; object-fit: cover; - 别对 wrapper 设
flex-shrink: 1单独生效——min-width: 0不配，它就缩不动 - 只能用在块级、相对/绝对定位的容器上（比如
<div class="relative aspect-video">），不能直接加在 <code><video></video>上 - 自定义比例如
aspect-[16/9]仅在 v3.2+ 且 JIT 模式启用时有效；旧版本或未配content路径会忽略 - 别在 React/Vue 中拼接 class：
className={`aspect-${ratio}`}→ 编译器提取不到，改用条件判断 - 务必配合
absolute inset-0 w-full h-full给<video></video>，否则它不会铺满
aspect-ratio 单独写为啥容器会塌或乱拉伸
aspect-ratio 只定义比例，不提供尺寸基准。没有宽度约束时，浏览器无法计算高度，容器可能塌成一条线，或随内容无限拉伸。
✅ 正确写法示例：.video-wrapper { width: 100%; aspect-ratio: 16 / 9; } —— 宽度由父级决定，高度自动算出
✅ 更稳的响应式写法：.video-wrapper { max-width: 100%; aspect-ratio: 4 / 3; } —— 防止超大屏下撑爆布局
❌ 危险写法：aspect-ratio: 16 / 9; 单独存在，无 width 或 max-width
Flex 布局里视频缩放变形，min-width: 0 是关键开关
Flex 子项默认带 min-width: auto，它会锁死最小宽度（按 <video></video> 固有尺寸），导致 aspect-ratio 在小屏下失效：容器变窄时，视频宁可溢出也不缩。
典型现象：小屏下视频突然变高、左右留白、触发横向滚动条。
Tailwind 的 aspect-video 类为啥有时不生效
aspect-video 是 Tailwind v3.0+ 提供的快捷类，本质是 aspect-ratio: 16 / 9 + position: relative + padding-top: 56.25% 回退。但它依赖几个隐性条件：
移动端 Safari 15.4+ 才原生支持 aspect-ratio，但 Tailwind 的回退方案兼容到 IE9，实际落地更稳。
最易被忽略的是：wrapper 必须有 relative，且不能被 overflow: hidden 截断内容；服务端渲染时若懒加载视频组件，记得加 ssr: false 避免样式漏掉。
