WordPress Responsive Embeds

functions.php

/**
 * Change the embed code, so we can apply awesome css classes
 * Called by filter "oembed_result"
 *
 * @author Hendrik Luehrsen
 * @since 1.0
 *
 * @param $html string The oembed html to edit
 *
 * @return string The edited html
 */
 function responsive_video_oembed($html, $url, $args){
	$wp_oembed = _wp_oembed_get_object();
	$provider = $wp_oembed->get_provider( $url, array( 'discover' => false ) );
	$video_pattern = "#(\W|^)(youtube|vimeo)(\W|$)#";

	if(preg_match($video_pattern, $provider)){
		$new_html = '<div class="embed-responsive embed-responsive-16by9">'.$html.'</div>';
	} else {
		$new_html = $html;
	}

	return $new_html;
}
add_filter( 'oembed_result', 'responsive_video_oembed', 10, 3 );

style.css

.embed-responsive {
  max-width: 100%;
  position: relative;
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.embed-responsive:after {
  content: "";
  display: block;
  padding-bottom: 56.2%;
}

I use this piece in almost every project I create.

Using this I can have elegant and responsive oEmbed videos AND keep the aspect ratio! Awesome!