aspect-video仅设置容器宽高比（如16/9），不控制视频内容尺寸，需配合relative+absolute布局及object-cover等样式才能正确显示；否则易出现溢出、拉伸或裁剪异常。
为什么 aspect-video 不能直接让任意 <video> 自适应容器
因为 aspect-video 只设置的是容器的宽高比（16/9），它不接管视频内容本身的尺寸逻辑。如果你把 <video> 直接塞进一个带 aspect-video 的 <div>，但没给 <video> 设 absolute 定位或 object-cover 控制，视频大概率会溢出、拉伸、或只显示左上角一小块。
常见错误现象：Uncaught TypeError: Failed to execute 'play' on 'HTMLMediaElement': HTMLMediaElement.play() is not a function（这其实和 aspect-video 无关，但常被误认为是它导致的）；更典型的是视频黑边不对称、全屏时模糊、移动端横竖屏切换后比例错乱。
-
aspect-video等价于aspect-ratio: 16 / 9，仅作用于父容器，不自动约束子元素 - 必须配合
relative+absolute布局，或用object-contain/object-cover控制<video>渲染行为 - Tailwind v3.2+ 才原生支持
aspect-video；v3.1 及更早需手动添加aspect-video: aspect-ratio: 16/9;到theme.extend.aspectRatio
正确结构：用 relative 包裹 + absolute inset-0 w-full h-full 视频
这是最稳妥、兼容性最好、且能响应式缩放的写法。父容器负责维持比例，子视频负责填满并保持裁剪逻辑。
<div class="relative aspect-video max-w-4xl mx-auto bg-gray-900">
<video
class="absolute inset-0 w-full h-full object-cover"
src="/demo.mp4"
muted
autoplay
loop
></video>
</div>
-
relative是必须的——否则absolute会相对于 body 定位 -
inset-0+w-full h-full确保视频撑满整个比例容器，不是靠width: 100%那种流式继承 -
object-cover防止变形，适合封面类视频；如需完整显示（含黑边），改用object-contain - 加
max-w-4xl是为了在大屏下限制宽度，避免视频过宽失真；移动端自动收缩
移动端横屏播放时黑边/裁剪异常？检查 viewport 和 CSS 覆盖
某些安卓 WebView 或 iOS Safari 在横屏进入全屏播放后，会绕过 CSS 布局强行拉伸 <video>，导致 aspect-video 失效。这不是 Tailwind 的问题，但容易误判。
立即学习“前端免费学习笔记（深入）”；
- 确保
<head>中有正确的 viewport：<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免全局重置
video { width: 100% }，它会破坏absolute布局的尺寸锚点 - iOS Safari 对
object-fit支持较晚（iOS 15.4+ 才稳定），低版本建议 fallback 到object-fill或 JS 检测后降级 - 如果使用
controls属性，注意默认控件高度会挤占容器空间——可加pb-4或用自定义控件
想支持不同比例？别硬套 aspect-video，换用 aspect-[w/h]
aspect-video 是固定 16/9，但实际项目里常遇到竖屏短视频（9/16）、正方视频（1/1）、甚至 21/9 电影宽屏。Tailwind v3.3+ 支持动态比例语法，比写一堆自定义 class 更干净。
- 竖屏视频：
aspect-[9/16]（注意顺序是宽/高，9/16 = 0.5625） - 正方容器：
aspect-square或aspect-[1/1] - 电影宽屏：
aspect-[21/9]，等价于aspect-[7/3] - 所有
aspect-[x/y]写法需开启content配置扫描（Tailwind 默认已启用），无需额外配置
复杂点在于：不同比例视频混排时，aspect-video 类名容易被复用错，建议按业务场景抽成 video-container--landscape 这样的语义化 class，再绑定对应 aspect 值——毕竟维护成本比调试布局错位低得多。
