Testing YouTube embedded video responsiveness in WordPress

It turns out YouTube video uploads have come a long way since I last tried them out. This is a test post with no discernibly interesting content. WordPress has, for quite a long time allowed embedding YouTube content simply by copy and pasting the URL into the WordPress post editor.

Checking-out how WordPress handles YouTube embeds, whether or not they are responsive and if not how I can make them work better.

Update

So it turned out that the standard embed method will add a fixed width video iframe into the page. To make this responsive a couple of additions were required.

First wrap YouTube embed iframes in a container. Add the following script to your theme functions.php script

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>";
}

Then add a little bit of CSS to your themes style.css or wherever your main CSS file is

.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%;}

And that did the job.

<p>
  in Belfast, Northern Ireland
</p>

<p>
  <a class="button" href="/contact/">Contact me today!</a>
</p>