: Auto Re-Size YouTube Embedded Video I'm building a website that I hope to feature heavily on embedded youtube videos, but the embed code only allows you to specify one width, which is a problem

@Annie201

You can try this:

Remove the height and width from the embed code and put it between a div class and add a class to the iframe just like this:

<div class="youtube">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>


Then you have to do this in the css:

//this goes to the embed container div class
.youtube {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}

//the class you give to the iframe
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


The .youtube class has a width of 100% and a padding-bottom of 56.25%. This percentage is the result of 9/16 (as we use a resolution of 16:9 on this video). You can adjust the padding-bottom percentage according to the resolution you want.

In this site you'll find more information about this, but this code should work

Vote Up Vote Down