aspect-video不总可靠，因其本质是aspect-ratio:16/9别名，依赖浏览器原生支持（safari 15.4+、chrome 88+、firefox 89+），旧版safari会忽略导致iframe拉伸变形，且仅适配16:9，无法覆盖4:3等非常规比例。
直接用 aspect-video + max-w-full 就能实现基础响应式内嵌视频容器，但要注意它只在 Tailwind v3.4+ 原生支持；老版本或需要精确控制宽高比时，得手动配 aspect-[16/9] 或用 padding 技巧兜底。
为什么 aspect-video 不总可靠？
这个类本质是 aspect-ratio: 16/9 的别名，但它依赖浏览器原生 aspect-ratio 支持 —— Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定可用。旧版 Safari（尤其 iOS 15.2 及更早）会忽略该声明，导致 iframe 拉伸变形。
- 检查项目 Tailwind 版本：
tailwindcss --version，v3.3 及以下默认不启用aspect-ratio插件 - 即使启用了插件，
aspect-video也仅映射到16/9，无法覆盖4/3或21/9等非常规比例 - 若视频源本身宽高比异常（如竖屏短视频），
aspect-video反而会裁剪内容
用 aspect-[16/9] 替代时的三个关键点
这是 v3.4+ 推荐做法，但必须配合容器结构和尺寸约束，否则无效。
- 外层容器需设
relative和block行为（不能是inline或flex子项未设min-width: 0） -
aspect-[16/9]必须作用于包裹iframe的父元素，而非iframe自身 - 务必加
max-w-full，否则在窄屏下可能溢出父容器（尤其当父容器有padding时）
正确写法示例：
<div class="relative aspect-[16/9] max-w-full"> <iframe src="https://youtube.com/embed/xxx" class="absolute inset-0 w-full h-full" allowfullscreen></iframe> </div>
兼容性兜底：padding-bottom 技巧怎么写才不踩坑？
当目标环境包含旧版 Safari 或需支持 IE（虽已淘汰但部分政企系统仍在用），就得退回传统 padding 方案。关键是 padding 百分比必须基于宽度计算，且容器高度必须为 0。
- 容器不能设
height: auto或min-height，否则 padding-bottom 失效 -
iframe必须用absolute定位，top: 0; left: 0;，否则会撑开容器 - 若页面有 zoom 缩放（如用户设 125% 字体缩放），padding 方案仍稳定，而
aspect-ratio在某些 zoom 级别下会轻微错位
安全写法：
<div class="relative w-full" style="height: 0; padding-bottom: 56.25%;"> <iframe src="https://youtube.com/embed/xxx" class="absolute top-0 left-0 w-full h-full" allowfullscreen></iframe> </div>
嵌入 YouTube 时额外要防的两个问题
YouTube iframe 自带固定宽高属性（width="560" height="315"），这些内联属性会覆盖 CSS，导致响应式失效。
- 务必移除 iframe 标签上的
width和height属性，哪怕值是"100%" - 如果使用 Nuxt/Content 或 Markdown 渲染器自动注入 iframe，需在组件中用
v-bind动态绑定 src 并显式剔除 width/height（例如：<iframe :src="url" ...></iframe>，不写 width/height） - 移动端全屏退出后，部分安卓 WebView 会残留错误尺寸，建议监听
webkitendfullscreen事件重置容器高度
真正麻烦的不是写几行 class，而是不同环境对 aspect-ratio 的解析差异，以及 iframe 自带属性和框架渲染逻辑的隐式干扰——这些细节不验证到真机，很容易上线后才发现横屏 iPhone 上视频被压扁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
