Auto Re-Size YouTube Embedded Video

Question

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 when it comes to the whole mobile responsive aspect that we're all increasingly having to abide by.

So, is it possible to change a videos dimensions based solely on the width of the screen, or the CSS @Screen mode?

This isn't about a completely responsive width... I would ideally like to have the full video playing at say 400px, and the mobile showing at 300px.

What are the options?

Answer 1

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