How can I make YouTube videos responsive?

Ask a question about small business. We'll answer by email & post our answers here to help others.
Forums: 

I have spent a lot of time and effort upgrading my website to make sure it is responsive for mobile devices. The problem is that I often need to embed other bits of media, in particular YouTube videos and these are fixed width.

Initially, I customized the embed code snippet to make the video default size small enough to fit on the smartphone width screen, but this looks ridiculous on a full sized page. By the same token, leaving a full sized video embedded on a responsive page breaks the layout because the video doesn't resize with the page.

In fact, Google Search Console began notifying me that many of my pages weren't mobile friendly in their Mobile Usability section. When I investigated I found that all the pages Google didn't like were ones that had YouTube videos embedded. They broke the smartphone layout so Google ended up reporting that the content was not properly sized to the viewport.

How can YouTube not provide responsive embed snippets? It's ridiculous. They're one of the biggest sites in the world. Surely they recognize the need for responsive layouts?

I know this is a long-shot because I don't expect you to be able to alter their IFRAME embed code, but is there any other way to make these videos responsive?

Quick & easy responsive YouTube clips with CSS

I understand your frustration. When we upgraded this site to responsive design, many of our pages were broken from HTML tables and embedded YouTube clips. Fortunately, making YouTube videos responsive is actually very quick and easy.

You can take a look at how it works in real life on our small business ideas page, which contains lots of videos that all resize perfectly as the browser dimensions change.

The secret is to wrap the embed code within a DIV tag and give it a few attributes via a CSS class. So, instead of simply embedding a clip with code like this:

<iframe width="640" height="480" src="https://www.youtube.com/embed/-e8HIsGEACQ" frameborder="0" allowfullscreen></iframe>

Enclose it in a DIV tag , like this:

<div class="video-container">
<iframe width="640" height="480" src="https://www.youtube.com/embed/-e8HIsGEACQ" frameborder="0" allowfullscreen></iframe>
</div>

Then, in your CSS file, give the .video-container class the following properties and values:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

Once you have saved the CSS file, you'll need to go back to all your embedded clips and enclose them in the video container DIV. But the results are pretty spectacular. Here are some screenshots of our ideas database page in different layouts using this technique:

Full screen, 3 column layout

YouTube clip sized for full screen
Full screen view showing embedded clip at approx 423px width

Tablet size, 2 column layout

YouTube clip sized for tablet
Tablet view showing clip at approx 578px width (one column less than full screen view so there is more space for the video)

Smartphone size, single column layout

YouTube clip sized for smartphone
Smartphone view showing clip at approx 369px width

Incidentally, it's also worth noting that this particular page is built using HTML tables, but these were also redesigned using CSS to make them responsive. More about how we did that at How to convert old HTML tables into responsive Web design.

Found This Useful?

Share it on your own site using this quick link (and tell us about it in the comments so we can read your article too).