正确地将Youtubevideoembedded到bootstrap 3.0页面
我需要将YouTubevideoembedded到自己的自适应网站，但不能正确缩放，特别是在移动设备上。 在桌面设备和平板电脑上看起来不错，但是一旦您的视口宽度低于600，video就会打破它的容器。 要在手机上观看整个video，您需要指出其他内容仅垂直填充1/2屏幕。 不太好。
我希望桌面和平板电脑上的文本内容为1/3宽，video宽度为2/3，并将video和内容都video和video宽度均为100％。 我已经尝试在iframe上使用width =“100％”，但随着resize和video被拉伸或挤压，高度不能正确缩放。
我也需要使用CSS来完成，因为我只是在stock 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> 有一个Bootstrap3原生解决scheme： 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%; }
对于video：
<div class="embed-responsive embed-responsive-16by9" > <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe> </div>
这也取决于你如何用自举来devise你的网站。 在我的例子中，我为我的videodiv使用col-md-12，并为iframe添加类col-sm-12，所以当调整到较小的屏幕时，video不会被挤压。 我也joiniframe的高度：
<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>
想一想，把video包装在一些你可以通过靴子变得灵活的东西里面。
bootstrap不是一个神奇的工具，它只是一个布局引擎。 你几乎在你的例子中。
只需使用bootstrap提供的网格，并删除iframe上的严格大小。 使用网格的引导类指南..
例如：
<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
你会看到iframe的类将如何改变，然后给你的决议。
Fiddel也是： http : //jsfiddle.net/RsSAT/
我使用bootstrap 3.x以及下面的代码响应youtubevideoembedded作品像魅力对我来说：
.videoWrapperOuter { max-width:640px; margin-left:auto; margin-right:auto; } .videoWrapperInner { float: none; clear: both; width: 100%; position: relative; padding-bottom: 50%; padding-top: 25px; height: 0; } .videoWrapperInner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } <div class="videoWrapperOuter"> <div class="videoWrapperInner"> <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" frameborder="0" allowfullscreen></iframe> </div> </div>
我在另一个主题上给出了一个类似的答案（ 将YouTubevideo缩小为响应宽度 ），但我想我的答案也可以在这里帮助。
这对我来说很好…
.delimitador{ width:100%; margin:auto; } .contenedor{ height:0px; width:100%; /*max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */ padding-top:56.25%; /* Relación: 16/9 = 56.25% */ position:relative; } iframe{ position:absolute; height:100%; width:100%; top:0px; left:0px; }
接着
<div class="delimitador"> <div class="contenedor"> // youtube code </div> </div>
那么它有一个简单而简单的解决scheme。 您可以轻松制作video，以适应任何设备和屏幕大小。 这是HTML和CSS代码：
.yt-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .yt-container iframe, .yt-container object, .yt-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
<div class="yt-container"> <iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe> </div>
