FitVid.js allows you to embed videos from YouTube, Vimeo, and several other third party services on your responsive website and have them resize correctly along with the rest of your content. The technique makes use of JavaScript that scales your video to fit to 100% of the width of its container. Here's how to set it up in Drupal 7.


Download the FitVid.js files from GitHub.


Create a new JavaScript file to include in your template files. This file will just be a jQuery snippet that will call the fitVids() function when your page loads. I named mine f.js and It should look like this:

(function($) {
    $(document).ready(function() {


Upload both jquery.fitvids.min.js and f.js to your theme folder.


Include the JavaScript files in your theme by editing your .info file. You should add these two lines to the bottom:

scripts[] = jquery.fitvids.min.js
scripts[] = f.js


Now that the JavaScript files are in place, just wrap your videos in a div that has the class video-container. The JavaScript function will scale your video to fill 100% of the width of the parent element no matter what the browser size is. Your video embed code should look something like this:

<div class="video-container">
    <iframe src=";byline=0&amp;portrait=0&amp;color=ff9933" width="760" height="428" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Don't forget to clear your cache if you've minified and aggregated JavaScript in your Performance settings.