#103: Integrating FitVids.js into WordPress

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

Download Video
(Only MVP Supporters can download original high-quality recordings for offline viewing.)

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: