Bootstrap的ratio-16x9类仅设定容器宽高比，需用div包裹iframe并设iframe为w-100 h-100，且必须移除其width/height属性，否则仍会溢出或变形。
Bootstrap 的 ratio-16x9 类本身不直接让视频“响应式”，它只提供容器宽高比；真正实现响应式嵌入，必须配合 <iframe> 的正确写法和父容器约束。
为什么直接加 ratio-16x9 后视频还是溢出或变形？
常见错误是把 ratio-16x9 加在 <iframe> 自身上——这个类只对「块级容器」生效，且依赖内部子元素（如 <iframe>）设为 position: absolute; top: 0; left: 0; width: 100%; height: 100% 才能撑满。Bootstrap 5+ 的 ratio 工具类是通过 ::before 伪元素 + padding-top 实现宽高比，所以子元素必须脱离文档流。
实操建议：
- 用
<div class="ratio ratio-16x9">包裹<iframe>，不要给<iframe>加该类 -
<iframe>必须设置class="w-100 h-100"（或等效的width="100%" height="100%"+style="border:0"） - 确保父级容器（比如
<div class="col">）没有固定高度或overflow: hidden干扰
ratio-16x9 在 Bootstrap 4 和 5 中的行为差异
Bootstrap 4 没有内置 ratio 类，常见做法是手写 .embed-responsive .embed-responsive-16by9，它用 padding-bottom: 56.25% + position: relative；而 Bootstrap 5 废弃了 embed-responsive，改用更简洁的 ratio 工具类，但要求子元素必须绝对定位。
立即学习“前端免费学习笔记（深入）”；
关键区别：
- Bootstrap 4：
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item"></iframe></div> - Bootstrap 5：
<div class="ratio ratio-16x9"><iframe class="w-100 h-100" src="..."></iframe></div> - 若混用（比如在 BS5 里还用
embed-responsive-item），会导致样式冲突或失效
嵌入 YouTube / Vimeo 视频时的额外注意事项
第三方视频平台的 iframe 默认可能带固定宽高（如 width="560" height="315"），这会覆盖响应式行为，必须显式移除。
实操建议：
- 删掉
<iframe>标签上的width和height属性（HTML 属性，不是 CSS） - 确认
srcURL 含?rel=0&modestbranding=1等参数不影响布局（它们不影响尺寸，但可减少干扰） - Vimeo 链接需用
player.vimeo.com/video/...格式，不能用vimeo.com/...页面链接 - 若页面启用 CSP（Content Security Policy），需在
frame-src中加入对应域名，否则 iframe 直接被浏览器拦截，控制台报错：Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive
移动端下黑边、拉伸或点击无反应的排查点
看起来“已经套了 ratio-16x9”，但真机上仍异常，大概率是以下某个环节漏了：
-
<iframe>缺少allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"—— 尤其 iOS Safari 要求autoplay和picture-in-picture显式声明才允许自动播放或全屏 - 外层容器用了
max-width: 100%但没设width: 100%，导致比例容器计算基准出错 - 自定义 CSS 覆盖了
.ratio::before的padding-top，例如重置了所有伪元素或设置了box-sizing: border-box在错误层级 - 视频源本身分辨率非 16:9（比如上传的是 4:3 的竖版视频），此时比例容器守住了 16:9，但内容被裁剪或加黑边——这是内容问题，不是响应式失效
最常被忽略的是：比例类只管容器形状，不管内容是否适配；<iframe> 的 width/height 属性不删，CSS 再怎么写也白搭。
