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, or in the Appearance->Customize Custom CSS section:

.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.

• 16:9 is 9 divided by 16 which equals to 0.5625, or 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 a similar 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 also adding 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 YouTube Videos Responsive in WordPress, 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.

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!

[Update May 2018] Yet Another Plugin -- Youtube Embed

I 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.

[Update Feb 2019] A Really Lightweight Plugin -- WP YouTube Lyte

And finally, my latest finding, WP YouTube Lyte by By Frank Goossens (futtta). The Youtube Embed (see above) is extremely feature rich indeed, but I eventually stopped at this little known plugin that helps making YouTube Videos Responsive in WordPress for a few reasons:

1. It’s very lightweight.
2. It uses YouTube API, which is used to contact YouTube to ask it for the thumbnail, the title and the description of the video.
3. It generates structured video metadata using Microdata format for search engine optimization reasons. Google might use this data to enhance the results in SERPs.
4. It has the option to cache thumbnails locally in order to avoid unnecessary requests to be sent to YouTube.
5. It is heavily optimized for access speed from the browsers.

Its settings page is not as feature-rich as the one from “Youtube Embed” plugin, not by a log shot, but this is one of the reasons it is so lightweight. Instead, for YouTube specific features you can add parameters to the YouTube URL itself. In addition, there are a whole lot of filters that can be used for certain customizations, provided that you are not afraid of coding.

This plugin is the one that is currently being used in this blog and it looks like it will stay for a long time, thanks to the benefits that I mentioned above.

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