Two Ways to Make YouTube Videos Responsive in WordPress

Anyone who keeps a blog knows that to make their posts more appealing they should spice them with images, or even better, with videos. But here’s the problem: WordPress does not make the videos responsive by default – unless you are lucky enough to have a theme with built-in support for that.

But how about you? Are you struggling to make your YouTube videos responsive in WordPress? Here you can find two solutions.

No embed code is needed nowadays

With modern versions of WordPress, if you want to insert a YouTube video in your post, you only need to paste the video URL on a line by itself and WordPress will take care of the rest. No embed code is needed.

But still, the video is not responsive

Adding width: 100% and height: auto in your CSS doesn’t help usually. Many solutions involve surrounding the YouTube code with div elements, but who wants to mess with extra HTML code in posts? I don’t! I’m lazy and I like to make post editing as smoothly as possible.

The First Solution – No Plugin

This solution of making YouTube videos responsive in WordPress is implemented by adding some code snippets in your theme’s files. A better solution would be to create a child theme first and make all your customizations there. This way, you won’t lose them when you update your parent theme.

And here are the code snippets:

1. Include a filter in your theme’s functions.php file:

add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);

function wrap_embed_with_div($html, $url, $attr) {
	return "<div class=\"responsive-container\">".$html."</div>";
}

This will surround the embed code with a <div class="responsive-container"> element.

2. Add some CSS code in your theme’s style.css file:

.responsive-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

You can tweak the aspect ratio to match the videos by changing padding-bottom value of the container element. How do we find that value? It’s easy with a little bit of math. 9 divided by 16 is equal to 0.5625, which we can translate to 56.25%. And that holds true for all aspect ratios: 4:3 is 3 divided by 4 which equals 0.75, or 75%. 2.39:1 is 1 divided by 2.39 which equals 0.4184, or 41.84%. So simple!

Before implementing it, make sure you really need this. Many themes may already be using this solution.

Here is an example:

The only problem is that you are stuck with one aspect ratio for all the videos in your blog. You could solve this by adding also some Javascript code. But then you also need some PHP code to enqueue the JS file and this could turn into a full-fledged plugin already.

But why create a new plugin if it already exists? And so we get to the second solution.

The Second Solution – Using a Plugin

I tried quite a few plugins to make the videos responsive, but most of them were either premium or too heavyweight. And so I ‘ve come to the conclusion that I need to develop my own plugin – which wasn’t that difficult considering all those ideas from the first solution. But eventually, I stumbled upon this one:

Fluid Video Embeds – by jamie3d

Of course, developing my own plugin was no longer needed. Just go to Add New Plugin admin page of your blog and search in the public repository. Then install and activate it the usual way. It is very lightweight and it simply works!

It automatically detects the aspect ratio of the embedded videos and is compatible with YouTube and Vimeo. What else would you ever need anyway?

In the plugin’s settings page, you can tweak it and adjust to your own needs. You can even disable the default CSS and add your own in the theme’s stylesheet.

There are many other plugins out there, but I think this one is doing its job just fine. Anyway, I’m currently using it without any issues. Check this post.

Make it even better

I must warn you about a possible optimization issue, though. With the default settings, the related CSS code is dynamically generated through a call to the AJAX controller (wp-admin/admin-ajax.php). To overcome a possible load speed degradation you have two options:

1. In the plugin’s settings page disable the default CSS and manually include it in your theme’s stylesheet – a link to the CSS content is conveniently provided in the plugin’s settings page; or
2. Use an asset optimisation plugin, which will also optimize the assets for your entire website, as a bonus.

I’ve chosen the second option, and as an asset optimization plugin I’m using Autoptimize. It minifies, concatenates and compresses all of your CSS and JS content and stores the result in just a couple static files for optimum performance, including the CSS code generated by “Fluid Video Embeds” plugin. It also minifies and compresses the HTML output, but without caching it.

This way, the number of network roundtrips and the volume of transmitted data are drastically reduced and so does the page load speed. It is simply amazing!

[Edit May 2018] The Third Solution – Yet Another Plugin

Ok, I couldn’t help myself! I just found out about another excellent plugin: Youtube Embed by EmbedPlus Team. This one is absolutely amazing! I cannot imagine a Youtube parameter that isn’t covered by this wonderful plugin, which is also free and GDPR compliant, by the way! Just check it out and share your opinion.

PS: Now that you are aware of these solutions, just try them out and share your experience in a comment!