bootstrap 5 的 .ratio 类必须作用于父容器而非 video 标签自身，子 video 需设 w-100 h-100；内置比例含 1x1、4x3、16x9、21x9，自定义需通过 --bs-aspect-ratio 变量设置；响应式需媒体查询重设变量；全屏时需监听事件临时移除 .ratio 并 fixed 定位。
Bootstrap 5 的 .ratio 类不自动适配视频尺寸
直接给 <video></video> 标签加 .ratio 类没用——它只作用于子元素，且要求子元素是块级、无 margin、并设 width: 100%; height: 100%。常见错误是把 .ratio 加在 <video></video> 自身上，结果视频溢出或比例失效。
正确做法是套一层容器：
-
.ratio必须加在**父容器**上（如<div class="ratio ratio-16x9">）<li> <code><video></video>放在内部，且必须设class="w-100 h-100"或等效样式（width: 100%; height: 100%） - 视频需关闭原生 controls 或手动处理全屏行为，否则底部控件会破坏高度计算
支持的预设比例和自定义写法
Bootstrap 5 内置了 .ratio-1x1、.ratio-4x3、.ratio-16x9、.ratio-21x9 四种，靠 CSS ::before 伪元素撑高。但如果你需要 9:16（竖屏）或 1:2，不能靠改类名，得自己写 CSS：
.ratio-9x16 {
--bs-aspect-ratio: 177.777778%;
}
注意：值是 height / width * 100%，不是比值本身。9:16 → 16 / 9 * 100% ≈ 177.78%。
- 直接修改
--bs-aspect-ratio变量最稳妥，兼容所有内置.ratio行为 - 别用
padding-top手动覆盖，会和 Bootstrap 的伪元素逻辑冲突 - 自定义类要放在 Bootstrap CSS 之后，否则变量未生效
响应式视频 + .ratio 容易忽略的媒体查询陷阱
默认 .ratio 是固定比例，不会随断点变化。想在小屏切 4:3、大屏切 16:9？不能靠多个类叠加（.ratio-4x3 .ratio-16x9 不生效），得用响应式变量：
- 用 Sass：在
@include media-breakpoint-up(md)里重设--bs-aspect-ratio - 用纯 CSS：写媒体查询，针对容器类（如
.ratio-video-md）单独设变量 - 别试图用
max-width或vw直接控制<video></video>，会绕过.ratio的高度保障机制
实际中，多数项目只需要一个固定比例，强行响应式反而让视频在窄屏被过度压缩，不如用 object-fit: cover 配合裁剪更可控。
移动端全屏时 .ratio 容器不占满视口
iOS Safari 和部分 Android 浏览器进入原生全屏后，<video></video> 会脱离文档流，导致外层 .ratio 容器高度归零或错位。这不是 Bootstrap 的 bug，是浏览器行为。
- 监听
webkitbeginfullscreen/webkitendfullscreen事件，临时移除.ratio并设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh - 退出全屏后恢复容器结构——注意 DOM 顺序不能乱，否则 Vue/React 可能触发异常重绘
- 如果用的是
plyr或video.js等播放器，它们已封装该逻辑，优先用其容器而非裸.ratio
这个点最容易被漏掉：开发时在桌面模拟器测不出问题，一上真机就发现全屏后黑边或留白。务必在真机上验证全屏流程。
