Embed Responsive Videos With WordPress

WordPress by default allows you to embed video by simply pasting the URL to the video on its own unique and separate line within your post editor. This helpful feature takes the hassle of embedding videos away from the average user who otherwise may not be sure how to embed at all.

Lately I have been building a lot of high quality website with Thesis 2 and the only thing they have in common is the need to be responsive.

The problem is that many videos such as You tube do not respond well to simply setting their width to 100% and height as auto and what your left with is a video that is completely out of proportion.

So the question is how do we fix that?

Responsive Video Container

The solution to this problem would be to wrap the embed code in a container that would allow you to apply some generic CSS that would ensure the video maintains  its proportion (or near as damn it), but who wants to add HTML to every video they have ever embedded? So we need to approach this situation in a slightly different way and luckily for you the WordPress embed function can be filtered.

For generic Themes add this to 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>";
}

Thesis 2 can include this function in their custom.php file but if you would like to incorporate it as part of your skin you should add this to your skin.php file.

Skin.php

protected function construct() {
        add_filter('embed_oembed_html', array($this,'wrap_embed_with_div'), 10, 3);
}
function wrap_embed_with_div($html, $url, $attr) {
        return "<div class=\"responsive-container\">".$html."</div>";
}

Remember that if you already have the construct method in your skin.php then simply add the filter as shown above.

Finally you will need a little 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%;
}

Once you have added everything, all your videos that were embedded by placing a link in your post will now be wrapped in this container.

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

12 comments… add one
  • Ryan Biddulph Feb 9, 2014, 6:29 am

    Matthew,

    Some nifty coding to get around a problem. Video is growing in popularity each day. Build your brand, grow your business and expand your presence. Use the code to create responsive vids.

  • Junalin Feb 13, 2014, 12:51 am

    Looking forward to reading through more. Great article.Truly thank you!

  • Des @ Vocational Courses Feb 21, 2014, 12:20 am

    Wordpress is really good thing when it comes to building a website because of its ease. By the way thanks a lot for sharing this post!

  • Steve Feb 27, 2014, 6:28 am

    Great stuff! a very simple to use solution that just got me out of a tight spot. Thanks Matthew I appreciate it.

  • David Egan May 15, 2014, 1:13 pm

    Thanks very much for this Matthew – an elegant solution!

  • Thomas Oct 15, 2014, 2:08 pm

    Great and simple solution even without any JS. The 30px does not perfectly fit for Vimeo.

  • Lord Akoroth Jan 19, 2015, 9:12 pm

    This worked perfectly. Thanks a lot!

  • Keyko Jan 31, 2015, 4:03 am

    Just wanted to say THANK YOU! It works perfectly and it was exactly what I needed!

  • Harold Hamernik Feb 17, 2015, 5:07 am

    hey, thanks for the code but it is not working on WordPress 4.1
    Is this function JQuery dependent? I am using 1.11.1 but the html container is not added to the post.
    Any tips?

    • Matthew Horne Feb 24, 2015, 4:17 am

      No jQuery required, i will need to test this and see if WordPress has changed something.

Leave a Comment