#103: Integrating FitVids.js into WordPress

by: Chris Coyier

Nov 2 2011

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:

Running Time: 20:58

Download Video File

Subscribe to The Thread

Matt Seymour

11/02/2011

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

Reply ↓
Jacob

11/02/2011

Awesome video as usual, Chris!

One thing I’d point out to people: If you’re going to do this with the 2011 theme, make sure to copy/duplicate the theme first. Otherwise, if you update the theme later on, all of your changes will be lost.

Also, you can change that functions.php jQuery loader script to load jQuery in the footer by changing the last parameter to “true”, which tells the enqueue_script to load in the footer at wp_footer();

Reply ↓
David B.

11/02/2011

Thanks for sharing. This is gonna help tons!

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

Reply ↓
Bert de Vries

11/02/2011

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

Reply ↓
JJMeher

11/02/2011

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!

Reply ↓
Nicolas Messer

11/03/2011
Thanks for the screencast Chris. Here’s the code from the function.php file we used in a recent project. It’s basically doing the same thing you mentioned in the video but we are actually registering the script with WP for later use with the wp_enqueue_script function.

Also, if you don’t specify the last number of the jQuery version it will automatically pull the latest point version number for the mentioned version.

And as some already mentioned before, there’s the last variable in both the register and enqueue script function that will load the script in the footer.
```
/* JQuery from Google CDN */
function crc_google_jquery() {
	if (!is_admin()) {
		wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js', '', '1.6');
        wp_enqueue_script( 'jquery' );
   	}
}

/* Load FitVids */
if ( !is_admin() ) {
	wp_register_script('fitVids', get_bloginfo('stylesheet_directory') . '/js/jquery.fitvids.js', '', '1.0' );
  	wp_enqueue_script('fitVids');
}

add_action('wp_head', 'crc_fitVids');

function crc_fitVids() { ?>
	<script>
        $(".container").fitVids();
      </script>
< ?php }
```
Thought the extra jQuery file was an interesting idea...something I certainly will look into doing more.

Reply ↓
Alex

11/03/2011

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

Reply ↓
Tanner Nelson

11/04/2011

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

Reply ↓
Lane Weaver

11/20/2011

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

Reply ↓
John S. Richards

12/03/2011

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!

Reply ↓
Rich

12/07/2011

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!

Reply ↓
Rich

12/07/2011

*style = smile with your style.

Reply ↓
bradthomas127

12/10/2011

Works Great! Thank you.

First time i have seen that WTFPL license.

Reply ↓
Bryan

12/13/2011

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.

Reply ↓
- Chris Coyier
  
  12/13/2011
  
  I just upgraded and tested default theme and FitVids is still needed.
Eric

12/21/2011
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!!!

Reply ↓
- Eric
  
  12/21/2011
  
  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!
Nicolas messer

12/23/2011

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/

Reply ↓
rachel

01/19/2012

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

Reply ↓
Paul Mist

01/20/2012

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

Reply ↓
Jerry

01/31/2012

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

Reply ↓

Speak, my friend

Notify me of follow-up comments by email.

Notify me of new posts by email.

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:

You can use basic HTML
When posting code, please turn all
< characters into <
If the code is multi-line, use
<pre><code></code></pre>