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.