.ratio类必须加在父容器上而非video标签自身，因它通过伪元素padding-top撑高容器，要求子video设w-100 h-100及object-fit:cover/contain才能正确填充并维持比例。
直接给 <video></video> 加 .ratio 类没用——它只对父容器生效，且子元素必须满足宽高全占满、无 margin 等硬性条件。多数人卡在这一步就以为 Bootstrap 坏了。
为什么 .ratio 加在 <video></video> 上完全无效
.ratio 是一个容器类，设计逻辑是靠伪元素 ::before 的 padding-top 撑高，从而锁定宽高比。它不作用于替换元素自身，只作用于它的父级块容器。
- 把
.ratio-16x9直接加到<video></video>标签上 → 视频仍按默认尺寸渲染，比例失效 - 没给
<video></video>设width: 100%; height: 100%（或class="w-100 h-100"）→ 容器有高度，但视频只显示左上角一小块 - 视频带原生
controls→ 底部控件会额外增加高度，破坏.ratio计算出的视觉比例
.ratio 容器里 <video></video> 必须加哪些样式
Bootstrap 的 .ratio 只管“容器高度”，不管“内容怎么填满”。漏掉下面任意一项，都会出现留白、溢出或拉伸：
- 必须设
class="w-100 h-100"（或等效style="width:100%;height:100%"） - 必须加
object-fit: cover或object-fit: contain，否则视频会变形或上下/左右留黑边 - 如果用
object-fit: cover，建议补object-position: center防止关键内容被裁掉 - Bootstrap 5.3+ 才内置
object-fit-cover工具类；旧版得手动写或内联style
自定义比例（比如 9:16 竖屏）怎么写才不冲突
Bootstrap 内置的 .ratio-16x9 等类依赖 CSS 自定义变量 --bs-aspect-ratio，值是 height / width × 100%，不是比值本身。
- 9:16 → 计算为
16 / 9 × 100% ≈ 177.78%，所以写.ratio-9x16 { --bs-aspect-ratio: 177.777778%; } - 不能用
padding-top覆盖，会和 Bootstrap 的伪元素逻辑打架 - 自定义类必须放在 Bootstrap CSS 文件之后加载，否则变量未定义
- 别试图叠加多个
.ratio-*类（如.ratio-4x3 .ratio-16x9），CSS 不会取后者，而是全部失效
iOS Safari 全屏时 .ratio 容器塌陷怎么办
这不是代码写错，是浏览器行为：<video></video> 进入原生全屏后脱离文档流，外层 .ratio 容器高度归零。监听事件临时切布局是最稳方案：
- 监听
webkitbeginfullscreen事件，移除.ratio类，加position: fixed; top: 0; left: 0; width: 100vw; height: 100vh - 监听
webkitendfullscreen事件，恢复原结构和类名 - 别用
z-index: -999压视频——iOS Safari 可能因此静音或暂停播放 - 移动端若不需要原生 controls，优先用
playsinline+ 自定义控件，规避该问题
真正容易被忽略的是：比例控制和内容填充是两件事。.ratio 只解决“容器多高”，object-fit 和 width/height 才决定“视频怎么铺满”。两者缺一不可，且顺序不能颠倒——先有容器高度，再填内容，否则所有计算都白搭。
