twitter-bootstrap Bootstrap 响应式嵌入视频占据了整个屏幕的宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27977782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap responsive embed video takes up the whole width and height of the screen
提问by Rahul R. Rathi
I have been trying to embed a video into bootstrap website.
我一直在尝试将视频嵌入引导程序网站。
But when I do, it takes up the whole width and height of the screen. I want it to be 560px x 315px on desktops and it should be responsive when the desktop size goes below 560px.
但是当我这样做时，它占据了屏幕的整个宽度和高度。我希望它在桌面上为 560 像素 x 315 像素，并且当桌面大小低于 560 像素时它应该是响应式的。
I have used:
我用过了：
<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>
When I try to customize divtag by adding div_styleclass max-width: 560px;and max-height:315px;, It changes video width to 560px but the height takes up the whole page height.
当我尝试div通过添加div_styleclassmax-width: 560px;和自定义标签时max-height:315px;，它会将视频宽度更改为 560 像素，但高度占据了整个页面的高度。
回答by Junaid
You missed to add col-xs-12 col-sm-6 col-md-4 col-lg-2. Something like this.
你错过了添加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&autohide=1&showinfo=0&rel=0" allowfullscreen="true"></iframe>
</div>
</div>
</div>
回答by Marcelo
The bootstrap embed-responsiveclasses use padding-bottomto set the "height" of the element.
引导embed-responsive类用于padding-bottom设置元素的“高度”。
You can change this property along with widthwithin a media query for your desired effect.
您可以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>