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>

当我尝试通过添加div类div_style和max-width: 560px;来自定义max-height:315px;代码时，它会将视频宽度更改为560px，但高度会占据整个页面高度。

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>

Answer 2

bootstrap embed-responsive类使用padding-bottom来设置＆＃34; height＆＃34;元素。

您可以在媒体查询中将此属性与width一起更改，以获得所需的效果。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: