Responsive web design is quickly becoming the norm, and for good reason. At the same time HTML5 video is quickly becoming a reliable alternative to embedded flash video. Unfortunately, at times it can be tricky to make video elements play nice with responsive design. Many people have taken to JavaScript based solutions such as FitVids.js. This puzzles me because it is not very difficult to make videos behave well in responsive design using only CSS. The technique I am going to show you works well with the HTML <video> element (including Video.js), as well as embedded flash videos from sites such as YouTube and Vimeo. It works in all modern browsers as well as Internet Explorer 7+.

Embeds, Objects, and iframes

This section of my post is based primarily on a post over at A List Apart. Basically, you create a wrapper div which has the same aspect ratio as your video, and then you set the height and width of the embedded object to 100%. Your HTML looks like this:

<div class="video-wrapper">
    <iframe src="http://www.youtube.com/embed/videoid" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

And you will need some CSS like this:

.video-wrapper {
    position: relative;
    padding-bottom: 74.25%; /* 4:3 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

iframe,object,embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Notice that we removed the height and width declarations from the iframe tag when we embedded our video. This is because we wanted to set them to 100% in our CSS. Setting padding-bottom to 74.25% on our .video-wrapper gives it a 4:3 ratio. Try 56.25% for 16:9 or 50% for a 16:10 ratio. Since the wrapper is relatively positioned, we can then set the iframe (or embed) to absolute position of 0,0 within that box and make it stretch to fit the whole box. Also note that the video-wrapper element will be 100% of the width of its parent element, so if you want to limit its width you will need to place it inside a second wrapper.

HTML5 Video

Making HTML5 video responsive is, in theory, easy as pie. Just add the following to your stylesheet:

video {
    max-width: 100%;
    height: auto;
}

If you’ve done much responsive design at all this probably looks familiar, as it is a pretty common way to do responsive images as well. Unfortunately it isn’t really practical yet to just use the <video> tag on its own. Instead we use JavaScript libraries with built-in fallbacks, such as Video.js. These libraries are wonderful, but they also make it a little more complicated to make our videos responsive. I’ve only tested my code here to work with Video.js, but the principles should be the same for other libraries. All we really need to do is use the same method that we used for our embeds and iframes earlier with a few added tweaks. Our HTML will look something like this:

<div class="video-wrapper">
    <video class="video-js vjs-default-skin" height="100" width="100" controls poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}" id="video-one">
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />  
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />  
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    </video>
</div>

Notice that we have once again put a wrapper around our video. The CSS looks like this:

.video-wrapper {
    position: relative;
    padding-bottom: 74.25%; /* 4:3 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

video,.videoWrapper,.video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-js, img.vjs-poster {
    width: 100% !important;
    height: 100% !important; //these need !important because IE wants to set height/width to 100px
    max-width: 100%;
}

The only really difference from our embed code is an added block of CSS at the end where we set the height and width of a few of our Video.js element to a 100%. We have to use !important here because otherwise Internet Explorer wants to set their height and width to 100px instead of 100%.

All Together

Our final CSS looks like this:

.video-wrapper {
    position: relative;
    padding-bottom: 74.25%; /* 4:3 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

iframe,object,embed,video,.videoWrapper,.video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-js, img.vjs-poster {
    width: 100% !important;
    height: 100% !important; //these need !important because IE wants to set height/width to 100px
    max-width: 100%;
}

See a demo over on Codepen.

Looking for support for your responsive project or HTML5 videos? Nose Creek Web Design offers affordable solutions for any need.