Grow your CSS skills. Land your dream job.

#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:

Comments

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

  2. Permalink to comment#

    Thanks for sharing. This is gonna help tons!

    I always learn (and laugh a bit) while watching your tutorials.

  3. Bert de Vries
    Permalink to comment#

    Very nice. Thank you.
    Did miss the ‘bye’ at the end though :)

  4. JJMeher
    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!

  5. Permalink to comment#

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

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

  7. 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

  8. Chris,

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

    https://wordpress.org/extend/plugins/screencastcom-video-embedder/

    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!

  9. 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!

  10. Permalink to comment#

    *style = smile with your style.

  11. Works Great! Thank you.

    First time i have seen that WTFPL license.

  12. 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.

  13. Eric
    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>
    <script>
      $(document).ready(function(){
        // Target your .container, .wrapper, .post, etc.
        $("#banner").fitVids();
      });
    </script>
    

    And in index.php:

    
    <div id="banner">
    			<iframe id="video" src="http://player.vimeo.com/video/XXXXXXXX?title=0&byline=0&portrait=0&color=EA1D25&autoplay=1&loop=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    		</div>
    

    And for the CSS:

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

    Thanks!!!

    • Eric
      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!

  14. 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/

    • 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!!!
      Shelley

  15. Permalink to comment#

    you made me laugh out loud with this post at least 3 times. thanks!

  16. Permalink to comment#

    Thanks for making me choke on my apple. Oh yeah, and the tutorial too.

  17. Jerry
    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?

  18. Marshall
    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.

  19. 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!!
    Shelley

  20. 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!!!

    http://michaelprovenza.com/index.php/about-provenza/

    Shelley

  21. Rob
    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!

  22. Permalink to comment#

    Great stuff and hilarious! I actually got it to work as well!

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

  24. Bucur
    Permalink to comment#

    i love your worck man.Ten plus :X

  25. 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?

    • 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.

  26. 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

  27. Permalink to comment#

    hello,
    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

  28. Ryan Orrico
    Permalink to comment#

    Great stuff dude. Thanks!

  29. 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.

  30. 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.

  31. 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.

  32. eburnett
    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.

  33. Anonymous
    Permalink to comment#

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

  34. 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!!!!

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".