#103: Integrating FitVids.js into WordPress

The default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the responsiveness breaks down. The video doesn't fill the area on wide screens and is too big on narrow screens, breaking outside the content area.

In this video we'll cover how to add jQuery to a WordPress theme, then download the jQuery plugin FitVids.js and integrate it into the theme (simple stuff!). The result is the video instantly fits the responsive nature of the theme. It works for video from any source.

Even though this is a simple and specific example, I hope it helps you understand how you can get started integrating any cool JavaScript thingy you find on the web into a WordPress site.

Links from the video:


  1. User Avatar
    Matt Seymour
    Permalink to comment#

    First line: “I have prepared for this zero” – love it Chris

  2. User Avatar
    Permalink to comment#

    Awesome this came just in time! I am going to merge this into this Bones theme I found and give it a test run. Thank you Jacob for letting me know how to get this loaded in the footer!

  3. User Avatar
    Permalink to comment#

    You are my hero dude. Keep up the great work!

  4. User Avatar
    Tanner Nelson
    Permalink to comment#

    I don’t even use wordpress. I just watch this for the entertainment and pure brilliance. :) moar videoz!

  5. User Avatar
    Lane Weaver
    Permalink to comment#

    Thank you so much, this is such a valuable tool, your video is also wonderful and entertaining! keep it up, I hope you enjoy much succes with any thing you do! keep rockin :D

  6. User Avatar
    John S. Richards
    Permalink to comment#


    Thank you for your interesting tip & tutorial.
    Could this be combined with the Screencast.com wordpress plugin?

    Is there an improvement opportunity by combining both plugins into one new plugin? Does this give you any new ideas to test? If so, please post a new screencast on this topic.

    Thanks again!

  7. User Avatar
    Permalink to comment#

    LOL! Great video and made me style. You are talented to get this stuff, figure it out and pass it on to other people.

    I am ASP/ASP.NET developer for YEARS and absolutely love WordPress and JQuery. Just getting into WP Plugin Integration.

    This video was helpful in knowing what to tweak and where to put files and get proper path references. You just made me a few hundred bucks this year.

    Thank you!

  8. User Avatar
    Permalink to comment#

    *style = smile with your style.

  9. User Avatar
    Permalink to comment#

    Works Great! Thank you.

    First time i have seen that WTFPL license.

  10. User Avatar
    Permalink to comment#

    Is this now included in WP3.3? It appears to already resize in 3.3. Maybe I’m doing something wrong or just got lucky.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I just upgraded and tested default theme and FitVids is still needed.

  11. User Avatar
    Permalink to comment#

    Thanks for the video. I’ve got fitvids.js installed and all scripts are loading as they should. The thing I’m trying to do differently is rather than put my Vimeo embed code into a post or a page, I’m hard coding it into index.php into a div where I want my video to live.

    Does anyone know how to accomplish this? What will I need to do differently? (Unfortunately I can’t provide an example link as the site has yet to launch.)

    Here’s what I’ve got so far:

    <script type="text/javascript" src="/js/jquery.fitvids.js"></script>
        // Target your .container, .wrapper, .post, etc.

    And in index.php:

    <div id="banner">
    			<iframe id="video" src="http://player
    amp;byline=0&portrait=0&color=EA1D25&autoplay=1&loop=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

    And for the CSS:

    #banner { min-width: 100%; height: auto; }
    iframe#video { min-width: 100%; height: auto; }


    • User Avatar
      Permalink to comment#

      Well, despite having errors in my code above (iframe id=”video” amongst others I’m sure), the main problem is seems to be that fitvids.js was corrupt. I tested this by re-downloading the package on github, and then plugging in my remote jquery.fitvids.js path into the local tests.html file, and it stopped working. Dropped in a fresh fitvids.js copy remotely, and boom!

  12. User Avatar
    Nicolas messer
    Permalink to comment#

    There’s a Plugin for that! You don’t want to touch your theme files? Go and get Kevin Dees’ Plugin in the Extend at http://wordpress.org/extend/plugins/fitvids-for-wordpress/

    • User Avatar
      Shelley Provenza
      Permalink to comment#

      I used the Plugin (the easy way) … the big problem is there’s a bunch of space above the video. I put it above the text and under the text, didn’t matter. I even took the video code out of the column classes. Just pasted the link from YouTube.

      Here’s the page: http://michaelprovenza.com/index.php/about-provenza/

      I really want this to work. The video is the only thing that’s not responsive on the entire website. Also, in the set up, I put .page as the jQuery selector instead of .post. Not sure if that matters, but the video is on a page – not a post.

      I hope someone can help!!!

  13. User Avatar
    Permalink to comment#

    Hey Chris, how could you make a flash 360 panoramic file dynamic? And also an html5 panoramic?
    Would you also use the fitvid script?

  14. User Avatar
    Permalink to comment#

    Love the FitVid.js But one fault I find is that if you adjust the browser, while the video is playing it causes it to start over (reload).

    I often have my Browser in Maximized view, and will occational “UnMaximize” it when needed. Which will cause the video to stop and start from the beginning. This is extremely annoying if say I want to Shrink the size of Firefox, then have SublimeText open to the left so that I can follow along with the Videos here at CSS-Tricks.

  15. User Avatar
    Shelley Provenza
    Permalink to comment#

    Chris, I used the FitVids plugin for my wordpress site and there’s a ton of padding-top above my video now. My page source says the plugin is adding: padding-top: 53.95833333333333%;

    How do I fix this?? I’m a beginner developer, so this might seem simple, but I just officially became lost on this one!

    Here’s my page: http://michaelprovenza.com/index.php/about-provenza/

    You’ll need to scroll way down to see the video. I tried putting the video above the text, under the text, I even took it out of the column classes and any div tags. The video is posted on a page (not a post) so I also don’t know what to put for the jQuery selector. The screen shot shows to use .post, but that doesn’t make the video responsive. When I use .page, the video is responsive but then there’s all the crazy padding on top.

    Thanks for any help!!

  16. User Avatar
    Shelley Provenza
    Permalink to comment#

    Okay, I think I just shocked myself and figured it out! After reading more information on Kevin Dees page, I found the problem was the selector. After viewing my page source, it appears the tag containing my video is called .entry-content (not .post or .page). So, it looks as though it now works and does not have crazy padding added to the top!!!



  17. User Avatar
    Permalink to comment#

    Awesome Chris. I’m in the process of redesigning my site to be responsive and have struggling with this issue a bit. Happy I found this screencast (I actually came here looking for something else…. :) ) Looks like this should do the trick. Thanks!

  18. User Avatar

    This is great stuff. I will definitely be implementing it. I was also wondering if this script also works for the jquery slider plugins.

  19. User Avatar
    Permalink to comment#

    i love your worck man.Ten plus :X

  20. User Avatar
    Permalink to comment#

    You left in the width and height attributes on the embedded video. I’ve noticed that removing them or changing the dimensions has no effect once fitivids is working.

    Is there any reason to leave in the width and height? Should they be set to a certain size as a backup?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      FitVids strips them out. I figure you should just leave the defaults in there because they probably come with correct aspect ratio to begin with. Actually, definitely leave them in there because FitVids uses them to determine the aspect ratio to begin with.

  21. User Avatar
    Permalink to comment#

    Excellent script. I got it working in Chrome and IE but not in Firefox.
    In FF it stops letting me re-size the page completely, any ideas? Thanks

  22. User Avatar
    Permalink to comment#

    I don’t know if this is the right place for this question, but here goes.
    I am using the twenty eleven theme and I am replacing the header images with a flash slider. I followed your tutorial I the slider will adjust, but it is not consistent with the area. meaning that if I change the browser sizer the slider updates like it should. But unlike in your screen cast where the youtube video stayed inside the area of the “entry-content”, my video is too big and as a result gets cropped. do you know which id or class should be targeted for the header? or does the system not work for sliders?

    thanks for any help,
    – Jon

  23. User Avatar
    Steve Vaughan
    Permalink to comment#

    Hi Chris, great video!

    I just had an issue with getting this to work and after some head-scratching, it looks like if you select ‘Enable privacy-enhanced mode’ on YouTube, the URL becomes http://www.youtube-nocookie.com

    Meaning fitVids won’t apply itself to the video. If anyone else has this issue, you can add an additional selector to the code, found at like 47.

  24. User Avatar
    Permalink to comment#

    Awesome thing and it worked. But if I’m posting a video of vimeo and YouTube on my Blogpage, it wouldn’t scale the YouTube ones. I don’t know, if this is a known problem or just me who did something wrong.

  25. User Avatar
    Permalink to comment#

    Finally! I tried multiple WordPress plugins (including the fitvids.js plugin) and none of them worked. Then I followed this video and biggidy-bam! Now I don’t have to go through all of my videos and put wrapper div’s around them. Thanks, Chris.

  26. User Avatar
    Permalink to comment#

    Awesome form Chris! It’s a shame theresn’t an easy way to wrap after the join – Hopefully someone will come along and find a way to put drag handles so that they can be put anywhere (eg sidebar) at will – maybe then would even would be able to subsist with just a call to fitvids.js.

  27. User Avatar
    Permalink to comment#

    Youtube ====> width=”100%”

  28. User Avatar
    Permalink to comment#

    You Rock!!! I was trying to fix my website after a new theme install,where i had to edit every post one by one..talking about a video website..with 1500 posts :) After i realized that the videos are not responsive :(

    You made my day after fighting with a website for 1 day…with your spoonfed method is just perfect!!!!!!!!!!!!!!!

    THANK YOU!!!!

  29. User Avatar
    Michael Hanson
    Permalink to comment#

    Man! Entertaining and working perfectly … even in my mess of wp-code. Thank you, Chris Coyier :-)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.