Maltpress

Web Development


Built by maltpress

Making WordPress embedded video responsive

So… making video responsive is a bit of a pain, isn’t it? iframes especially. I’ve been working on a site where this was an issue and I came across the following link:

Smashing Magazine: Making Embedded Content Responsive

Which is great. Except… well, if you’re using the built in WordPress embed (i.e. pasting the YouTube link directly into your post) then it’s hard to add the wrapper div around the embedded video. So how do we do it?

Luckily, there’s a filter – not yet in the Codex filter reference list – which lets you do this. Add the following to your functions.php file:

function example_makeembed_responsive($html, $url, $attr, $post_ID) {
    $html = '<div class="embedwrapper">' . $html . '</div>';  
    return $html;
}

add_filter('embed_oembed_html', 'example_makeembed_responsive', 10, 4);

Then add the following to your CSS:

.embedwrapper {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 35px;
   height: 0;
   overflow: hidden;
}
    
.embedwrapper iframe {
   position: absolute;
   top:0;
   left: 0;
   width: 95%;
   height: 95%;
}

Voila! responsive video. You might need to play with the width and height percentages in .embedwrapper iframe to get the controls showing – the linked article above suggests 100% but I found that cut the controls off.

Back to blog



Leave a comment


By using this site you consent to our use of cookies. To find out more, see our privacy policy. Continue