.video直接加.ratio无效，因该类需作用于块级容器div，通过::before的padding-top和绝对定位实现比例控制；video须嵌套在带.ratio的div内，并添加position-absolute、w-100、h-100、object-fit-cover等类才能正确填充且不变形。
为什么直接给 video 加 .ratio 类完全无效
因为 .ratio 是容器类，只对父级 <div> 生效，内部靠伪元素 <code>::before 的 padding-top 撑高，再配合绝对定位子元素填满。把 .ratio 直接加在 <video></video> 上，它既不是块级容器，也不支持 padding-top 布局逻辑，结果就是视频按默认尺寸渲染，比例彻底失控。
常见错误写法：<video class="ratio ratio-16x9"></video> → 页面上只看到左上角一小块，或整个视频塌成一条线。
必须用一层 <div> 包住 <code><video></video>，再把 .ratio 和比例类加在这层 <div> 上。
<h3>
<code>.ratio 容器里 video 必须加哪些类才不留白、不变形
Bootstrap 的 .ratio 只管“容器高度”，不管“内容怎么填满”。漏掉下面任意一项，都会出问题：
-
class="w-100 h-100"—— 否则<video></video>不会拉满容器，只显示固有尺寸区域 -
class="position-absolute top-0 start-0"—— 否则无法脱离文档流，width/height: 100%在相对定位容器里可能失效 -
class="object-fit-cover"（Bootstrap 5.3+）或内联style="object-fit: cover"—— 否则视频会拉伸、上下/左右留黑边 - 若用
object-fit: cover，建议补object-position: center，防止人脸被裁掉
完整推荐写法：<div class="ratio ratio-16x9"><video class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" controls></video></div>
自定义非标准比例（如 9:16、21:9）怎么写才生效
Bootstrap 内置的 .ratio-16x9 等类依赖 CSS 变量 --bs-aspect-ratio，值必须是形如 a/b 的分数字符串，不能带空格，也不能用小数或百分比。
例如：
-
9:16→ 写成style="--bs-aspect-ratio: 9/16;"（注意是宽/高，不是高/宽） -
21:9→ 写成style="--bs-aspect-ratio: 21/9;"
如果需要复用，建议定义自定义类：.ratio-9x16 { --bs-aspect-ratio: 9/16; }，然后搭配 .ratio 使用：<div class="ratio ratio-9x16">。注意这个类必须在 Bootstrap CSS 之后加载，否则变量未定义。
<h3>移动端横竖屏切换时比例错乱，或 iframe 只显示一小块怎么办</h3>
<p>这是最隐蔽也最常踩的坑：YouTube/Vimeo 官方嵌入代码默认带 <code>width="560" height="315" 这类内联属性。它们优先级高于 CSS 百分比，会直接破坏 .ratio 的 padding-top 计算逻辑。
必须手动删掉 iframe 的 width 和 height 属性，只保留 src 和其他必要属性。
另外要注意：
- 旧版 Safari（iOS 14.5 之前）不支持
aspect-ratio，此时 fallback 的padding-bottom生效，但子元素若没position: absolute，内容会被顶出容器顶部——表现为“只看到顶部一小条” - 如果父容器是 flex 项目且没设
min-width: 0，flex 压缩可能导致padding-top计算失准，出现高度塌陷 -
.ratio类本身不响应断点变化，想在不同屏幕用不同比例（比如手机用 1:1、桌面用 16:9），得自己写媒体查询覆盖--bs-aspect-ratio或重写padding-top
