.video加.ratio-16x9无效，因该类仅作用于父容器；正确结构为<div class="ratio ratio-16x9"><video class="w-100 h-100 position-absolute top-0 start-0"></video></div>。
直接给 <video> 标签加 .ratio-16x9 没用——它必须作用于**父容器**，且子元素需显式拉满宽高并配合定位。
为什么 <video> 加了 .ratio-16x9 仍不响应？
因为 .ratio-16x9 是容器类，不是媒体元素修饰类。Bootstrap 5 的 .ratio 系列依赖伪元素（::before）撑高，只对块级父容器生效；<video> 是替换元素，默认尺寸优先级高于 CSS 比例声明。
- 常见错误：写成
<video class="ratio ratio-16x9"></video>→ 视频溢出、高度塌陷或比例错乱 - 正确结构必须是：
<div class="ratio ratio-16x9"><video></video></div> -
<video>必须设class="w-100 h-100"（或等效width: 100%; height: 100%），否则无法填满容器 - 若视频有原生
controls，底部控件会破坏高度计算，建议关闭或用自定义控件
<video> 子元素必须加 w-100 h-100 吗？
是的，而且不能只靠 width: 100%。Bootstrap 的 .ratio 容器本身不设 position: relative，但其内部逻辑依赖子元素绝对定位（通过伪元素 + 绝对定位实现拉伸）。仅设宽高百分比不够，还必须确保子元素脱离文档流并覆盖整个区域。
- 推荐写法：
<video class="w-100 h-100 position-absolute top-0 start-0"> - 如果不用 Bootstrap 工具类，等效 CSS 是：
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必加
object-fit: cover（或contain），否则视频可能拉伸变形或留黑边 - 旧版 Safari（iOS 14.5 之前）不支持
aspect-ratio，此时 fallback 的padding-top生效，若子元素没position: absolute，内容会被顶出可视区
YouTube 嵌入视频怎么套 .ratio-16x9？
官方生成的 YouTube <iframe> 默认带 width="560" height="315"，这两个内联属性会强制覆盖 CSS 百分比，必须彻底删除。
- 删掉
width和height属性（不是设为auto，是移除整段） - 确保
<iframe>是.ratio容器的**直接子元素**，中间不能嵌套<div> - 加上
allowfullscreen和语义化title（无障碍必需） - 示例：
<div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/xxx" title="YouTube video" allowfullscreen></iframe></div> - 若用在 Tab 或 Modal 中，避免初始
display: none；可改用visibility: hidden+position: absolute保盒模型
自定义 9:16（竖屏）比例怎么写？
Bootstrap 5 不提供 .ratio-9x16，但机制透明：它靠 --bs-aspect-ratio 变量控制伪元素的 padding-top 值，公式是 height / width × 100%。
- 9:16 →
16 / 9 × 100% ≈ 177.777778% - 自定义类必须以
.ratio-开头，且在 Bootstrap CSS 之后加载：.ratio-9x16 { --bs-aspect-ratio: 177.777778%; } - HTML 中用：
<div class="ratio ratio-9x16"><video class="w-100 h-100 position-absolute top-0 start-0"></video></div> - 别用
padding-top直接覆盖伪元素，会和 Bootstrap 的::before冲突 - 注意斜杠格式：变量值必须是
16/9这种分数字符串（Bootstrap 5.3+），不能是小数或百分比
最容易被忽略的是：Tab 切换或 Modal 初始化时，.ratio 容器若处于不可见状态，浏览器无法读取父宽，导致 padding-top 计算为 0，高度消失——这不是代码写错了，而是渲染时机问题。
