真正响应式视频嵌入需用容器控制宽高比，而非直接设iframe宽高；ratio-16x9等类必须作用于块级父div，iframe需移除内联尺寸并设w-100/h-100；aspect-[16/9]依赖relative父容器、正确层级和max-w-full，旧版safari需padding-bottom兜底。
直接用 iframe 加 width="100%" height="100%" 不能实现真正响应式视频嵌入——它只拉伸内容，不维持宽高比，小屏下会裁切或留黑边。必须靠容器控制比例，再让 iframe 填满该容器。
为什么 ratio-16x9 加在 iframe 上没用
Bootstrap 的 ratio-16x9 类只对块级容器生效，内部依赖 ::before 伪元素 + padding-top 实现比例，要求子元素脱离文档流。把该类加在 iframe 自身上，既不触发伪元素，也无法应用 position: absolute 定位逻辑。
- 错误写法：
<iframe class="ratio ratio-16x9" ...></iframe> - 正确结构：用
<div class="ratio ratio-16x9"><iframe class="w-100 h-100"></iframe></div> - 必须移除
iframe的内联width和height属性，否则会干扰 CSS 尺寸计算 - 父级（如
<div class="col">）不能设固定 <code>height或overflow: hidden，否则压扁比例aspect-[16/9]在 Tailwind 中为何有时失效aspect-[16/9]是aspect-ratio: 16 / 9的语法糖，但它不是“万能开关”，需满足三个前提才能稳定工作。- 外层容器必须是
relative且block（不能是inline或 flex 子项未设min-width: 0） - 该类必须作用于包裹
iframe的父<div>，而非 <code>iframe自身 - 必须搭配
max-w-full，否则在窄屏（尤其带 padding 的父容器）下可能溢出 - 旧版 Safari（iOS 15.2 及更早）完全忽略
aspect-ratio，此时会回退为自然高度，导致拉伸变形 - 公式：
padding-bottom = (height ÷ width) × 100%，例如 16:9 →56.25%，4:3 →75% - 父容器必须设
position: relative且height: 0（不能是auto或min-height） -
iframe必须用position: absolute; top: 0; left: 0; width: 100%; height: 100% - 避免用
calc()动态生成该值——四舍五入误差会导致微小比例偏移，破坏一致性 - 务必删掉
iframe的内联width和height—— 它们和响应式容器冲突，且 YouTube 会根据容器尺寸自动适配分辨率 - 若页面有 JS 动态插入 iframe，需确保插入后立即触发重绘（如
iframe.style.display = 'block'），否则 Safari 可能卡在加载状态 - 移动端 iOS Safari 对
allow="autoplay; fullscreen; picture-in-picture"解析敏感，建议显式补全，不要省略picture-in-picture
兼容性兜底：用
padding-bottom手动算比例当目标环境含旧版 Safari、政企内网 IE（虽已淘汰但仍有存量）、或需 100% 确保 zoom 缩放稳定性时，
padding-bottom方案仍是首选。嵌入 YouTube 时额外要防的两件事
YouTube 的 iframe 默认带
frameborder="0"和allowfullscreen，但现代浏览器策略让它更难“听话”。最易被忽略的是：所有方案都依赖「父容器无干扰高度约束」。哪怕一个
min-height: 200px或flex: 1没配min-height: 0，都可能导致比例容器塌陷——这不是代码写错，而是布局上下文被悄悄覆盖了。 - 外层容器必须是
