This post was published in 2016 and may contain information, techniques or code examples that are no longer current. Please double-check official documentation and modern best practices before using anything from this article.
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.