正确地将Youtube视频嵌入引导3.0页面
我需要将YouTube视频嵌入到自己的响应式网站，但不能正确缩放，尤其是在移动设备上。 在桌面设备和平板电脑上看起来不错，但一旦您的视口宽度低于600，视频就会打破它的容器。 要在手机上观看整个视频，您需要指出其他内容仅垂直填充1/2屏幕。 不太好。
我希望文字内容的宽度为1/3，视频在桌面和平板电脑上的宽度应为2/3，并且在视频和内容两者都是视口宽度的100％的情况下堆叠在移动设备上。 我已经尝试在iframe上使用width =“100％”，但随着调整大小和视频伸展或挤压，高度不能正确缩放。
我也需要使用CSS来完成，因为我只是将我的样式表放在股票引导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>
有一个Bootstrap3原生解决方案：http：//getbootstrap.com/components/#responsive-embed
自Bootstrap 3.2.0以来！
如果您正在使用Bootstrap <v3.2.0，请查看v3.2.0的“responsive-embed.less”文件 - 可能您可以在您的案例中使用/复制此代码（适用于v3.1.1）。
我知道它晚了，我有一个旧的自定义主题相同的问题，只是添加到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>
这也取决于你如何使用引导来设计你的网站。 在我的例子中，我为视频div使用了col-md-12，并为iframe添加了class col-sm-12，因此当调整到较小的屏幕时，视频不会被挤压。 我也加入iframe的高度：
<div class="col-md-12">
<iframe class="col-sm-12" height="333" frameborder="0" wmode="Opaque" allowfullscreen="" src="https://www.youtube.com/embed/oqDRPoPDehE?wmode=transparent">
</div>
上一篇: Properly embedding Youtube video into bootstrap 3.0 page