正确地将Youtube视频嵌入bootstrap 3.0页面
我需要将一个YouTube视频嵌入到我的响应式站点中，但它不能正确缩放，特别是在移动设备上。它在台式机和平板电脑上看起来很好，但是一旦你的视窗宽度低于600，视频就会打破它的容器。要在移动设备上观看整个视频，你需要缩小到一个点，即剩下的内容只占垂直屏幕的1/2。不怎么好。
我希望文本内容是1/3宽，视频是2/3宽在台式机和平板电脑和堆叠在移动与视频和内容都100%的视窗宽度。我试过在iframe上使用width="100%“，但当你调整大小时，高度不能正确缩放，视频要么被拉伸，要么被挤压。
我也只需要用CSS来做这件事，因为我只是把我的样式表放在了bootstrap 3.0上。
下面是我的代码：
<div class="container">
<div class="row">
<div class="col-sm-4">Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it's just blankish content provided so that it fills up some space, pretty boring huh?</div>
<div class="col-sm-8">
<iframe width="600" height="338" src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
</div>
</div>回答 7
Stack Overflow用户
发布于 2014-07-29 19:26:08
有一个Bootstrap3原生解决方案：http://getbootstrap.com/components/#responsive-embed
从Bootstrap 3.2.0开始！
如果您使用的是Bootstrap < v3.2.0，那么请查看v3.2.0的“responsive embed.less”文件--您可以在您的情况下使用/复制此代码(它在v3.1.1中适用于我)。
Stack Overflow用户
发布于 2015-08-22 21:04:30
我知道已经很晚了，我也有一个旧的自定义主题的问题，刚刚添加到boostrap.css中：
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}对于视频：
<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>Stack Overflow用户
发布于 2014-01-03 01:41:44
考虑一下将视频包装在可以通过bootsrap灵活处理的内容中。
bootstrap不是一个神奇的工具，它只是一个布局引擎。在您的示例中，您几乎可以做到这一点。
只需使用bootstrap提供的网格，并删除iframe上的严格大小。使用网格的引导类指南..
例如：
<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">您将看到iframe的类将如何更改，然后根据您的解决方案。
也是Fiddel：http://jsfiddle.net/RsSAT/
https://stackoverflow.com/questions/20888375
复制相似问题