Properly resizing videos, possible code addition?

I’m not sure if other have noticed but videos seem to resize a little wonky if embedded as iframes, which is usually the case if oembed is used(i.e. just posting the link rather then the full embed code). The width of the video resizes, but it doesn’t retain the proper aspect ratio.

It was suggested that I just use fitvids.js, but I’d rather handle the problem natively with css and html before relying on javascript. I found this article on web designer wall along with this article and it works like a charm.

Basically you add this code to the functions.php file (preferably of a child theme)

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

Then you add this css to your stylesheet and you’re done. You can change the width of the wrapper(it’s set to 960px in the example) to be whatever fixed size you’d like your videos to max out at or just leave out the wrapper entirely to keep it fluid.

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

I’m mainly just throwing this up here in case anyone else runs across this issue or it might be something to include in a future update to the twenty twelve theme.

The site that I’m using this on is http://martysgarage.info if you’d like to see a working example.