Properly embedding Youtube video into bootstrap 3.0 page
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.
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.
I also need to do it with CSS only as i'm simply laying my stylesheets over stock bootstrap 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>
There is a Bootstrap3 native solution: http://getbootstrap.com/components/#responsive-embed
since 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).
I know it's late, I have the same issue with an old custom theme, just added to 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>
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:
<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>
上一篇: 更改字体大小以适应可变宽度的容器