Make WordPress default video embeds responsive

Go to source

Unfortunately WordPress does not add a div around embed codes by default, so this is the first thing we need to do to get it to work.

Add this to your theme’s functions.php:

/*  Add responsive container to embeds
/* ------------------------------------ */	
function alx_embed_html( $html ) {
	return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

And next up, we need to add the CSS that makes it responsive to our style.css:

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

And that’s it! You now make iframe, object, embed and video (html5) elements responsive. The responsive CSS will always show videos in 16:9 aspect ratio, which is HD.

This code will also work with Jetpack embeds.