将 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

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

我也使用 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 3

我知道已经很晚了，我对旧的自定义主题也有同样的问题，刚刚添加到 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 4

有一个Bootstrap3原生解决方案： http://getbootstrap.com/components/#responsive-embed

自 Bootstrap 3.2.0 起！

如果您使用的是 Bootstrap

Answer 5

这还取决于您如何使用引导程序设计您的网站。 在我的示例中，我将 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 6

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

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

Answer 7

考虑将视频包装在可以通过 bootsrap 灵活设置的东西中。

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

只需使用引导程序提供的网格并删除 iframe 上的严格尺寸。使用网格的引导类指南..

例如：

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

根据您的分辨率，您将看到 iframe 的类将如何变化。

也是一个菲德尔：http://jsfiddle.net/RsSAT/