How to make your YouTube videos responsive in WordPress

Are you struggling to make your YouTube videos responsive in WordPress? Here’s a solution that does it for you, without plugins or extra code in your content.

WordPress has added a great new way of making your images responsive by default after version 4.4. But it still does not make your videos responsive. However, it’s not that difficult to fix, and I’ll show you how.

No embed code needed since WordPress 2.9

Since WordPress 2.9, you do not need the YouTube embed code to embed a video in you posts. If you have some old plugin to embed YouTube videos, you should delete it now. Now you only need to paste the video url in your content, and WordPress takes care of the rest.

But still not responsive

However, WordPress does not make your video responsive by default. Adding width:100%; height:auto; to your CSS does usually not help. There are lots of solutions out there that incorporates adding a div around your video, but who wants to add extra html code in the content? I don’t.

Responsive video without hard-coded div’s

With this great and simple fix by Matthew Horne at diywpblog.com, your theme will do all the magic for you. You just paste the YouTube video url in your post content, exactly as easy as it is supposed to be, and your video will become responsive with no hassle.

Here’s what you need to do in two simple steps:

1. Add a filter to your theme’s functions.php

add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);

function wrap_embed_with_div($html, $url, $attr) {
        return "<div class=\"responsive-container\">".$html."</div>";
}

2. Add some styling to your theme’s CSS:

.responsive-container {
        position: relative;
        padding-bottom: 50.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin-bottom: 1em;
}
.responsive-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

You might want to adjust the padding-bottom to make it look perfect on your theme.

Note 1: The best way to edit your theme is to create a child theme first. This way, you can update your parent theme without loosing your customized CSS or other changes you have done to the theme. I use the plugin Orbisius Child Theme Creator to create child themes easily.

Note 2: If you have Jetpack installed, you need to disable the function Shortcode Embeds to make this work.

Over to you: How does it work on your website? Share your experience in a comment!