bootstrap的.ratio类必须作用于video外层div容器而非video自身，因它依赖伪元素padding-top撑高容器，且video需配w-100 h-100和object-fit:cover/contain才能正确填充并维持比例。
Bootstrap弹性布局本身不处理视频比例缩放——它只管列宽、断点和对齐；视频比例必须靠 .ratio 容器类单独控制，且必须套在 <video></video> 外层 <div> 上，否则完全无效。
<h3>为什么直接给 <code><video></video> 加 .ratio 类没用
.ratio 是容器类，底层靠伪元素 ::before 的 padding-top 撑高，只对块级父容器生效。把 .ratio-16x9 直接写在 <video></video> 标签上，浏览器既不会渲染伪元素，也不会触发比例计算，结果就是视频按原始尺寸渲染，或塌成一条线。
- 错误写法：
<video class="ratio ratio-16x9"></video> - 正确结构：必须用
<div class="ratio ratio-16x9"><video class="w-100 h-100"></video></div> - 漏掉
w-100 h-100→ 视频只显示左上角一小块，不填满容器 - 漏掉
position-relative（Bootstrap 5.3+ 已内置）→ 在某些 flex 布局中高度失效
.ratio 容器里 <video></video> 必须配哪些样式才不变形
.ratio 只锁容器高度，不管内容怎么“塞进去”。不加约束，<video></video> 会拉伸、留黑边或裁错位置。
- 必须设
class="w-100 h-100"（或等效style="width:100%;height:100%"） - 必须加
object-fit: cover或object-fit: contain；Bootstrap 5.3+ 可用object-fit-cover工具类，旧版得手动写style="object-fit:cover" - 若用
cover，建议补object-position: center，防止人脸/关键内容被裁掉 - 原生
controls会额外增加底部高度，破坏比例；如需响应式控件，优先用playsinline+ 自定义 UI
自定义非标比例（比如 9:16 竖屏）怎么写才可靠
Bootstrap 不内置 .ratio-9x16，但可复用其变量机制。关键是算对 --bs-aspect-ratio 值：它不是比值本身，而是 height / width × 100%。
- 9:16 →
16 / 9 × 100% ≈ 177.777778%，写成.ratio-9x16 { --bs-aspect-ratio: 177.777778%; } - 21:9 →
9 / 21 × 100% ≈ 42.857%，小数位不能省，四舍五入成 43% 会导致上下留白 - 自定义类必须放在 Bootstrap CSS 之后加载，否则变量未定义
- 别叠加多个
.ratio-*类（如.ratio-16x9 .ratio-9x16），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 可能因此静音或暂停播放 - 动态渲染场景（如 Tab 切换、Modal 弹出后）若容器初始为
display: none，padding 计算会按 0 执行，改用visibility: hidden或延迟插入 DOM
真正卡住人的从来不是比例数字，而是那三层嵌套关系：容器要带 .ratio，子元素要填满，填充方式要明确。少一层，就露馅。
