必须用 .embed-responsive 作为父容器包裹 并添加 .embed-responsive-item 类，因其依赖父容器 padding-top 百分比（如 16:9 对应 56.25%）撑高，再通过绝对定位使子元素填满；若直接加在 上则失效。
直接用 .embed-responsive 容器 + .embed-responsive-item 就能实现，但必须严格遵循结构和类名组合，漏掉任意一环都会导致比例失效或视频错位。
为什么 .embed-responsive 必须套在 <iframe></iframe> 外层？
Bootstrap 4 的响应式逻辑靠父容器的 padding-top 百分比（比如 .embed-responsive-16by9 对应 padding-top: 56.25%）撑出高度，再让子元素 .embed-responsive-item 绝对定位填满。如果把类加到 <iframe></iframe> 自身，它既不是块级容器，也不支持用 padding-top 控制宽高比——结果就是 iframe 按自身 width/height 属性硬渲染，小屏必然溢出或留白。
- 错误写法：
<iframe class="embed-responsive embed-responsive-16by9"></iframe> - 正确结构：外层
<div class="embed-responsive embed-responsive-16by9"> → 里面嵌 <code><iframe class="embed-responsive-item"></iframe> - 务必删掉 iframe 原生的
width和height属性（YouTube/Vimeo 默认带的那两个），否则会覆盖 CSS 定位 - YouTube、Vimeo、Bilibili 默认嵌入链接 → 用
.embed-responsive-16by9 - 老课件、监控流、部分内部培训视频 → 用
.embed-responsive-4by3 - 竖屏短视频（如 TikTok 录屏）→ Bootstrap 4 不支持自定义比例，只能手动写 CSS 或升级到 BS5（用
.ratio+--bs-aspect-ratio） - 必须加
class="embed-responsive-item"，否则无法继承绝对定位和尺寸控制 - 需手动加
style="object-fit: cover"（BS4 没有object-fit-工具类） - 建议补
style="object-position: center"，避免人脸被裁掉 - 若视频源跨域，确认服务器返回了
Access-Control-Allow-Origin: *，否则 Safari 可能静音或拒绝播放
.embed-responsive-16by9 和 .embed-responsive-4by3 怎么选？
选哪个不看设备尺寸，只看视频源本身的宽高比。错配会直接导致黑边、裁剪或拉伸变形。
用 <video></video> 标签时额外要注意什么？
Bootstrap 4 的 .embed-responsive 机制对 <video></video> 同样有效，但默认不处理内容填充方式，容易上下/左右留黑边或拉伸。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是 iframe 的原生宽高属性和 object-fit 的缺失——这两点在开发时看不出问题，一上真机或切到小屏就立刻暴露。别依赖“看起来差不多”，要按源视频比例严格匹配容器类，并手动清理 HTML 属性。
