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 and iframe, thing which allows you to choose between several option, 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 less plugins you have, the better.

If you’re pretty new to WordPress, I suggest you seek someone that can help you out. Also, make sure you perform a backup before trying this! You never know with WordPress and themes; somehow, something can get messed up.


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 following CSS code in your theme.

I strongly recommend having a child theme in case you’re pasting the code in your style.css file, otherwise, every time you update your theme, the code will be gone and you’ll need to add it again and again.

.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-02-17T21:48:24+00:00 December 20th, 2016|Coding, How to, Tips|6 Comments

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

Leave A Comment