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>
This question is related to
css
twitter-bootstrap
youtube
embed
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>
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>
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>
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).
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:
.yt-container {_x000D_
position:relative;_x000D_
padding-bottom:56.25%;_x000D_
padding-top:30px;_x000D_
height:0;_x000D_
overflow:hidden;_x000D_
}_x000D_
_x000D_
.yt-container iframe, .yt-container object, .yt-container embed {_x000D_
position:absolute;_x000D_
top:0;_x000D_
left:0;_x000D_
width:100%;_x000D_
height:100%;_x000D_
}
_x000D_
<div class="yt-container">_x000D_
<iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>_x000D_
</div>
_x000D_
Source: https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/
Have a think about wrapping the videos inside something which you can make flexible via bootsrap.
The bootstrap is not a magic tool, its just a layout engine. You almost have it in your example.
Just use the grid provided by bootstrap and remove strict sizing's on the iframe. Use the bootstrap class guides for the grid..
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.
A Fiddel too : http://jsfiddle.net/RsSAT/
I use bootstrap 3.x as well and the following code fore responsive youtube video embedding works like charm for me:
.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.
Source: Stackoverflow.com