aspect-video 类仅对容器元素生效且需明确宽度，正确用法是外层 div 添加 aspect-video 和宽度类（如 w-full），内嵌 video 或 iframe 并设置 w-full h-full object-cover 等样式以确保比例填充。
直接在 <video> 或 <iframe> 标签上加 aspect-video 没效果——这个类只对**容器元素**生效，且必须满足宽度前提。
必须用 div 包裹视频
不能把 aspect-video 写在 <video> 或 <iframe> 上，它们是替换元素，aspect-ratio 对其无效。正确结构是：
- 外层用
<div class="aspect-video w-full">作为容器 - 内部放
<video>或<iframe> - 确保容器有明确宽度来源（如
w-full、max-w-lg、flex-1）
关键类组合不能少
aspect-video 单独存在不会产生高度，它需要宽度基准来推算。常见有效组合：
-
aspect-video w-full：全宽响应式容器 -
aspect-video max-w-4xl mx-auto：居中、最大宽度限制 -
aspect-video flex-1：在 Flex 布局子项中占满剩余空间
漏掉宽度类（比如只写 aspect-video），容器宽度为 0，高度就为 0。
立即学习“前端免费学习笔记（深入）”；
视频内容要填满并保持比例
仅设容器比例还不够，<video> 或 <iframe> 本身需配合样式防止拉伸或留白：
- 加
w-full h-full让内容撑满容器 - 必须指定
object-cover（裁剪填充）或object-contain（完整显示） - 推荐加
overflow-hidden防止cover模式下边缘溢出
示例代码：
<div class="aspect-video w-full overflow-hidden"><video class="w-full h-full object-cover">
<source src="video.mp4" type="video/mp4">
</video>
</div>
兼容性与备用方案
aspect-video 在 Tailwind v3.3+ 默认可用，但 Safari 15.3 及更早版本不支持。若需兼容老浏览器：
- 用
aspect-[0.5625]（即 9/16 = 0.5625）代替aspect-video，提升兼容性 - 或退回 padding-bottom 技巧：
relative pt-[56.25%] h-0+ 绝对定位子元素 - 检查 JIT 编译是否包含该类：在
tailwind.config.js的content中确保扫描到使用位置
