Bootstrap响应式视频失效的主因是iframe残留width/height属性、容器比例类名错配（如16:9视频误用4:3）、以及嵌套在card或栅格中受父级干扰；需清除iframe尺寸属性、正确选用embed-responsive-16by9或ratio-16x9、并避免父容器padding/margin影响。
因为视频容器没按源视频宽高比匹配类名，或 iframe 自带 width/height 属性未清除，导致 Bootstrap 的响应式比例机制失效。
embed-responsive-16by9 和 ratio-16x9 用错比例
YouTube、Bilibili 等主流平台视频默认是 16:9，必须用 embed-responsive-16by9（Bootstrap 4）或 ratio-16x9（Bootstrap 5）。用 embed-responsive-4by3 包 16:9 视频，上下会多出大片黑边；反过来则左右被硬裁——拉伸只是视觉错觉，本质是容器比例和内容不匹配。
竖屏短视频（如 TikTok 风格）需自定义：.ratio-9x16 { --bs-aspect-ratio: 177.78%; }（注意是 height / width × 100%，不是写 9/16）。
iframe 上残留 width 和 height 属性
这是最常踩的坑。YouTube 嵌入代码自带 width="560" height="315"，浏览器会优先按这些像素值渲染，直接覆盖 CSS 的响应式逻辑。
- 必须手动删掉这两个属性，只保留
src和allowfullscreen等必要属性 - Bootstrap 4 中：
<iframe class="embed-responsive-item"></iframe>不能有 width/height - Bootstrap 5 中：
<iframe class="w-100 h-100"></iframe>同样不能带 width/height，否则w-100失效
卡片或栅格容器干扰了比例计算
把 embed-responsive 或 ratio 直接塞进 .card-body 或 .col 里，容易因父级 padding、margin 或 flex 对齐行为导致高度塌陷或定位偏移。
-
.card默认无overflow: hidden，视频溢出会撑破边界——得加overflow-hidden -
.card-body的padding在大屏上过窄，建议用px-0清空再自行控制内边距 - 别把视频容器嵌在
.container或.row内部设背景图，它们没有独立定位上下文，缩放时 cover 行为不可控
真正卡住的地方往往不在类名拼写，而在 iframe 是否“干净”、容器是否脱离了栅格干扰、以及大屏下是否忘了补 col-xl-4 这类断点类——比例机制本身很稳定，但只要一个环节带了固定尺寸或嵌套错层，整个响应链就断了。
