Add support for responsive video embeds

[obenland]

By wrapping the html content of a video embed with a container (incl. class name), we could provide a simplified way for Theme authors to make video embeds truly responsive, through basic CSS.

See #21480

This is unfortunately easier said than done because we don't want to wrap all content types, just block types such as videos and images. However only the oEmbed class gets to see what type of content is being returned and it just returns some HTML without any context. This HTML is then cached by the embed class, again without any context.

So we could add wrapping to the oembed class, but that wouldn't affect existing cached data, only posts edited/saved after any change got pushed into core.

I guess that's better than nothing though...

Thoughts?

I might be missing something but wouldn't anything being embedded into a post be block content or at least treated as such? Tweet, poll, slideshow, audio player, etc.

I've been using the following code in twenty twelve child themes to maintain proper aspect ratios on video embeds delivered via oembed.

within functions.php, this adds a figure with a class of video-container and a div with the class of video-wrapper

add_filter( 'embed_oembed_html', 'css_oembed_filter', 10, 4 ) ;
 
function css_oembed_filter($html, $url, $attr, $post_ID) {
    $return = '<div class="video-wrapper"><figure class="video-container">'.$html.'</figure></div>';
    return $return;
}

then in the styling I use the following css

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-wrapper {
	width: 960px;
	max-width: 100%;
}

The video-wrapper class is only needed if you want to set a maximum width for the video.

If you'd like to see a working example you can check out ​my blog