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

【问题标题】：Bootstrap responsive embed video takes up the whole width and height of the screenBootstrap 响应式嵌入视频占据了屏幕的整个宽度和高度
【发布时间】：2015-03-14 16:38:16
【问题描述】：

我一直在尝试将视频嵌入引导网站。

但是当我这样做时，它会占据屏幕的整个宽度和高度。我希望它在桌面上为 560 像素 x 315 像素，并且当桌面尺寸低于 560 像素时它应该是响应式的。

我用过：

<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_style 类max-width: 560px; 和max-height:315px; 来自定义div 标签时，它会将视频宽度更改为560px，但高度会占据整个页面高度。

【问题讨论】：

尝试添加 !important, max-width: 560px !important;最大高度：315 像素！重要。希望对您有所帮助。
你能分享整个 html 文件，，，大块代码吗？也许其他部分有问题。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

【讨论】：

【解决方案2】：

引导程序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>

【讨论】：

这应该适用于 OP 的特定情况，但如果视频被放置在宽度小于 560 像素的范围内，则会导致问题。

【解决方案3】：

您错过了添加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>

【讨论】：