Bootstrap 4响应式视频嵌入必须用.embed-responsive容器加.embed-responsive-item子元素组合，因需靠padding-top撑高并绝对定位填满，删iframe宽高属性、确保子元素position: absolute且四边为0、选对宽高比类（如16by9）才能生效。
Bootstrap 4 中必须用 .embed-responsive 容器 + .embed-responsive-item 子元素组合，才能真正实现响应式视频嵌入；单独给 <iframe> 加 w-100 或删掉宽高属性都不够。
为什么直接写 <iframe width="560" height="315"> 会失效
浏览器按内联 width 和 height 属性硬渲染，完全脱离父容器比例控制。哪怕你加了 max-width: 100%，它仍会撑出固定像素高度，小屏下横向溢出或上下留白不均。
- 必须手动删掉
iframe标签上的width和height属性（包括引号里的数字） - Bootstrap 4 的
.embed-responsive不识别标签类型，只靠父容器的padding-top（如56.25%对应 16:9）撑高，再靠子元素绝对定位填满 - 如果用了自定义 CSS 覆盖了
.embed-responsive-item的position: absolute或四边为0，也会立即失效
.embed-responsive-16by9 和 .embed-responsive-4by3 怎么选
选哪个取决于视频源本身的宽高比，不是“看着舒服就选”。错配会导致黑边、裁剪或挤压。
- YouTube、Vimeo、Bilibili 默认嵌入链接 → 用
.embed-responsive-16by9 - 老课件、监控流、部分内部培训视频 → 用
.embed-responsive-4by3 - 竖屏短视频（如 TikTok 风格）→ Bootstrap 4 不原生支持，需手写
padding-top: 177.78%（即 9/16 × 100%）并配合自定义类
常见错误：加了类但视频只显示左上角一小块
这是最常卡住的地方，本质是子元素没正确脱离文档流或被覆盖。
立即学习“前端免费学习笔记（深入）”；
-
<iframe>必须加.embed-responsive-item类，不能只加w-100 h-100 - 确保父容器是块级元素，且没有
overflow: hidden或transform干扰定位上下文 - 检查开发者工具：确认
<iframe>计算出的position是absolute，且top/left/right/bottom均为0；父容器是否有正确的padding-top值（如56.25%）
第三方 iframe（如 YouTube）还要注意这些细节
光套容器还不够，第三方服务有额外行为约束。
-
src必须含?rel=0&showinfo=0（YouTube），否则横幅遮挡卡片内容或触发自动跳转 - 若嵌在
.card里，别用.card-img-top塞<iframe>——它只为静态图设计，会丢失控制条、无法点击播放 - 移动端 Safari 进入全屏后，
.embed-responsive容器高度可能归零；若卡片由 JS 动态加载（如 Tab 切换、Modal 弹出），初始display: none会导致padding-top计算失败，塌陷成一条线
真正起作用的是容器的 padding-top + 子元素绝对定位这套组合逻辑，不是某个 class 名字本身。一旦结构或属性写错一点，整个比例就崩了——这点比 Bootstrap 5 的 .ratio 更难调试，因为所有效果都藏在伪元素和定位里。
