1

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?

2

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

  • Thanks. I guess I was hoping for something a bit more straight forward, as the videos I will be embedding are going to be of various resolutions. – Unhappy Blogger Sep 14 '16 at 7:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.