Making videos responsive

The videos we're going to talk about are the videos that come inside our good old friend, the <iframe> element, such as videos from YouTube, Vimeo, Dailymotion, and so on. There are several ways to make videos responsive, some more involving than others. Let's break it down.

Responsive videos with HTML and CSS

YouTube is an amazing video service that makes life easier for everyone—video authors, as well as web designers and developers. The fact that YouTube takes care of the hosting of the video, the streaming, and the technological conditions of browsers that don't support Flash (iOS), or browsers that don't support the <video> tag (legacy browsers), is just awesome.

The first thing we need to do is create a container that will hold the video. This container is the one we're going to manipulate to give the video the width we want while maintaining its aspect ratio:

<div class="video-container"></div>

Then, we create a container for the video we're going to embed:

<div class="video-container">
   <div class="embed-container"></div>
</div>

Then we embed the video, which is inside the <iframe> element:

<div class="video-container">
    <div class="embed-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/vpRsLPI400U" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Ok, that's it for our markup. Now, let's tackle the CSS from inside out.

Let's give the <iframe> element a few properties:

.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Then, let's give the .embed-container wrapper some context:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px; /* This padding is only needed for YouTube videos */
    height: 0;
    overflow: hidden;
}

Now the <iframe> element will be positioned correctly and take up all the space of its parent container. The parent container will make sure the video is visible and anything sticking out of it will be hidden.

Tip

For videos with 16:9 aspect ratio, use padding-bottom: 56.25%;.

For videos with 4:3 aspect ratio, use padding-bottom: 75%;.

All we need to do now is define the width of the whole thing. We do that by adding a width to the outer container, the .video-container wrapper:

.video-container {
    width: 80%; /* This can be any width you want */
}

Responsive videos with jQuery

If you're a jQuery fan, this plugin is for you. It may also come in handy when you have to retrofit already published videos on your site, or if there are too many of them to update manually.

The plugin is called FitVids.js. It was developed by Chris Coyer and the guys at Paravel. Using FitVids.js is pretty straightforward. First, we need to download the FitVids JavaScript file from the following URL: https://github.com/davatron5000/FitVids.js/blob/master/jquery.fitvids.js

Then, we call jQuery and the FitVids.js files in the <head> of our document. Finally, we add a script at the bottom of our markup to call the fitVids function. That's pretty much all there is to it.

Tip

The actual file name of FitVids.js is jquery.fitvids.js. This is the file name we're going to see in the example.

Here's an HTML snippet with two videos within <iframe>, one from YouTube and another one from Vimeo:

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
    <title>Responsive Videos with: jQuery Using FitVids.js</title>
</head>
<body>
    <h1>Responsive Videos with: jQuery Using FitVids.js</h1>
    <main class="main-container" role="main">
        <h2>YouTube</h2>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/vpRsLPI400U" frameborder="0" allowfullscreen></iframe>
        <h2>Vimeo</h2>
        <iframe width="560" height="315" src="https://player.vimeo.com/video/101875373" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </main>
    <script>
        $(function(){
        //Look for all the videos inside this element and make them responsive
         $(".main-container").fitVids();
      });
   </script>
</body>
</html>

If you're curious about how FitVids.js modifies the DOM to make the videos responsive, here's the markup:

<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
    <iframe src="https://www.youtube.com/embed/vpRsLPI400U" frameborder="0" allowfullscreen="" id="fitvid0"></iframe>
</div>

Tip

Document Object Model (DOM): When you read, or hear, someone say modify the DOM, it basically means modify the generated HTML.

Here's a demo I created for this in CodePen: http://codepen.io/ricardozea/pen/9e994c213c0eeb64ccd627e132778a42.

Responsive videos with plain JavaScript

If you are not using jQuery or don't want any framework dependencies, but still need a simple JavaScript solution, the best option is to use a script developed by Todd Motto: Fluidvids.js.

Using it is very simple as well. First, we need to download the Fluidvids JavaScript file: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.min.js

Then, we need to call the fluidvis.js file in the <head> element of our document. Once we have that in place, we add a small script snippet at the bottom of our markup. That's it. The script will read through the markup, modify the DOM, and make any videos it finds responsive.

Tip

Make sure to always give a width and height value to the <iframe> element. Otherwise you'll see a blank space on the page.

Here's the HTML snippet you'll need for this to work:

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="js/fluidvids.min.js"></script>
    <title>Responsive Videos with: Plain JavaScript - FluidVids.js</title>
</head>
<body>
    <h1>Responsive Videos with: Plain JavaScript - FluidVids.js</h1>
    <main class="main-container" role="main">
        <h2>YouTube</h2>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/vpRsLPI400U" frameborder="0" allowfullscreen></iframe>
        <h2>Vimeo</h2>
        <iframe width="560" height="315" src="https://player.vimeo.com/video/101875373" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </main>
    <script>
        fluidvids.init({
            selector: ['iframe'],
            players: ['www.youtube.com', 'player.vimeo.com']
        });
    </script>
</body>
</html>

Here's the modified DOM:

<div class="fluidvids" style="padding-top: 56.2%;">
    <iframe src="https://www.youtube.com/embed/vpRsLPI400U" width="560" height="315" frameborder="0" allowfullscreen class="fluidvids-item" data-fluidvids="loaded"></iframe>
</div>

Here's a demo I created for this in CodePen: http://codepen.io/ricardozea/pen/fda7c2c459392c934130f28cc092dbbe

Third-party services to embed video

What can I say? All you need to do is point your browser to http://embedresponsively.com/ and select the tab of the video service you want to use. Let's choose Vimeo. Input the URL of the video you want to make responsive, press the Embed button, and voilà—the HTML and CSS that you need to use appears right below the example video.

Here are the HTML and CSS snippets produced by embedresponsively.com for a video with the well-known Dan Mall about RWD (it has been formatted for easier reading):

The HTML is as follows:

<div class='embed-container'>
    <iframe src='https://player.vimeo.com/video/101875373' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

The CSS is as follows:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

However, with the following snippets, the container of the video looks much higher than it should be. In order to make the preceding snippets work properly, we need to wrap the embed-container inside an outer container. Here are the amended markup and CSS.

The HTML is as follows:

<div class="video-container">
    <div class='embed-container'>
        <iframe src='https://player.vimeo.com/video/101875373' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
   </div>
</div>

The CSS is as follows:

.video-container {
    width: 100%;
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: red;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
     height: 100%;
}

The .video-container wrapper is what we manipulate in order to define any width we want while maintaining the aspect ratio of the video. Now, all we need to do is place the markup in our HTML document and the CSS snippet in our SCSS file.

Here's a demo I created for this in CodePen: http://codepen.io/ricardozea/pen/10262216eeb01fc9d3b3bedb9f27c908

Previous Chapter

Replacing 1x images with 2x images on the fly with Retina.js

Next Chapter

The Vector Formats