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 editing the post as smooth 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:
- 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
- Use an asset optimization 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 round-trips 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:
- It’s very lightweight.
- It uses YouTube API, which allows it to request for thumbnail, title and description.
- It generates structured video metadata using Microdata format for search engine optimization. Google might use this data to enhance the results in SERPs.
- It has the option to cache thumbnails locally in order to avoid unnecessary network round-trips.
- It is heavily optimized for speed.
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 I mentioned above.
PS: Now that you are aware of these solutions, just try them out and share your experience in a comment!
Your code seems to create a big white space below Twitter embeds. Any way to stop that?
Hey Mark,
This is because my code does not work with the Twitter embeds. Twitter is another beast. My code works only with video embeds from the majority of video sharing sites, such as Youtube and Vimeo. In addition, WordPress automatically converts Youtube URLs into corresponding embed codes.
As you can see in the code, the embeds must be based on one of these HTML elements: IFRAME, OBJECT, EMBED or VIDEO, which are nearly impossible to manipulate with stylesheets otherwise. The PHP part just surrounds the embed code with a DIV so that we could apply a style to it.
I included a video in the post so that you can see better the final result.
good technique for responsive videos. thanks for your suggesion
Thank you very much for sharing very good idea. I will use this plugin for my own website because I really need this plugin for video uploading purposes.
Thank you! This was very easy and worked great.
Thank you a lot. I can just add the CSS code in the Custom CSS. No need to modify in the theme CSS.
Yes, the custom CSS option is the least intrusive (and safe) way to include your CSS code.
But how about the additional HTML code? As I mentioned in the article, I’m using a tiny custom plugin to automatically nest the embed code inside the required div elements. What was your solution?
By the way, I’m not quite a table tennis guy, but I like your website. Well done! 🙂
The non-plugin solution worked 100% for me up to Gutenberg, for some reason, it just won’t work with Gutenberg enabled so it’s not adding the DIVs. Do you perhaps have a workaround so that it will work with Gutenberg?
Thanks for commenting! Unfortunately I haven’t used Gutemberg so far. I’m still faithful to the good ol’ TinyMCE editor and I’m pretty happy with it…
Basically, with Gutemberg it should be possible to be able to include a piece of content containing HTML tags besides just formatted text, but as I said, I haven’t used it at all.
Thanks for providing this code. Worked perfectly.
Thanks for providing this code.
Wow, Great information thanks again.
I usually don’t comment but this saved me a lot of time , Thanks.
Glad to hear it!
Oops actually I just activated ‘Social Sharing Buttons” in theme and YouTube video went blank ‘just white space’ do you know what the problem might be?
left the link in my name if you would like to help, I will really appreciate.
Thanks
Hi Bliss, it looks perfect to me! ? Unless you’ve solved the problem somehow…
By the way, nice work!
Great article, saved me some time with video embeds from YouTube! Thank Bro!