直接给<video>加.ratio类完全无效，因为.ratio是容器类，只作用于块级父元素（如<div>），依赖::before伪元素和padding-top或--bs-aspect-ratio变量撑高；<video>非块级容器且不支持该布局逻辑，会导致比例失控、仅显示左上角或塌陷成线。
为什么直接给 <video> 加 .ratio 类完全无效
因为 .ratio 是容器类，只对块级父元素（如 <div>）起作用，内部靠 ::before 伪元素 + padding-top 或 aspect-ratio 变量撑高。把 .ratio 直接加在 <video> 上，它既不是块级容器，也不支持伪元素布局逻辑，结果就是视频按固有尺寸渲染，比例彻底失控。
常见错误写法：<video class="ratio ratio-16x9"> → 页面只显示左上角一小块，或高度塌成一条线。
- 必须用
<div class="ratio ratio-16x9">包住<video> -
<video>必须是该<div>的**直接子元素** - 不能嵌套中间层（比如
<div><video></div>），否则绝对定位失效
.ratio-21x9 自定义类必须怎么写才生效
Bootstrap 5.3+ 内置了 .ratio-21x9，但如果你用的是 5.0–5.2，或需要其他非标比例（如 9x16），就得自己定义。关键不是“类名像不像”，而是 --bs-aspect-ratio 变量值是否准确且被正确读取。
21:9 对应的计算值是 9 / 21 × 100% ≈ 42.857%，这个小数位不能省略——写成 43% 或 42.86% 都会导致 padding 计算偏差，上下留白或裁切。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法（CSS 中）：
.ratio-21x9 { --bs-aspect-ratio: 42.857%; } - 类名必须以
.ratio-开头，否则.ratio::before选择器不匹配 - 自定义 CSS 必须在 Bootstrap 主样式表**之后加载**，否则变量未定义
- 若用内联方式：
<div class="ratio" style="--bs-aspect-ratio: 21/9;">（注意：这是分数形式21/9，不是百分比）
子元素 <video> 必须加哪些类才能填满且不变形
.ratio 只管容器高度，不管内容怎么贴合。漏掉任意一项，都会导致留黑边、拉伸、溢出或只显示一角。
-
w-100 h-100—— 缺一不可；只写w-100会让高度按固有比例缩放，无法填满 -
position-absolute top-0 start-0—— 否则w-100 h-100在相对定位上下文中可能失效 -
object-fit-cover（Bootstrap 5.3+）或style="object-fit: cover;"—— 否则视频会拉伸或上下/左右留黑边 - 建议补
object-position: center，防止人脸被意外裁掉
完整结构示例：<div class="ratio ratio-21x9"><video class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" controls></video></div>
动态场景（Tab / Modal / AJAX）下 .ratio 高度塌陷怎么办
最常卡在这三个地方：容器初始 display: none、父宽度为 0、子元素未及时挂载。此时 padding-top 按 0 计算，高度直接归零。
检查开发者工具里 .ratio-21x9::before 是否渲染、padding-top 值是否为 42.857%，能快速定位问题。
- 避免用
display: none控制显隐；改用visibility: hidden+position: absolute - Tab 切换后，手动触发一次
el.offsetHeight（读取 layout 属性），强制浏览器重算 - Modal 弹出后，确保视频容器 DOM 已插入且父容器有有效宽度再初始化
- YouTube/Vimeo 的
<iframe>必须删掉内联width和height属性，否则覆盖 CSS 百分比
真正难的不是写对类名，而是让浏览器在正确时机拿到父容器宽度并完成 layout 计算——这点在 JS 动态渲染中尤其容易被忽略。
