Make YouTube And Vimeo Video Responsive In WordPress

So, you have added the YouTube or Vimeo videos in your WordPress posts or pages and they does not seem to be responsive at all. So, you came for a solution on how to make video responsive for your site. Well, you have came in the right place. Here, we will describe about how to make those video responsive for your WordPress post and pages.

JetPack Plugin Responsive Video Support

The easiest way of making the YouTube or Vimeo video responsive for your site is by adding the theme support for the JetPack responsive video. And for your goodness, it does not require any long bit of code to do so. It is just the small bit of code which we will be providing below:

// Support the JetPack responsive video feature.
function theme_slug_jetpack_setup() {
    // Add theme support for Responsive Videos.
    add_theme_support('jetpack-responsive-videos');
}
add_action('after_setup_theme', 'theme_slug_jetpack_setup');

Here, in the above code, we have added the code as add_theme_support('jetpack-responsive-videos');, which is provided by the JetPack plugin as to support the responsive video in WordPress posts and pages. Also, it need to be added in the WordPress hook of after_setup_theme. So, you might have the question about where to add this code in your theme? The answer to it is very simple, you need to add that code in the functions.php file of your theme.

Now, since you know about how to make the video responsive in your site via the JetPack plugin, now, we will be describing it in another method, ie, filtering the WordPress function method.

Filter the WordPress oEmbed Function

Now, as you have already know how to make the video responsive via the JetPack plugin, now is the time to support it via no plugin support, ie, built it from scratch. So, question might arise to you that is is possible to do so? Will it really take lots of code to be customized? The answer to it is, the solution on this is quite easy and only requires little to no code customization work.

For this, first of all you need to find the responsive video script. One of the best example for this feature would be fitvidsjs. It is one of the most used custom script to make your video responsive in your site. Now, after you have chosen the required script to make the responsive video in your site, you just need to enqueue the script to be loaded it in your site. For enqueue of the required script in your WordPress theme, open up your theme’s functions.php file and put this below code in that file:

function theme_slug_scripts() {
    // Enqueueing the fitvids javascript file.
    wp_enqueue_script('jquery-fitvids', get_template_directory_uri() . '/js/fitvids/jquery.fitvids.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'theme_slug_scripts');

Here, in the above code, what we have done is we have enqueued the required fitvidsjs script in the theme. Now, since this script is being loaded for your site, now, this script requires some of the script function to run it to make the video responsive. The code provided by it to make them responsive is as below:

jQuery('.fitvids-video').fitVids();

Here, in the above code, we have added the script to be loaded in the fitvids-video class. So, after that, the only part remaining now is to filter the WordPress function to add up the required html code, to add that required class, just above the video embeds, which is provide below:

// Filtering the WordPress posts and pages for creating responsive videos on them.
function theme_slug_responsive_video( $html, $url, $attr, $post_ID ) {
    return '<div class="fitvids-video">'.$html.'</div>';
}
add_filter( 'embed_oembed_html', 'theme_slug_responsive_video', 10, 4 ) ;

Here, in the above code, what we have done is, we have filtered out the WordPress function embed_oembed_html, to add the required class just above the video embeds, which is below:

<div class="fitvids-video">Video Content</div>

Now, since you know how to make the video responsive for your site, now is the time for you to see the screenshot of the videos while you are browsing your site via the mobile devices:

You can now see from the above image that when you add the video added in your site and browse the site via the mobile devices, there is very bad experience in the view of that. So, you wanted the video to make them responsive and followed the above steps, then, you are lucky. You have already made the video responsive for your site via any of the above method described. Now, the screenshot on the responsive video for the mobile devices is provided below:

Note: If you do the first mentioned step  to make the video responsive in your site, then, no further work need to be done. But, if you have done via the above second method described, then, if you have applied it after some video has been added in your site, then, you might need to open those posts or pages and then update them. And the videos will be responsive automatically in your site. And for the future posts or pages, nothing needs to be done. Just post them and nothing is required more.