How to Make Embedded YouTube Videos Responsive in WordPress

>How to Make Embedded YouTube Videos Responsive in WordPress
  • responsive youtube video

The simplest way to add a YouTube video in WordPress is by simply copying and pasting the URL in a page or post, and, if your theme is responsive, the YouTube video will automatically become responsive too and properly scaled down on mobile devices.

Let’s see an example.

YouTube Video WordPress

I’ve created a post and simply pasted a YouTube link. Now let’s see if it’s responsive.

Responsive YouTube Video in WordPress

As you can see, as I shrink my browser, all the content, including the YouTube video, gets scaled down, becoming responsive.

But what if you want to embed a YouTube video using an iframe, thing which allows you to choose between several options, like setting the size of the video, switching player controls on or off, and other such options that you can see below.

YouTube Embed Video

Now, some themes are optimized for displaying responsive iframes, but many aren’t, so your embedded video will not scale down on mobile devices; instead, it will just be cropped off, as you can see below.

Non-responsive Embedded YouTube Video in WordPress

Fortunately, there’s an awesome CSS code that you can implement to fix this issue. I think it’s better than to install another plugin that might bloat your website some more. The fewer plugins you have, the better.

How to make an embedded YouTube video responsive

Here’s what you need to do:

1. Go to your desired YouTube video, press “Share’, then click on the “Embed” tab and copy the iframe code. The video options you select will appear in this code.

YouTube embed iframe code

2. Paste it inside a post and wrap it in a div tag with a “class”.

For example: <div class="youtube-responsive-container"><iframe ...></iframe></div>

YouTube embedded video in a div container

Click to enlarge

3. Now you have to add the below CSS code. Here’s how to add CSS in WordPress.

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

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

4. Save the file.

That’s it! Now your embedded YouTube video should be responsive.

Now every time you add an embed code into a post, make sure to wrap it in the div tag: <div class="youtube-responsive-container"><iframe ...></iframe></div>. You can change the “class” name, though, but make sure you always use the same one.

You don’t have to add the CSS code again, just the div tag around the iframe code.

That’s a wrap

Hope you enjoyed the post and found it useful!

If you have questions or thoughts, please leave a comment, contact us, or message us on Facebook.

Don’t forget to share!

By |2018-10-04T11:47:25+00:00December 20th, 2016|Customization, Tips|21 Comments

21 Comments

  1. Udegbunam Chukwudi July 4, 2017 at 9:07 AM - Reply

    Thanks. It worked

  2. Monu Raj September 8, 2017 at 6:11 PM - Reply

    Thanks Sir for posting this awesome information. I use hueman theme in which my video is not responsive but after trying your trick my video will be responsive.
    Thanks a lot sir.

  3. Ben October 25, 2017 at 9:55 PM - Reply

    So my videos are perfectly responsive. What I mean by that is the container is responsive but the video inside doesn’t fill the whole container. Almost as if the container has a min-height and so it won’t go all the way down to fit the video and leaves it letter boxed. See here: https://rewind1007.com/life/moviepass-review/

    Video is at bottom.

    • ThemeSkills October 26, 2017 at 9:54 PM - Reply

      Hello!

      I went to take a look, but there’s no video, just white space where the video was supposed to appear. I checked the code and the IFrame is there, but no video. Checked with two different browsers.

  4. Iyke December 25, 2017 at 6:41 PM - Reply

    Please this didnt work for me, what do i do ?

  5. User January 10, 2018 at 6:07 PM - Reply

    Perfect, Worked like MAGIC!!

  6. Manu May 23, 2018 at 7:48 AM - Reply

    You can include it directly without touching the css stylesheet:

    <div style=”position: relative; padding-bottom: 56.25%;>

  7. RimaSavira.id June 14, 2018 at 11:59 AM - Reply

    Thanks brother.
    Now my blog is worked with beautiful Youtube Video and very responsive.

  8. frank June 20, 2018 at 3:53 PM - Reply

    Thanks! First I had a letter box with small black rows above and below, but I changed padding-top to 0px, and then the letterbox was gone. I’d love to set a maximum size for a laptop browser though as now it is full width. Which is nice on mobile, but a bit big on a laptop. But it will do. Thanks!

  9. Boopathi August 29, 2018 at 10:57 PM - Reply

    in my mobile responsive not working what i do?

    • ThemeSkills August 30, 2018 at 12:28 AM - Reply

      Sorry, but you’ll have to be more specific.

  10. jack August 31, 2018 at 4:22 PM - Reply

    it works for website, but not on the mobile/smart phone.

    • ThemeSkills September 2, 2018 at 6:13 PM - Reply

      If it doesn’t work, it’s either added wrong or something is preventing the code to work properly, like your theme or another plugin.

  11. Jane M. September 10, 2018 at 6:19 PM - Reply

    Thank you very much. I was looking for how to get a responsive video on my website.
    It works!

    • ThemeSkills September 10, 2018 at 6:58 PM - Reply

      I’m happy it worked! Thanks for letting me and others know!

  12. Arjun September 21, 2018 at 1:43 PM - Reply

    Why is it not working for me?
    Did the same thing but with the div code now, the page has no video, just the embed code and tag as text.

  13. Arjun September 21, 2018 at 4:07 PM - Reply

    I have a problem with this code. The video fits to maximum screen size and as i do not have a sidebar for my site and the video is extremely large in my laptop, almost close to fullscreen, which looks bad cause the video is not that good. Making a change in video size in the embed code doesnt make any difference in the real page, it only makes a change in the page editing visual part.

  14. Arjun September 21, 2018 at 4:18 PM - Reply

    Got the answers to both above, But,
    How can you fit to max screen size for mobile and fit it to 60% (width and height) for laptops??

    • ThemeSkills September 21, 2018 at 5:30 PM - Reply

      Hello! Glad to see you solved the other problems.

      As for making the video 60% on laptops and desktops and full-width on mobile devices, you’ll have to do the following:

      Step 1 – Leave the code that you already added to make the video responsive, but replace 100% with 60% for width and height.

      This will shrink the video to 60% for all devices. Follow step 2 to make it full-width back on mobile devices only.

      Step 2 – To make the embed video full-width back only on mobile devices, copy the original code that’s in the post (with width:100%, height:100%), add it under the first one (step 1), but add it inside this:

      @media only screen and (max-width: 768px){ add the whole CSS code from the post here }

      Clear your page/site and browser cache.

      You can change the breaking point (768px) if you want. This will make the video full-width on tablets too. If you want it full-width only on smartphones, then you could add a smaller breaking point, such as 640px. Use tools like Responsinator and MobileTest to check things out.

  15. Dhron October 3, 2018 at 5:02 AM - Reply

    Thanks Worked For me Just that’s I need to be adding to All post, Is There no code to add to the theme to make it automatic for all iframes

    • ThemeSkills October 3, 2018 at 9:21 PM - Reply

      You’ll need some custom PHP coding for that, I think. Most themes have that feature built-in but some don’t.

Leave A Comment