it is 2017, having non-responsive content on your website will cost you your users. Most WordPress themes have this issue of not automatically scaling your embedded videos when viewed on mobile, even though other parts of the website scales. This makes your videos a bit useless to mobile users. A non-mobile friendly website is bad for SEO
Non-responsive vs Responsive design
Non-responsive vs Responsive design

In this article, I’ll be showing you how to use a free Plugin – FitVids to automatically scale all your videos when viewed on mobile.

If you prefer not to install plugins, I’ll show you how to do this Programmatically.

FitVids is a Jquery plugin developed by Kevin Dees.

To fix the issue with this plugin simply install and activate the plugin, that’s all!

Your videos will now be well structured and very responsive on mobile devices. If you are not sure how to install plugins, you might want to go through my WordPress tutorial for starters.

Doing It Programmatically.

If you prefer not to install the plugin the plugin to your dashboard, perhaps you want to get your hands dirty with code, here is how.

First, you’ll need to download and extract FitVids Jquery plugin to your computer. Then extract the FitVids.js-master folder and upload it to your theme’s js directory.

If your theme does not have a JS directory, simply create one and then upload the file into it.

Inside the js folder, you need to create a new file and name it as FitVids.js. Copy the code below and paste it into the JS file you just created.

(function($) {
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(".post&quot.fitVids();
  });
   
  })(jQuery);

What the above code does is that it tells FitVids to look for .post CSS Selector.

After this, edit your functions.php file in your theme and add the code below.

wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE);
wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE); 

And that’s all . Congratulations! You just worked on your WordPress installation like a Badass! Your videos will be responsive on mobile devices now.

Did this work for you? Please tell me in the comment section below.

Source : https://w3tutor.org/wordpress/make-videos-responsive-wordpress/