CSS 将 Youtube 视频正确嵌入 bootstrap 3.0 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20888375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Properly embedding Youtube video into bootstrap 3.0 page
提问by TheHooligan
I need to embed a YouTube video into my responsive site but it's not scaling correctly, especially on mobile. It looks fine on desktop and tablets but once you get below a viewport width of 600, the video breaks its container. To view the whole video on mobile you need to pinch out to a point that the rest of the content only fills about 1/2 the screen vertically. Not so good.
我需要将 YouTube 视频嵌入到我的响应式网站中，但无法正确缩放，尤其是在移动设备上。它在台式机和平板电脑上看起来不错，但是一旦您的视口宽度低于 600，视频就会破坏其容器。要在移动设备上查看整个视频，您需要捏合到剩余内容仅垂直填充屏幕约 1/2 的程度。不太好。
I want the text content to be 1/3 wide and the video to be 2/3 wide on desktop and tablets and stacked on mobile with the video and content both 100% of the viewport width. I've tried using width="100%" on the iframe but then the height doesn't scale correctly as you resize and the video either gets stretched or squished.
我希望桌面和平板电脑上的文本内容为 1/3 宽，视频为 2/3 宽，并在移动设备上堆叠，视频和内容均为视口宽度的 100%。我试过在 iframe 上使用 width="100%" ，但是当您调整大小并且视频被拉伸或压扁时，高度无法正确缩放。
I also need to do it with CSS only as i'm simply laying my stylesheets over stock bootstrap 3.0.
我还只需要使用 CSS 来完成，因为我只是将样式表放在股票引导程序 3.0 上。
Here's my code:
这是我的代码：
<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>
回答by Dado
There is a Bootstrap3 native solution: http://getbootstrap.com/components/#responsive-embed
有一个 Bootstrap3 原生解决方案：http: //getbootstrap.com/components/#responsive-embed
since Bootstrap 3.2.0!
自 Bootstrap 3.2.0 以来！
If you are using Bootstrap < v3.2.0 so look into "responsive-embed.less" file of v3.2.0 - possibly you can use/copy this code in your case (it works for me in v3.1.1).
如果您使用的是 Bootstrap < v3.2.0，那么请查看 v3.2.0 的“responsive-embed.less”文件 - 您可能可以在您的情况下使用/复制此代码（它在 v3.1.1 中对我有用）。
回答by Grégor González
I know it's late, I have the same issue with an old custom theme, just added to boostrap.css:
我知道已经晚了，我对一个旧的自定义主题有同样的问题，刚刚添加到 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%;
}
And for the video:
对于视频：
<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>
回答by Pogrindis
Have a think about wrapping the videos inside something which you can make flexible via bootsrap.
考虑将视频包装在可以通过 bootsrap 变得灵活的东西中。
The bootstrap is not a magic tool, its just a layout engine. You almost have it in your example.
bootstrap 不是一个神奇的工具，它只是一个布局引擎。你几乎在你的例子中就有了。
Just use the grid provided by bootstrap and remove strict sizing's on the iframe. Use the bootstrap class guides for the grid..
只需使用 bootstrap 提供的网格并删除 iframe 上的严格尺寸。使用网格的引导类指南..
For example:
例如：
<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
You will see how the class of the iframe will change then given your resolution.
您将看到 iframe 的类将如何更改，然后给定您的分辨率。
A Fiddel too : http://jsfiddle.net/RsSAT/
Fiddel 也是：http: //jsfiddle.net/RsSAT/
回答by keenlio.com
It also depend on how you style your site with bootstrap. In my example, I am using col-md-12 for my video div, and add class col-sm-12 for the iframe, so when resize to smaller screen, the video will not view squeezed. I add also height to the iframe:
它还取决于您如何使用引导程序设计您的网站。在我的示例中，我将 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>
回答by Faruque Ahamed Mollick
Well it has a simple and easy solution. You can make your video easily to fit for any device and screen size. Here is the HTML and CSS code:
那么它有一个简单易行的解决方案。您可以轻松制作视频以适合任何设备和屏幕尺寸。这是 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>Source: https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/
来源：https: //www.codespeedy.com/make-youtube-embed-video-responsive-using-css/
回答by Pascal Klein
I use bootstrap 3.x as well and the following code fore responsive youtube video embedding works like charm for me:
我也使用 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>
I gave a similiar answer on another thread (Shrink a YouTube video to responsive width), but I guess my answers can help here as well.
我在另一个线程上给出了类似的答案（将 YouTube 视频缩小到响应宽度），但我想我的答案在这里也有帮助。
回答by Esteban
This works fine for me...
这对我来说很好用...
.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;
}
and then
进而
<div class="delimitador">
<div class="contenedor">
// youtube code
</div>
</div>
