back to top

info(at)sypo.uk01539 741461

Embed a YouTube Video on a Responsive Website

Posted on 15th October, 2018

embed-a-youtube-video-on-a-responsive-website.png

By Mark Syred. Difficulty level: Medium

If you're building a responsive website and have videos on YouTube that you would like to include, you might hit on a bit of a problem: the YouTube embed code. Google are all about standards compliant design and encouraging designers to make their sites work on mobiles, but their own code for embedding YouTube videos is, by itself unresponsive AND not standards compliant. Left 'uncaged', it will only work on a static PC viewable site. But, this problem is not insurmountable.

This is the standard embed code for one of the videos that appears on our website:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ma0u-19cMEQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

It feels like I'm labouring a point, but include this as it is and the video will ALWAYS be 560 pixels wide and 315 pixels high. ALWAYS!!! This is not responsive. Really annoying when you've bothered to make the rest of your site responsive.

Anyway. Enough complaining. As I say, there is a fix. And this is it...

Below is the standard embed code that I have tended to use, and below that is the div class that it is always contained in, and below that is some css to make it responsive, and below THAT I put all the html together. Right then. Let's look at those one at a time.

The New, Improved YouTube Embed Code

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ma0u-19cMEQ?modestbranding=1&amp;rel=0&amp;fs=0" style="border:none"></iframe>

This does still define the size of the iframe but, with the CSS that will be included later this fact will be completely ignored. If you take out any reference to width and height, the video may still embed successfully, I don't know. But, as it is ignored, it doesn't hurt to leave it in.

modestbranding=1 removes the YouTube logo from the embedded video.

rel=0 doesn't allow any 'related' videos to be suggested once the video you've embedded has finished playing.

fs=0 keeps your viewers from making the video appear in fullscreen.

style="border:none" is the part that makes the embed code standards compliant, replacing frameborder="0".

The DIV Class

<div class="video">

</div>

What you call the DIV class that contains the embed code is not important: there just has to be one. It's the CSS that makes it work responsively.

The CSS to Make It Responsive

.video {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    margin: 7px 0;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The magic really happens with these few lines:

height: 0;
padding-bottom: 56.25%;

... which keeps the iframe in the aspect ratio 16:9 at all times, and ...

width: 100%;
height: 100%;

... which ensures the iframe will always fill its containing DIV.

All the HTML Together In One Place

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Ma0u-19cMEQ?modestbranding=1&amp;rel=0&amp;fs=0" style="border:none"></iframe>
</div>

To see a working, live example of this, why not visit our first WordPress Tutorial video? The video will always sit nicely on the screen, no matter what device you're using.

This website uses cookies to deliver the best experience whilst browsing. More info