在 Bootstrap 中嵌入视频占用了整个屏幕的宽度？

Posted 2023-03-05

【中文标题】在 Bootstrap 中嵌入视频占用了整个屏幕的宽度？

【英文标题】：Embed video in Bootstrap take up the whole width of the screen?

【发布时间】：2018-06-15 16:29:16

【问题描述】：

我正在尝试使用引导程序将 Youtube 视频嵌入网页，但我希望它占据网页的整个宽度。

<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>

.youtube width:100%;

JS Fiddle 是 here。

但我有两个问题：

网页大时视频预览被高度截断（只能看到一半的视频预览）。

当视频播放时，它仍然是小格式。

如何使用 Bootstrap 解决此问题？

【问题讨论】：

如果能从提问者那里得到答案或标记为正确的答案会很好。

【参考方案1】：

在 Bootstrap v3 中，此构造将执行全宽 iframe：

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/H_CN8W_uCys?wmode=transparent&amp;rel=0&amp;showinfo=0" allowfullscreen=""></iframe>
</div>

【参考方案2】：

我知道这看起来很愚蠢，但我受到 Bootstrap 官方网页上检查代码的启发：

.embed-responsive
  position: relative;
  padding-top: 56.25%;

.youtube
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  

56.25% - 这是比例问题，你知道，16:9 等；）

【参考方案3】：

这实际上可以通过对纵横比的理解使用纯 CSS 来解决。代码很简单，只需将 .youtube 选择器替换为以下代码：

.embed-responsive 
  position: relative;
  width:100%;
  height: 0;
  padding-top: 56.25%;


.youtube
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

这会将 YouTube iframe 的父级设置为流畅地具有 100% 的宽度，宽高比为 16/9，通过使用 0 高度和 56.25% 的填充顶部。然后你只需要让 iframe 填充那个父级，这是通过绝对定位和 100% 的高度和宽度来实现的。

【参考方案4】：

您需要添加类 container-fluid 而不是 container。

试试这个代码：

<section id="about" class="home-section text-center">
    <div class="container-fluid">
        <div class="row">
            <div class="embed-responsive embed-responsive-1by1">
                <iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0">
                </iframe>
            </div>
        </div>
    </div>
</section>