直接写 iframe 会撑破布局，因其按自身 width/height 属性渲染而脱离父容器比例控制；bootstrap 通过 padding-bottom 撑高宽比+绝对定位实现响应式，需删 iframe 的宽高属性并选用对应 ratio 类。
为什么直接写 iframe 会撑破布局
因为原生 iframe 按自身 width 和 height 属性渲染，脱离父容器比例控制。Bootstrap 的响应式逻辑不靠识别标签类型，而是靠「父容器用 padding-bottom 撑出固定宽高比 + 子元素绝对定位填满」来实现。一旦你把带 width="560" height="315" 的 YouTube 代码直接丢进普通 <div>，它就按像素硬占空间，小屏必然横向溢出或上下留白不均。<h3>
<code>.embed-responsive（BS4）和 .ratio（BS5）怎么选参数
不是看屏幕尺寸，而是看视频源本身的宽高比：
- YouTube、Vimeo 主流视频 → 用
.embed-responsive-16by9（BS4）或.ratio-16x9（BS5） - PPT 录屏、老课件 → 多为
.embed-responsive-4by3/.ratio-4x3 - 竖屏短视频（如 TikTok 风格）→ BS5 可自定义：
.ratio-9x16 { --bs-aspect-ratio: 177.78%; }（注意是height / width * 100%） - 别混用：BS5 里写
.embed-responsive类会失效，旧项目升级时最容易漏掉这个类名变更
子元素必须删掉 width 和 height 属性
这是最常踩的坑。官方嵌入代码自带固定尺寸，比如：
<iframe src="..." width="100%" height="315"></iframe>
必须手动删掉这两个属性，否则 CSS 绝对定位会被覆盖，导致只显示左上角一小块或右侧大片空白。正确写法是：
- BS4：
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="..."></iframe></div> - BS5：
<div class="ratio ratio-16x9"><iframe src="..." width="100%" height="100%"></iframe></div> - 如果用
<video></video>，还得额外加class="w-100 h-100 object-fit-cover"（BS5.3+ 才内置object-fit-工具类）
移动端全屏和 object-fit 的实际约束力
Bootstrap 的 .ratio 或 .embed-responsive 只管容器比例，不管内容怎么“塞进去”。没加 object-fit 时，<video></video> 会拉伸变形；加了 object-fit: cover 又可能裁掉关键画面（比如 iPhone 竖屏下人物头部被切）。更麻烦的是：
- iOS Safari 进入原生全屏后，
<video></video>脱离文档流，外层.ratio容器高度归零 - Tab 切换、Modal 动态加载时，若容器初始
display: none，padding-bottom计算会失效，导致塌陷成一条线 - 想让比例随断点变化（比如小屏用 4:3、大屏用 16:9），不能叠加多个
.ratio-类，得用媒体查询重设--bs-aspect-ratio变量
真正稳定的做法是：用容器撑比例 + position: absolute + object-fit + object-position 微调，而不是依赖单一类名。
