bootstrap的ratio-16x9类仅设定容器宽高比，需用div包裹iframe并设iframe为w-100 h-100，且必须移除其width/height属性，否则仍会溢出或变形。

Bootstrap 的 ratio-16x9 类本身不直接让视频“响应式”，它只提供容器宽高比；真正实现响应式嵌入，必须配合 <iframe></iframe> 的正确写法和父容器约束。

为什么直接加 ratio-16x9 后视频还是溢出或变形？

常见错误是把 ratio-16x9 加在 <iframe></iframe> 自身上——这个类只对「块级容器」生效，且依赖内部子元素（如 <iframe></iframe>）设为 position: absolute; top: 0; left: 0; width: 100%; height: 100% 才能撑满。Bootstrap 5+ 的 ratio 工具类是通过 ::before 伪元素 + padding-top 实现宽高比，所以子元素必须脱离文档流。

实操建议：

• 用 <div class="ratio ratio-16x9"> 包裹 <code><iframe></iframe>，不要给 <iframe></iframe> 加该类
• <iframe></iframe> 必须设置 class="w-100 h-100"（或等效的 width="100%" height="100%" + style="border:0"）
• 确保父级容器（比如 <div class="col">）没有固定高度或 <code>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 工具类，但要求子元素必须绝对定位。

  关键区别：

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • 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></iframe> 标签上的 width 和 height 属性（HTML 属性，不是 CSS）
  • 确认 src URL 含 ?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></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></iframe> 的 width/height 属性不删，CSS 再怎么写也白搭。