怎样在Bootstrap4中用CSS实现自适应比例的响应式视频？-css教程-PHP中文网

必须用 .embed-responsive 作为父容器包裹并添加 .embed-responsive-item 类，因其依赖父容器 padding-top 百分比（如 16:9 对应 56.25%）撑高，再通过绝对定位使子元素填满；若直接加在上则失效。

怎样在bootstrap4中用css实现自适应比例的响应式视频？

直接用 .embed-responsive 容器 + .embed-responsive-item 就能实现，但必须严格遵循结构和类名组合，漏掉任意一环都会导致比例失效或视频错位。

为什么 `.embed-responsive` 必须套在外层？

Bootstrap 4 的响应式逻辑靠父容器的 padding-top 百分比（比如 .embed-responsive-16by9 对应 padding-top: 56.25%）撑出高度，再让子元素 .embed-responsive-item 绝对定位填满。如果把类加到自身，它既不是块级容器，也不支持用 padding-top 控制宽高比——结果就是 iframe 按自身 width/height 属性硬渲染，小屏必然溢出或留白。

错误写法：
正确结构：外层 → 里面嵌
务必删掉 iframe 原生的 width 和 height 属性（YouTube/Vimeo 默认带的那两个），否则会覆盖 CSS 定位



.embed-responsive-16by9 和 .embed-responsive-4by3 怎么选？
选哪个不看设备尺寸，只看视频源本身的宽高比。错配会直接导致黑边、裁剪或拉伸变形。

											
												
												
													CSS
													CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
												
												下载
												
											
										

YouTube、Vimeo、Bilibili 默认嵌入链接 → 用 .embed-responsive-16by9

老课件、监控流、部分内部培训视频 → 用 .embed-responsive-4by3

竖屏短视频（如 TikTok 录屏）→ Bootstrap 4 不支持自定义比例，只能手动写 CSS 或升级到 BS5（用 .ratio + --bs-aspect-ratio）

用  标签时额外要注意什么？
Bootstrap 4 的 .embed-responsive 机制对  同样有效，但默认不处理内容填充方式，容易上下/左右留黑边或拉伸。

必须加 class="embed-responsive-item"，否则无法继承绝对定位和尺寸控制
需手动加 style="object-fit: cover"（BS4 没有 object-fit- 工具类）
建议补 style="object-position: center"，避免人脸被裁掉
若视频源跨域，确认服务器返回了 Access-Control-Allow-Origin: *，否则 Safari 可能静音或拒绝播放

最易被忽略的是 iframe 的原生宽高属性和 object-fit 的缺失——这两点在开发时看不出问题，一上真机或切到小屏就立刻暴露。别依赖“看起来差不多”，要按源视频比例严格匹配容器类，并手动清理 HTML 属性。