Bootstrap 中的嵌入视频会占据整个屏幕宽度吗？

Question

我正在尝试使用 Bootstrap 将 Youtube 视频嵌入到网页中，但我希望它占据页面的整个宽度。

HTML：

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

CSS：

.youtube {
  width:100%;
}

JSFiddle

但我有两个问题：

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

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

如何使用 Bootstrap 修复此问题？

Answer 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>

Answer 2

实际上，通过理解长宽比，可以使用纯 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%;
}

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