Responsive video embeds for WP

Responsive-embed.css

/**
* Flexible media embeds
*
* For use with media embeds – such as videos, slideshows, or even images –
* that need to retain a specific aspect ratio but adapt to the width of their
* containing element.
*
* Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
*/

.entry-content .FlexEmbed {
	margin-bottom: var(--base-space);
}

.FlexEmbed {
	display: block;
	overflow: hidden;
	position: relative;
}

/**
* The aspect-ratio hack is applied to an empty element because it allows
* the component to respect `max-height`. Default aspect ratio is 1:1.
*/
.FlexEmbed-ratio {
	display: block;
	padding-bottom: 100%;
	width: 100%;
}

/**
* Modifier: 3:1 aspect ratio
*/
.FlexEmbed-ratio--3by1 {
	padding-bottom: calc(100% / 3);
}

/**
* Modifier: 2:1 aspect ratio
*/
.FlexEmbed-ratio--2by1 {
	padding-bottom: 50%;
}

/**
* Modifier: 16:9 aspect ratio
*/
.FlexEmbed-ratio--16by9 {
	padding-bottom: 56.25%;
}

/**
* Modifier: 4:3 aspect ratio
*/
.FlexEmbed-ratio--4by3 {
	padding-bottom: 75%;
}

/**
* Fit the content to the aspect ratio
*/
.FlexEmbed-content > .wp-video,
.FlexEmbed-content > iframe {
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

wp-responsive-vids.php

<?php
add_action( 'after_setup_theme', 'meh_responsive_videos', 99 );

function meh_responsive_videos() {

	/* Wrap the videos */
	add_filter( 'wp_video_shortcode', 'meh_responsive_videos_embed_html' );
	add_filter( 'video_embed_html', 'meh_responsive_videos_embed_html' );

	/* Only wrap oEmbeds if video */
	add_filter( 'embed_oembed_html', 'meh_responsive_videos_maybe_wrap_oembed', 10, 2 );
	add_filter( 'embed_handler_html', 'meh_responsive_videos_maybe_wrap_oembed', 10, 2 );
}

/**
 * Adds a wrapper to videos and enqueue script.
 *
 * @return string
 */
function meh_responsive_videos_embed_html( $html ) {
	if ( empty( $html ) || ! is_string( $html ) ) {
		return $html;
	}

	return '<div class="FlexEmbed"><div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div><div class="FlexEmbed-content">' . $html . '</div></div>';
}

/**
 * Check if oEmbed is a `$video_patterns` provider video before wrapping.
 *
 * @return string
 */
function meh_responsive_videos_maybe_wrap_oembed( $html, $url = null ) {
	if ( empty( $html ) || ! is_string( $html ) || ! $url ) {
		return $html;
	}
	$meh_video_wrapper = '<div class="FlexEmbed">';
	$already_wrapped   = strpos( $html, $meh_video_wrapper );
	// If the oEmbed has already been wrapped, return the html.
	if ( false !== $already_wrapped ) {
		return $html;
	}

	/**
	* OEmbed Video Providers.
	*
	* A whitelist of oEmbed video provider Regex patterns to check against before wrapping the output.
	*
	* @module theme-tools
	*
	* @since 3.8.0
	*
	* @param array $video_patterns oEmbed video provider Regex patterns.
	*/
	$video_patterns = apply_filters( 'meh_responsive_videos_oembed_videos', array(
		'https?://((m|www)\.)?youtube\.com/watch',
		'https?://((m|www)\.)?youtube\.com/playlist',
		'https?://youtu\.be/',
		'https?://(.+\.)?vimeo\.com/',
		'https?://(www\.)?dailymotion\.com/',
		'https?://dai.ly/',
		'https?://(www\.)?hulu\.com/watch/',
		'https?://wordpress.tv/',
		'https?://(www\.)?funnyordie\.com/videos/',
		'https?://vine.co/v/',
		'https?://(www\.)?collegehumor\.com/video/',
		'https?://(www\.|embed\.)?ted\.com/talks/',
	) );
	// Merge patterns to run in a single preg_match call.
	$video_patterns = '(' . implode( '|', $video_patterns ) . ')';

	$is_video       = preg_match( $video_patterns, $url );

	// If the oEmbed is a video, wrap it in the responsive wrapper.
	if ( false === $already_wrapped && 1 === $is_video ) {
		return meh_responsive_videos_embed_html( $html );
	}

	return $html;
}