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

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;,它改变了视频宽度560像素,但身高占据了整个页面高度.

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>