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＆lt; 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

我也使用bootstrap 3.x，以下代码响应youtube视频嵌入对我来说就像魅力一样：

.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>

我在另一个帖子（Shrink a YouTube video to responsive width）上给出了类似的答案，但我想我的答案也可以在这里提供帮助。

Answer 6

它有一个简单易用的解决方案。您可以轻松地使视频适合任何设备和屏幕尺寸。这是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-responsive-using-css/

Answer 7

这对我来说很好......

   .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>

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

7 个答案: