How to Make Embedded YouTube Videos Responsive in WordPress

>How to Make Embedded YouTube Videos Responsive in WordPress
  • How to Make Embedded YouTube Videos Responsive in WordPress

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, like 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 {

.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {

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-08-09T16:23:15+00:00December 20th, 2016|Customization, Tips|9 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:

    Video is at bottom.

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


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

Leave A Comment


All Aboard!

Get WordPress guides and tutorials right in your inbox once per week, plus some cool   offers from time to time!