FitVids.js is a great jQuery plugin for fluid width video embeds. It also available in wordpress plugin, but I wanted to add manually into my theme. This tutorial is about how to add FitVids.js manually into your wordpress theme.

• download Fitvids.js from here
• upload “FitVids.js-master” folder into your theme’s js directory
• create a new file with name “FitVids.js” and copy this code:

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

• you can replace “.post” with container name of your posts
• upload “FitVids.js” into your theme’s js folder
• copy and paste this code into your theme’s functions.php file:

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);

Now you have responsive youtube and vimeo embeds. Here is a sample youtube video: