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.
Perfect!
Nice one, but it’s not working for Instagram and Twitter embed. Any updated code?
Good solution, but then, it’s not working Instagram and Twitter embed. please any help would be much appreciated
Fantastic snipett just what I was looking for, what I usually do is create a new function plugin, this way when the theme is updated, you don’t miss those code fragments. Thanks for the input.
Solved my problem… videos now resize perfectly without any additional code. Thanks.
Good solution, but then, Instagram embeds aren’t sized properly.
Using these three sites:
https://developer.wordpress.org/reference/hooks/embed_oembed_html/#comment-1964
https://gist.github.com/jeweltheme/e16ccb6d6c268aaca932aeef3c24e5d6
http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/
I’m going with this snippet to solve all the problems for a Bootstrap3 site, to only target youtube. Adjust as needed:
add_filter( ’embed_oembed_html’, ‘wrap_oembed_html’, 99, 4 );
add_filter( ‘video_embed_html’, ‘wrap_oembed_html’ ); // Jetpack
function wrap_oembed_html( $cached_html, $url, $attr, $post_id ) {
if ( false !== strpos( $url, “://youtube.com”) ||
false !== strpos( $url, “://www.youtube.com”) ||
false !== strpos( $url, “://youtu.be”) ||
false !== strpos( $url, “://www.youtu.be” ) ) {
$cached_html = ” . $cached_html . ”;
}
return $cached_html;
}
Hello Jay! Did you get it?
I ‘ve found a great solution is to do this but it will not work for legacy posts unless you update them.
1) remove the tags from the video element in the editor.Ex: [video mp4="url"][/video]
2) add this css:
.wp-video, video, embed, object, iframe{
width:100% !important;
min-width:300px;
}
THATS IT!
Thanks! worked for my WP site as well.
Thanks very much for this share. Simple and elegant fix.
thankas brother
Thank you ! Works great.
thanks, it worked
I’ve updated your code for Bootstrap 4 Alpha 6:
1. Only videos (Show the Array on strposa) will get the video alignment.
2. Videos have max-width: 500px in tinyMCE.
3. Other content will be centered.
function naughty_embed_html( $html ) {
$modified_html = ”;
if ( strposa( $html, [ ‘youtu.be’, ‘youtube’, ‘vimeo’ ] ) ) {
// If video
// Remove ‘height=”xyz”‘ and ‘width=”xyz”‘
$html = preg_replace( ‘/width=”.*?” /’, ”, $html );
$html = preg_replace( ‘/height=”.*?” /’, ”, $html );
$modified_html .= ” . $html . ”;
} else {
// If something else
$modified_html .= ” . $html . ”;
}
return $modified_html;
}
function strposa( $haystack, $needles = [], $offset = 0 ) {
$chr = [];
foreach ( $needles as $needle ) {
$res = strpos( $haystack, $needle, $offset );
if ( $res !== false ) {
$chr[ $needle ] = $res;
}
}
if ( empty( $chr ) ) {
return false;
}
return min( $chr );
}
And the style:
.embed-responsive {
max-width: 500px;
margin: 0 auto;
}
.embed-align-center > *:first-child {
margin-left: auto !important;
margin-right: auto !important;
}
Thanks for sharing! Can you share the code via pastebin or something similar? The comments section isn’t the best to display code.
well i use this on my website but this code is not working.?????
YOU ROCK
Perfect!