Make WordPress default video embeds responsive

Unfortunately WordPress does not add a div around embed codes by default, so this is the first thing we need to do to get it to work.

Add this to your theme’s functions.php:

/*  Add responsive container to embeds
/* ------------------------------------ */	
function alx_embed_html( $html ) {
	return '<div class="video-container">' . $html . '</div>';
}

add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

And next up, we need to add the CSS that makes it responsive to our style.css:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

And that’s it! You now make iframe, object, embed and video (html5) elements responsive. The responsive CSS will always show videos in 16:9 aspect ratio, which is HD.

This code will also work with Jetpack embeds.

57 Responses

  1. Eric says:

    Perfect solution! Thanks for sharing.

  2. Harold says:

    Tried this but it does not work. Added to functions and css, but the HTML is not inserted at all.

    Using WordPress 4.1 – is this tutorial up to date? Thanks for any help you can add.

  3. Stacy says:

    I am using this on a site right now, but it also effects the Twitter oEmbeds too (adding a ton of bottom padding to a short embedded tweet). Any ideas on how to limit this to only videos and maps?

  4. Gabriela says:

    Thanks! Just what I needed.

  5. Paul says:

    You, sir, are a genius and a Godsend! Thank you muchly 🙂

  6. jayson says:

    works for me! thanks dude!

  7. fred says:

    This don’t work anymore, WordPress 4.2.2

  8. Mike says:

    I can’t get this to resize my splash image. Anyone have a quick fix?
    http://www.michaeljohnson.ws/green/test-post/

  9. .wp-video-shortcode {
    height: auto;
    margin: 0;
    text-align: center;
    width: 100%;
    }

    Just add this line on the css and everything is going to work.

  10. Adam says:

    Thank you! The code worked perfectly.

  11. Amit says:

    Thanks, Very helpful for me. I have just added this code.

  12. Sergio Pinna says:

    ok,

    but i have an Vimeo URL: how to do to use your funtcions?

  13. Great solution. Thanks for sharing. The best part is this maintains the default embed behavior.

    I’m always annoyed when I have to find a way to do what WordPress core should be doing itself. At least this is a simple fix!

  14. Sean Davis says:

    Thanks! Works perfectly.

  15. mito says:

    u da man!!

Leave a Reply

Your email address will not be published. Required fields are marked *