Full Width Responsive WordPress YouTube Embeds Automatically
functions.php
function abl1035_alx_embed_html( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'abl1035_alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'abl1035_alx_embed_html' ); // Jetpackstyle.css
/*---------- Video Embeds ---------*/
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
}
.video-container iframe, .video-container object, .video-container embed, .video-container video {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}—
http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/
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
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%; }