How To: Use FitVids.js with WordPress for Responsive Videos

16th April 2014

Let me set the scene. You’ve got a great responsive layout, you’ve tackled the navigation menu and your typography all looks spot on even when you view it on your iPad mini. Then you go to insert a video in your blog and you realise that it’s shooting out somewhere into oblivion. Nuts.

Thankfully some decent chaps have come up with a solution for that, which you can integrate into any WordPress theme with relative ease. It’s called FitVids.js, and it’s a jQuery plugin which will make all of your video embeds magically responsive. Here’s how you get it working:

Step One: Download FitVids.js

Go download the FitVids.js script from

Once you’ve done that, you’ll need to put it somewhere in the folder for your theme. Many will already have a ‘js’ folder which is a good place to copy it. Otherwise you could create your own, or see where the other scripts are stored.

Step Two: Enqueue the script

Next you need to call the script, which is best done using wp_enqueue. I wrote a whole post on how to do this correctly, called ‘How to: Correctly Include JavaScript Files in WordPress Themes‘.

Basically this is what you’re going to want to put in your functions.php file:

We’re registering the script and then enqueuing it in the front end of the site, but not in admin.

NB: Because FitVids is a jQuery plugin you’ll see that you need jQuery running for it to work. If your theme isn’t already loading jQuery, you can add it yourself by placing this above wp_register_script:

Step Three: Target the video container

The last step is to target your video container. The script as per the example on GitHub looks like this:

Seeing as we’re working with WordPress we’re going to need to modify this ever so slightly. We’re also going to want to go back to our functions.php file and call the script correctly in wp_footer rather than simply copy and pasting it into one of our other template files.

The final script to paste into functions.php is this:

The last thing to say is of course that #things-with-videos needs to be changed to reflect the container that holds your videos. On this site that means setting it to .post but it may also be, for example, .entry-content. You need to refer to your theme files to see what your post content is wrapped in.


I’ve included a video of Sarah Jarosz being brilliant so that you can see FitVids.js in action.


  • Justin

    14th May 2014 at 5:48 am

    I think you have some errors in your code where you say “The final script to paste into functions.php is this:” I got a php error on the first line (“unexpected ?”)

    • Jo

      14th May 2014 at 1:43 pm

      Hi Justin,

      Thanks for your comment. Sorry you’ve had problems, it seems that when I was switching backwards and forwards between the visual and text editors in WP it’s messed with the code between my pre tags.

      I’ve sorted it out now, so if you try again with the code above it should work for you.



What our customers say:

I would highly recommend Hut Six Digital for your website implementation. Jo has been fantastic to work with and has exceptional knowledge in her field. She is friendly, reliable and professional, which has resulted in our fantastic new website launch. Her training was clear and concise, and I know she will be on the end of the phone or email should I need her for a little refresh. She has enabled us to take full control of our new website, which was something other companies have been unable to offer. Excellent value for money too!

Christina Canning (SMS Alarms Ltd, Thatcham)

Jo has been personable and efficient in setting up my website. She did a great job of understanding what I wanted and providing guidance from her wealth of experience. She has explained things in a non-technical way and has been very responsive, patient and flexible in working with me. In short, Jo is great value for money and easy to work with.

Vanessa Rhone (Venus Works, Oxford)

Excellent, efficient service from Jo. Highly recommend.

Xan Rice (Journalist, Oxford)

I am not exactly a technophobe but due to previous experiences of pressing buttons that I have no business pressing I have shied away from doing thing to update or improve my site. I have called on Jo Cox’s expertise several times and she is always quick, efficient and gets you back on track whilst also calming you down. I can honestly say that there is no one else I would call on in an emergency to sort out problems with my website. I have never had a bad experience with Jo’s services or with Jo as the service provider.

Lisa Bentley (Writer, Liverpool)

Jo has been amazing. Through 1-2-1 training sessions she has helped me to make significant improvements to my website functionality. This has not only been cost effective but it also has empowered me to use the skills that I have gained to edit my website myself in the future. She has simplified what I thought would be tricky tasks. I will definitely continue to work with her in the future and I couldn’t recommend her highly enough.

Felicity Wood (Yoga Instructor, Bicester)

Jo took my simple brief outline of what I wanted and turned it into everything I wanted and more. Jo was very professional, efficient and she was patient and understanding with the fact that I was not knowledgeable about building websites or what’s involved. By the end of it Jo had given me and my team a training session around how to manage the website. I would highly recommend her!

Sharon Mulholland (Sandcastle Mortgages, Kidlington)

Jo was completely fantastic! I’d been struggling to make a WordPress blog design work and was completely stumped. I made an enquiry to Jo about some help, and she replied within 24 hours. It was easy to agree on a price for the things that needed to be done, and she had fixed everything within 48 hours of the original enquiry. I had thought my problem was too small for someone to help with it, but I was pleasantly surprised that Jo was happy to sort out the small issues with my site for an extremely reasonable fee. Throughout the process, Jo was efficient, effective and stayed in regular communication. She answered all of my questions, even the really idiotic ones, and nothing was too much trouble. The entire experience was great and I would recommend her in a heartbeat to anyone who needs help with a website project – big or small. She is, in short, superb at what she does.

Imogen Goold (Blogger, Oxfordshire)

I wish I had found Jo earlier. We wanted to progress from making simple text edits to getting more out of the CMS. After a very enjoyable training session, we can now design new pages and keep the website organised. Excellent.

Margaret Hildreth (JP Hildreth Ltd, High Wycombe)