If you are a blogger, you certainly know that in order to make their posts eye-catching, they need to spice them up with some images, videos, clips, and the like to add interest and color.
However, WordPress by default doesn’t make videos responsive – certainly not YouTube videos that you embed in the content editor through the WordPress admin interface.
In this guide, we will see two methods to make YouTube videos responsive in WordPress, one using code and the other using a plugin. These methods will also work for Vimeo videos.
Before we begin, it should be noted that in more modern versions of WordPress, if you want to add a YouTube video in the content editor, you can simply copy the URL into its own line, and WordPress will take care of the rest.
But the video is still not responsive
In any case, the video is still not responsive, and adding width: 100% and height: auto to the CSS file doesn’t solve the problem in most cases. There are, by the way, many solutions that allow making a YouTube video responsive by adding certain wrapping elements (DIVs) to the video.
But who wants to deal with HTML code unnecessarily in our posts? Not me. Writing posts is not easy in any language and takes quite a bit of time… Let’s keep the writing experience as comfortable and easy as possible!
First Solution – No Plugin, Using Code
This solution is implemented by adding the following code to your theme’s functions.php file, or better yet, in your theme’s child template as mentioned here. This way, you won’t lose the changes when you update your theme. Here’s the code:
function wpse_embed_oembed_html( $cache, $url, $attr, $post_ID ) {
$classes = array();
// Add these classes to all embeds.
$classes_all = array(
'responsive-container',
);
// Check for different providers and add appropriate classes.
if ( false !== strpos( $url, 'vimeo.com' ) ) {
$classes[] = 'vimeo';
}
if ( false !== strpos( $url, 'youtube.com' ) ) {
$classes[] = 'youtube';
}
$classes = array_merge( $classes, $classes_all );
return '<div class="' . esc_attr( implode( $classes, ' ' ) ) . '">' . $cache . '</div>';
}
add_filter( 'embed_oembed_html', 'wpse_embed_oembed_html', 99, 4 );
This code uses the embed_oembed_html filter (which we won’t elaborate on) and causes YouTube or Vimeo videos embedded in the content editor to have the same surrounding element.
It’s basically a DIV with a class named responsive-container, and depending on the type of video you embed, the classes youtube or vimeo will be added accordingly.
Another Alternative Solution for Automatically Wrapping Videos
If for some reason the previous script didn’t work – here’s an alternative way to add a surrounding element with the class .responsive-container to videos you embed in the WordPress editor:
add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) {
if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){
return '<div class="responsive-container embed-responsive-16by9">' . $html . '</div>';
} else {
return $html;
}
}, 10, 4);Anyway, if you take a look at any post containing a video on your site, you’ll notice the mentioned classes have been added. Now let’s add the relevant CSS to make the videos responsive:
.responsive-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0;
height: 0;
overflow: hidden;
}
.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video,
.responsive-container .youtube,
.responsive-container .vimeo
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
It should be noted that if you directly add the YouTube video’s iframe code that you received from YouTube, just wrap it with an element with the class .responsive-container and add the CSS. The PHP code mentioned above is not needed.
In any case, you can adjust the aspect ratio by modifying the padding-bottom value in the CSS. Generally, 56.25% is suitable for most videos. If you’re interested in the mathematical explanation, it’s as follows:
9 divided by 16 is equal to 0.5625, which we can translate to 56.25%. And that holds true for all aspect ratios: 4:3 is 3 divided by 4 which equals 0.75, or 75%. 2.39:1 is 1 divided by 2.39 which equals 0.4184, or 41.84%.
This is the code-based solution, but before you apply it, make sure you really need it. There’s a chance that many themes already implement this method. Here’s an example of an embedded video using this method, and incidentally talking about it:
Second Solution – Using a WordPress Plugin
There are many WordPress plugins that enable responsive videos, whether through shortcodes or other methods.
The plugin automatically detects the aspect ratio of the embedded videos and supports YouTube and Vimeo videos. The plugin has a settings page where you can customize it to your needs.
However, be aware that using the plugin might impact the optimization and speed of your WordPress site. With its default settings, the CSS that the plugin loads is dynamically generated by making an Ajax Controller call (i.e., wp-admin/admin-ajax.php).
To avoid this impact, although it’s not significant, make sure in the plugin settings that you check the Disable CSS Output option. This will prevent the plugin from adding its own CSS, and therefore you’ll need to add the following CSS to your theme’s stylesheet:
/* Fluid Video Embeds */
.fve-video-wrapper {
position: relative;
overflow: hidden;
height: 0;
background-color: transparent;
padding-bottom: 56.25%;
margin: 0.5em 0;
}
.fve-video-wrapper iframe,
.fve-video-wrapper object,
.fve-video-wrapper embed {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fve-video-wrapper a.hyperlink-image {
position: relative;
display: none;
}
.fve-video-wrapper a.hyperlink-image img {
position: relative;
z-index: 2;
width: 100%;
}
.fve-video-wrapper a.hyperlink-image .fve-play-button {
position: absolute;
left: 35%;
top: 35%;
right: 35%;
bottom: 35%;
z-index: 3;
background-color: rgba(40, 40, 40, 0.75);
background-size: 100% 100%;
border-radius: 10px;
}
.fve-video-wrapper a.hyperlink-image:hover .fve-play-button {
background-color: rgba(0, 0, 0, 0.85);
}
Certain settings of caching plugins such as or similar to WP-Rocket can also perform this action for you without changing the settings of the Fluid Video Embeds plugin.
If you’ve tried one of these methods to make YouTube videos responsive, share your experiences in the comments below…
