bootstrap比例容器必须套在video外层div上，不能直接加在video标签；需同时满足：div加.ratio和.ratio-16x9类、video设w-100 h-100、容器加position-relative，且video须配object-fit:cover和poster属性防白屏与变形。
Bootstrap 比例容器怎么套在 video 标签上
直接给 <video></video> 加 .ratio 类完全无效——它只对父容器起作用，且要求子元素是块级、填满、无 margin。你得用一层 <div> 包住 <code><video></video>，再把比例类加在那层 <div> 上。
<p>必须满足三个条件才生效：</p>
<ul><li><code><div class="ratio ratio-16x9"> 这类类名只能加在**容器**上，不能加在 <code><video></video> 自身
<video></video> 必须设 class="w-100 h-100"（或等效的 width: 100%; height: 100%）position-relative，否则 height: 100% 在某些上下文中会失效常见错误：写成 <video class="ratio ratio-16x9"></video> → 视频塌成一条线，或宽高比完全失控。
为什么删不掉 iframe 的 width/height 属性就失效
Bootstrap 的比例逻辑靠 padding-top（如 56.25%）撑开容器高度，而原生 iframe 的 width 和 height 属性是内联尺寸，会强制覆盖 CSS 的百分比计算，导致绝对定位子元素无法正确拉伸。
YouTube/Vimeo 官方嵌入代码默认带 width="560" height="315"，必须手动删掉这两个属性，否则：
- 小屏下 iframe 只显示左上角一小块，右侧大片空白
- 移动端横竖屏切换时比例错乱，甚至触发浏览器默认滚动条
- 即使加了
.embed-responsive-item或w-100 h-100，也压不住内联尺寸优先级
Bootstrap 4 写法：<iframe class="embed-responsive-item" src="..."></iframe>（无 width/height）；Bootstrap 5 写法：<iframe class="w-100 h-100" src="..."></iframe>（同样不能有内联宽高）。
ratio-16x9 和自定义比例怎么算值
Bootstrap 5 的 .ratio-16x9 对应的是 --bs-aspect-ratio: 56.25%，这个值不是 “16:9” 字面意思，而是 height / width × 100%。所以你要自己加竖屏 9:16，得算 16 / 9 × 100% ≈ 177.78%，不是写 9x16 就能自动识别。
自定义写法（Sass 或 CSS）：
.ratio-9x16 {
--bs-aspect-ratio: 177.777778%;
}
注意两点：
- 类名本身无意义，真正起作用的是
--bs-aspect-ratio变量值 - 别指望多个比例类叠加生效（如
.ratio-4x3 .ratio-16x9），CSS 不支持“条件覆盖”，要用媒体查询重设变量
object-fit 和 poster 是绕不开的补丁
Bootstrap 的 .ratio 只管容器高度，不管视频内容怎么铺满。没 object-fit: cover，16:9 视频在 9:16 手机屏上会严重拉伸或留黑边；没 poster，首帧加载前就是白屏或闪烁。
必须手动加：
-
object-fit: cover（推荐）或object-fit: contain，Bootstrap 5.3+ 才有object-fit-cover工具类，旧版得自己写或内联style="object-fit: cover" -
poster="cover.jpg"属性，防白屏，尤其对大体积 MP4 很关键 - 移动端若要避免跳转全屏，还得加
playsinline（iOS Safari 强制要求）
最容易被忽略的是：就算用了 .ratio，只要没配 object-fit + poster，用户第一眼看到的大概率还是错位、黑边、白屏三连——比例容器只是骨架，这两样才是血肉。
