正确将Youtube视频嵌入bootstrap 3.0页面

Question

我需要将YouTube视频嵌入到我的响应式网站中,但它无法正确扩展,尤其是在移动设备上.它在桌面和平板电脑上看起来很好,但是一旦你的视口宽度低于600,视频就会破坏它的容器.要在移动设备上查看整个视频,您需要捏一点,其余内容只能垂直填充大约1/2的屏幕.不太好.

我希望文本内容为1/3宽,视频在桌面和平板电脑上为2/3宽,并在移动设备上堆叠,视频和内容均为视口宽度的100%.我已经尝试在iframe上使用width ="100%",但是当您调整大小并且视频被拉伸或压缩时,高度无法正确缩放.

我还需要使用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>

Answer 1

有一个Bootstrap3本机解决方案:http: //getbootstrap.com/components/#responsive-embed

自Bootstrap 3.2.0起!

如果您正在使用Bootstrap <v3.2.0,请查看v3.2.0的"responsive-embed.less"文件 - 可能您可以在您的情况下使用/复制此代码(它适用于v3.1.1).

Answer 2

我知道它已经很晚了,我对旧的自定义主题有同样的问题,只是添加到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>

Answer 3

想一想将视频包装在可以通过bootsrap灵活变通的内容中.

引导程序不是一个神奇的工具,它只是一个布局引擎.你的例子中几乎有它.

只需使用bootstrap提供的网格,并删除iframe上的严格大小.使用网格的bootstrap类指南..

例如:

<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">

根据您的分辨率,您将看到iframe的类将如何更改.

Fiddel也是:http://jsfiddle.net/RsSAT/

Answer 4

它还取决于您如何使用引导程序为站点设置样式.在我的示例中,我使用col-md-12作为我的视频div,并为iframe添加类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>

Answer 5

好吧，它有一个简单易用的解决方案。您可以轻松制作视频以适合任何设备和屏幕尺寸。这是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>

资料来源：https : //www.codespeedy.com/make-youtube-embed-video-sensitive-using-css/