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.

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

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.

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.

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.

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>

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!