html - 在 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>