.ratio类需包裹video/iframe的直接父div，且父div不能display:none；子元素须w-100 h-100+position-absolute+object-fit-cover；iframe须移除width/height内联属性；自定义比例按height/width×100%精确计算。
为什么video加.ratio类完全没反应
因为.ratio是容器类，不是媒体元素修饰类——它只对块级父容器生效，靠::before伪元素的padding-top撑高，再配合子元素绝对定位填满。直接写成<video class="ratio ratio-16x9"></video>，浏览器既不识别比例逻辑，也不渲染伪元素，结果就是视频按原始尺寸显示，或高度塌成一条线。
- 必须用
<div class="ratio ratio-16x9"></div>包住<video> -
<video>不能是<div>的孙子节点，必须是**直接子元素** - 父
<div>不能有display: none；若在 Tab 或 Modal 中初始隐藏，改用visibility: hidden+position: absolute
iframe嵌入YouTube时比例错乱的根因和解法
官方生成的<iframe>默认带width="560" height="315"内联属性，它们优先级高于 CSS 百分比，会直接覆盖.ratio的布局逻辑。删掉这两个属性不是“设为auto”，而是**彻底移除整段**。
- 正确结构：
<div class="ratio ratio-16x9"><iframe src="..." title="..." allowfullscreen></iframe></div> -
<iframe>必须加class="w-100 h-100"（仅w-100不够） - 不能在
<iframe>外再套一层<div>，否则.ratio无法定位到直接子元素 - 旧版 Safari（iOS 14.5 之前）不支持
aspect-ratio，此时依赖padding-topfallback，若子元素没position: absolute，内容会被顶出可视区
自定义9:16或21:9比例时容易算错的数值
Bootstrap 5 的--bs-aspect-ratio变量值是height / width × 100%，不是比值本身，且小数精度直接影响上下留白。写成43%或178%都会导致裁切偏差。
-
9:16→16 / 9 × 100% = 177.777778%，建议保留至少6位小数 -
21:9→9 / 21 × 100% ≈ 42.857143% - 自定义类名必须以
.ratio-开头，且 CSS 必须在 Bootstrap 主样式之后加载 - 别用
style="--bs-aspect-ratio: 9/16;"这种分数写法——那是 Bootstrap 5.3+ 新机制，老版本不识别
video填不满、拉伸变形或留黑边的补救组合
.ratio只管容器高度，不管内容怎么铺满。漏掉任意一项，视频就会错位、变形或只显示一角。
立即学习“前端免费学习笔记（深入）”；
-
class="w-100 h-100"：确保宽度高度都拉满 -
class="position-absolute top-0 start-0"：脱离文档流，避免相对定位下百分比失效 -
class="object-fit-cover"（Bootstrap 5.3+）或内联style="object-fit: cover;"：防止拉伸，但需配object-position: center防人脸被裁 - 原生
controls会破坏高度计算，建议关闭或用播放器 SDK 替代
真正难的不是让视频“占满容器”，而是不同设备上首帧是否及时、Safari 是否静音、低端机是否卡顿——这些和.ratio无关，得靠编码参数、属性组合和降级逻辑兜底。
