• Home
  • My Products
  • Reviews
  • WordPress
  • Learning
  • Things to Avoid

Marketing With Vladimir

Welcome to my Internet marketing laboratory

You are here: Home / WordPress / Two Ways to Make YouTube Videos Responsive in WordPress

Two Ways to Make YouTube Videos Responsive in WordPress

October 11, 2017 17 Comments

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 editing the post as smooth as possible.

YouTube videos responsive in WordPress

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:

Facebook Fraud

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

  1. It’s very lightweight.
  2. It uses YouTube API, which allows it to request for thumbnail, title and description.
  3. It generates structured video metadata using Microdata format for search engine optimization. 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 network round-trips.
  5. 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!

Read Also:

  • How to Add PHP Code to WordPress Without Touching the Theme

    There are times when you need to add customized filters or actions to a WordPress blog. The Problem When you…

  • WP Plugins
    Free Plugins 3 of 4: Increasing Engagement

    This is the 3rd article in the series of 4 where you are about to find out what free plugins I'm…

  • Free Plugins 2 of 4: SEO

    With this post, I'm continuing the free plugin series. You can check out the previous post here. This one is about…

About Vladimir

I have a solid background in computer networking and programming. I recently started to develop applications related to internet marketing.

« Subdomains vs Subfolders Usage Comparison
How to Auto Post Your Content to Facebook, Google+, Twitter and LinkedIn »

Comments

  1. Mark ISPReview UK says

    February 6, 2018 at 11:05 am

    Your code seems to create a big white space below Twitter embeds. Any way to stop that?

    Reply
    • Vladimir Unguru says

      February 8, 2018 at 8:02 am

      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.

      Reply
  2. Ebanking says

    March 9, 2018 at 1:24 pm

    good technique for responsive videos. thanks for your suggesion

    Reply
  3. Arnab Saha says

    September 22, 2018 at 1:54 pm

    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.

    Reply
  4. M. Wright says

    October 4, 2018 at 5:56 pm

    Thank you! This was very easy and worked great.

    Reply
  5. PingSunday says

    October 5, 2018 at 5:00 pm

    Thank you a lot. I can just add the CSS code in the Custom CSS. No need to modify in the theme CSS.

    Reply
    • Vladimir Unguru says

      October 10, 2018 at 9:45 am

      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! 🙂

      Reply
  6. JC says

    November 23, 2018 at 9:13 am

    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?

    Reply
    • Vladimir Unguru says

      November 23, 2018 at 12:16 pm

      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.

      Reply
  7. Collins Agbonghama says

    November 23, 2018 at 9:33 pm

    Thanks for providing this code. Worked perfectly.

    Reply
  8. Yes Mobile says

    May 23, 2019 at 4:21 pm

    Thanks for providing this code.

    Reply
  9. Web Development says

    May 23, 2019 at 4:22 pm

    Wow, Great information thanks again.

    Reply
  10. Bliss says

    July 1, 2019 at 6:17 am

    I usually don’t comment but this saved me a lot of time , Thanks.

    Reply
    • Vladimir Unguru says

      July 1, 2019 at 7:01 am

      Glad to hear it!

      Reply
      • Bliss says

        July 1, 2019 at 8:01 am

        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

        Reply
        • Vladimir Unguru says

          July 1, 2019 at 8:52 pm

          Hi Bliss, it looks perfect to me! ? Unless you’ve solved the problem somehow…

          By the way, nice work!

          Reply
  11. Maximus McCullough says

    February 17, 2020 at 1:45 pm

    Great article, saved me some time with video embeds from YouTube! Thank Bro!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Reviews

  • 24 Hour Profits – Review and Case Study

    24 Hour Profits – Review and Case Study

  • New Ultimate Stock Photos Package with MRR – Review

    New Ultimate Stock Photos Package with MRR – Review

  • CB Passive Income Review – A Fully Functional Free Version Included

    CB Passive Income Review – A Fully Functional Free Version Included

  • A Simple Way to Monetize your WordPress Blog – Content.Ad Review

    A Simple Way to Monetize your WordPress Blog – Content.Ad Review

  • The Bloggers Roadmap – Honest User Review

    The Bloggers Roadmap – Honest User Review

Recent Posts

  • How to Cancel All Friend Request Sent on Facebook in One Click

    How to Cancel All Friend Request Sent on Facebook in One Click

  • How to Auto Post Your Content to Facebook, Google+, Twitter and LinkedIn

    How to Auto Post Your Content to Facebook, Google+, Twitter and LinkedIn

  • Two Ways to Make YouTube Videos Responsive in WordPress

    Two Ways to Make YouTube Videos Responsive in WordPress

  • Subdomains vs Subfolders Usage Comparison

    Subdomains vs Subfolders Usage Comparison

  • How to Create Exit Intent Pop-ups Using Free Plugins

    How to Create Exit Intent Pop-ups Using Free Plugins

Affiliate Disclosure

While we receive affiliate compensation for reviews / promotions on this page, we always offer honest opinion, relevant experiences and genuine views related to the product or service itself. Our goal is to help you make the best purchasing decisions, however, the views and opinions expressed are ours only. As always you should do your own due diligence to verify any claims, results and statistics before making any kind of purchase. Clicking links or purchasing products recommended on this page may generate income for this website from affiliate commissions and you should assume we are compensated for any purchases you make.

About

  • About Me
  • Sign Up
  • Contact Me

Legal Stuff

  • Terms of Use
  • Privacy Policy
  • Disclaimer

Follow Me

Copyright © 2023 · Marketing With Vladimir

Get Comment Funnels For FREE (normally $197/m)

(Enter your name and email address below and click “Continue…” to complete)