How to Add Fitvids to WordPress in 5 Minutes

Fitvids is a jquery plugin that will resize your videos to fill the width of the container they’re in. Normally, if you try to stretch the width of a video to perfectly fit the container, the height will not adjust.

In short, adding Fitvids.js to WordPress will make your videos responsive.

In this tutorial we’re going to quickly implement Fitvids with WordPress, so all of your videos can look great at all screen widths.

Learn how to create your first WordPress theme from scratch in my upcoming course: View the course.

1. Download Fitvids

The first step is to visit the fitvids page on Github and get the code. If you’re familiar with Github you can skip to step 2. Otherwise, here’s the easiest way:

1) Click on the jquery.fitvids.js file to see the code:

fitvids github

2) Click on the “Raw” button in the top-right section of the box

3) Use cmd+a (ctrl+a) to select all and then copy the code to your clipboard.

4) Your theme should have a ‘js’ folder for all of it’s javascript files. Add a new file called fitvids.js and paste in the code.

2. Add Fitvids to Your Theme

In order for fitvids to work it’s magic, you need to tell it which container(s) to target. Create a new js file called something like my-fitvids.js and paste in the following code:

$(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
});

Replace #thing-with-videos with the class or id that your post content is in. Now everything would be working just fine except we haven’t told WordPress to load the script at all, and that’s what we’re going to do in the last step.

3. Enqueueing Fitvids

Hopefully, your theme already has a function that is properly enqueueing all the javascript files. If not, you can at least enqueue fitvids properly and later switch your other javascript files to be loaded this way.

add_action('wp_enqueue_scripts', 'load_my_javascript_files' );

// register and enqueue ALL the scripts
function load_my_javascript_files() {

    wp_register_script('fitvids', get_template_directory_uri() . '/js/fitvids.js', array('jquery'),'', true);
    wp_register_script('my-fitvids', get_template_directory_uri() . '/js/my-fitvids.js', array('fitvids'),'', true);

    if(! is_admin() ) {    
        wp_enqueue_script('fitvids');
        wp_enqueue_script('my-fitvids');
    }
}

The first time we use wp_register_script you can see the fourth parameter adds jquery as a requirement, and the fifth parameter is set to true which makes it load in the footer.

The second wp_register_script is used to register the file from step 2, and we add ‘fitvids’ as a requirement.

Lastly, there is a conditional statement to only enqueue the scripts on the front end of the site. You can be more precise about when they’re loaded if you’d like.

Fitvids Now Active in WordPress

Your videos should now be responsive and adjust to the width of your content containers thanks to fitvids and WordPress.

As an additional step, consider minifying the fitvids code for a small performance boost. You can use an online tool like JS Compress to minify the file, reducing the size and decreasing load times.

Related Posts

One Comment
  1. very thanks. save my time

Comments are closed.