直接用iframe或video标签不加容器必撑破布局，因Bootstrap响应式依赖父容器宽高比+子元素绝对定位；常见失效原因：父容器未设width:100%、子元素保留原生宽高属性、BS4/BS5类名混用。
直接用 <iframe></iframe> 或 <video></video> 标签写进 html，不加容器包裹，视频必然撑破布局——这不是 bootstrap 失效，而是你跳过了它强制宽高比的底层机制。
为什么加了 .ratio 或 .embed-responsive 还是变形/溢出
最常卡在这三点：父容器没设 width: 100%（比如被 .container 的 padding 挤窄）、子元素仍带原生 width/height 属性、Bootstrap 版本和类名混用。
-
<iframe></iframe>原始嵌入代码自带width="560" height="315"，必须手动删掉，否则 CSS 绝对定位失效 - Bootstrap 5 的
.ratio要求子元素显式设width="100%" height="100%"；Bootstrap 4 的.embed-responsive-item则禁止设任何宽高 - 旧项目升级到 BS5 后还写
.embed-responsive-16by9，类名已废弃，容器会塌陷成一条线 - 如果视频放在
.col里，确保该列没额外padding或margin，否则100%计算失准
<video></video> 和 <iframe></iframe> 的响应式写法差异
<iframe></iframe>（YouTube/Vimeo）可直接套 .ratio 容器；<video></video> 必须额外控制缩放行为，否则默认拉伸或留黑边。
-
<iframe></iframe>：只用<div class="ratio ratio-16x9"><iframe src="..." width="100%" height="100%"></iframe></div> -
<video></video>：需加class="w-100 h-100 object-fit-cover"（BS 5.3+ 才内置），否则得手写style="object-fit: cover;" - 若用 poster 图，
<img alt="Bootstrap如何让视频响应式自适应" >要配class="w-100 h-100 object-fit-cover"，不然比例错位 -
<video></video>不支持.ratio直接包裹——它的宽高比由源文件决定，.ratio只是容器占位，内容仍需object-fit修正
移动端自动播放失败的真实原因和解法
不是“写了 autoplay 就能播”，而是浏览器策略要求三者同时存在且顺序合理：用户未交互时，缺一不可。
- 必须同时带
autoplay muted loop，muted是硬性前提，哪怕你本意是静音 - iOS Safari 强制全屏？加
playsinline属性，否则视频弹出原生播放器遮挡页面 - 监听
canplaythrough事件，不是loadeddata——后者只表示元数据加载完，缓冲不足仍会卡顿中断 - 调
video.play()必须捕获 Promise 拒绝：video.play().catch(e => console.warn("Autoplay prevented:", e)) - 别用
z-index: -999把视频压底——iOS Safari 可能因此静音或暂停，z-index: -1足够
真正难的不是让视频“显示出来”，而是裁切是否合理、首帧是否及时、低端机是否卡顿、Safari 是否突然静音——这些都和 Bootstrap 类无关，得靠视频编码、属性组合和降级逻辑兜底。
