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($) {
    // Target your .container, .wrapper, .post, etc.
  • 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: