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.




I strongly suggest having a child theme for this, otherwise, every time you update your theme, the code will be gone and you’ll need to add it again and again. If you don’t have a child theme, check your theme’s options, because many themes have a place where you can add custom CSS, and that will get saved and won’t get lost with future updates.

How to make an embedded YouTube video responsive

Here’s what you need to do:

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

  • Now you have to add the following CSS code in your theme, either in the CSS box found (possibly) in your theme’s panel, or in your child theme’s style.css file at the very bottom..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%;
    }

  • 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 and subscribe!


 
 


Leave a Comment