bootstrap 5+用.ratio类通过--bs-aspect-ratio变量（height/width×100%）控制容器宽高比，需父容器设.ratio、子元素设w-100 h-100，且必须移除iframe/video的width/height属性，否则css失效。
用 .ratio 类控制容器宽高比（Bootstrap 5+）
Bootstrap 5 放弃了 .embed-responsive，改用 .ratio + CSS 自定义属性实现更灵活的宽高比控制。它不依赖 JavaScript，纯 CSS 驱动，且支持动态修改。
核心逻辑是：父容器通过 --bs-aspect-ratio 变量设定比例值（height / width × 100%），子元素设为 width: 100%; height: 100% 即可自动填满该比例区域。
-
.ratio-16x9对应--bs-aspect-ratio: 56.25%（即 9÷16×100%） -
.ratio-4x3对应--bs-aspect-ratio: 75%（3÷4×100%） - 竖屏视频（如 TikTok）需自定义：
<div class="ratio" style="--bs-aspect-ratio: 177.78%;">（16÷9×100%） <p>注意：<code>.ratio只管容器比例，不管内容是否变形——<video></video>还得额外加class="w-100 h-100 object-fit-cover"，否则会拉伸。为什么删不掉
width和height属性就失效？浏览器对
<iframe></iframe>的原生渲染优先级高于 CSS 绝对定位。一旦你在标签里写了width="560" height="315"，哪怕外层套了.ratio-16x9，子元素也会按像素尺寸强行占位，导致width: 100%被忽略、只显示左上角一小块或右侧大片空白。- YouTube/Vimeo 官方嵌入代码默认带这两个属性，必须手动删除
- 正确写法：
<iframe src="..." allowfullscreen></iframe>（无宽高） - 验证方法：打开 DevTools，检查
<iframe></iframe>计算样式中width和height是否为100%，而非固定像素值
移动端全屏时
.ratio容器塌陷怎么办？iOS Safari 在视频进入原生全屏后，会把
<iframe></iframe>或<video></video>移出文档流，导致外层.ratio容器高度归零、视觉上“消失”或留下空白条。这不是 Bootstrap 的 bug，而是浏览器行为。- 仅当视频在页面内播放（非全屏）时，
.ratio才有效约束其容器 - 若需全屏体验，别用
.ratio套<video></video>，改用position: absolute+object-fit: cover方案 - Tab 切换或 Modal 动态加载时，若容器初始
display: none，--bs-aspect-ratio的 padding 计算会失败，建议用visibility: hidden替代
自定义比例时
--bs-aspect-ratio怎么算？不是猜，也不是看屏幕尺寸，而是严格按视频源本身的宽高比反推：用
height ÷ width × 100%。- 16:9 →
9 ÷ 16 × 100% = 56.25% - 4:3 →
3 ÷ 4 × 100% = 75% - 9:16（竖屏）→
16 ÷ 9 × 100% ≈ 177.78% - 错配后果明显：用 4:3 容器包 16:9 视频，上下留白；反过来则左右被裁
真正难的不是算数，是确认你拿到的视频链接本身是否真符合标称比例——有些 YouTube 剪辑会加黑边伪装成 4:3，实际仍是 16:9 内容。
