引导响应式嵌入视频占据整个屏幕的宽度和高度

Question

我一直在试图将视频嵌入到Bootstrap网站中。

但是当我这样做时，它占据了整个屏幕的宽度和高度。我希望在桌面上它的尺寸为560px x 315px，并且在桌面尺寸小于560px时也能自适应调整大小。

我已经使用了：

<div class="container-fluid">
    <div class="embed-responsive embed-responsive-16by9 div_style">
        <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

当我尝试通过添加类中的max-width: 560px;和max-height:315px;来自定义

标签时，它会将视频的宽度更改为560px，但高度会占据整个页面的高度。

- Rahul R. Rathi

---

尝试添加 !important，max-width: 560px !important; max-height: 315px !important。希望能有所帮助。 - user3187075

你能否分享整个HTML文件，包括大段的代码？也许问题出在其他部分。 - Junaid

Answer 1

您忘记添加col-xs-12 col-sm-6 col-md-4 col-lg-2，可以像这样添加。

<div class="container-fluid">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 padding-zero embed-responsive embed-responsive-16by9">
        <div id="foxnews">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KFGbHBbXG_g?modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;rel=0" allowfullscreen="true"></iframe>
        </div>
    </div>
</div>

- Junaid

Answer 2

Bootstrap的embed-responsive类使用padding-bottom来设置元素的“高度”。

您可以在媒体查询中更改此属性以及width，以达到所需的效果。

@media all and ( min-width: 560px ) {
    .div_style { 
        width:560px;
        padding-bottom:315px !important;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="embed-responsive embed-responsive-16by9 div_style">
    <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

- Marcelo

---

这应该适用于OP的特定情况，但如果视频被放置在小于560像素宽的列中，会引起问题。 - nHaskins

Answer 3

<div className="overlay"></div>

  <div className='container-fluid vids col-md'>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 padding-zero embed-responsive embed-responsive-16by9">
  <video  playsInline="playsinline" autoPlay="autoplay" muted="muted" loop="loop">
    <source src="videos/design.mp4" type="video/mp4"/>
  </video>
  </div>

- user16213526