WordPress Resposive Videos (oEmbed + iframe/embed)

wp-reposive-video

1. Add this to your functions.php or inc/templates-tags.php

/**
 * Wrap videos embedded via oEmbed to make them responsive
 */
function p2_wrap_oembed( $html, $url, $attr, $post_id ) {
	return '<div class="video-embed">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'p2_wrap_oembed', 99, 4 );

/**
 * Wrap videos embedded via <iframe> or <embed> to make them responsive as well
 */
function p2_wrap_iframe( $content ) {
    // Match any iframes or embeds
    $pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
    preg_match_all( $pattern, $content, $matches );
    foreach ( $matches[0] as $match ) {
        $wrappedframe = '<div class="video-embed">' . $match . '</div>';
        $content = str_replace($match, $wrappedframe, $content);
    }
    return $content;
}
add_filter( 'the_content', 'p2_wrap_iframe' );

2. Add this to your style.css

.video-embed {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 1em;
}
.video-embed iframe,
.video-embed object,
.video-embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}