Responsive Video Size With CSS

by: Preston Schmidt

Responsive Video That Maintains Aspect Ratio

Along with everything else in our responsive design layouts, we want our video to be responsive as well, and that's actually pretty easy to do. From embedded videos from YouTube, to iframe content and more, with a little extra markup, and some simple CSS styling you can transform any difficult piece of content into a responsive piece of content. And even this principle does not apply exclusively to video, although often that can be the most troublesome part of responsive design.

If you've ever tried to work with an embedded video from YouTube, Vimeo or some other video sharing network, you may have noticed that once you start playing around with heights set in percentages, it can go a little wonky and not look exactly the way it should. Either the video collapses, or maybe the aspect ratio gets distorted... It can turn into a real headache!

CSS to the Rescue

With a little CSS and yes... a little math... you can make any video completely responsive on the fly. What we will do is build out and style a containing div, and add a few more lines of style to the inner content so that it works everywhere. Let's get to it.

First, start with the containing div:

<div class="videoWrapper"></div>

Next, add your video markup inside. (Here we are using HTML5 markup with the Video Tag):

<div class="videoWrapper">
     <video controls>
       <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          <source src="movie.flv" type="video/flv">
          Your broswer does not support the video tag
     </video>
</div>

Note: It is very important to use multiple video types when using the video tag to ensure your video will be supported by various browsers.

Now for some CSS:

.videoWrapper { 
     position: relative;
     padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ 
     height: 0;
     ​width: 100%; /* You can set this width to whatever suits your needs */     
     margin: 0 auto;
}

That's for the videoWrapper, now we'll use a descendent selector in our CSS to target the video tag inside:

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

The Mathemagic of Style

The real magic happens with the .videoWrapper height and padding-bottom values. We set the height to 0, then give it a bottom-padding equal to the difference of the aspect ratio. How do we find that value? It's easy with that little bit of math I mentioned. 9 divided by 16 is equal to 0.5625, which we can translate to 56.25%. And that holds true for all aspect ratios: 4:3 is 3 divided by 4 which equals 0.75, or 75%. 2.39:1 is 1 divided by 2.39 which equals 0.4184, or 41.84%. So simple!

Another example of how this can come in handy is with those pesky Google Maps iframes; like I said it doesn't have to be a video. Images, video, iframes, or even empty space, just be sure to target the right element with your descendent selector in your CSS.

So the final markup looks like this:

/* The CSS */
.videoWrapper {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
     height: 0;
     width: 100%; /* You can set this width to whatever suits your needs */
     margin: 0 auto;
}

.videoWrapper video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
/* The HTML */
<div class="videoWrapper">
     <video controls>
       <source src="movie.mp4" type="video/mp4">
     <source src="movie.ogg" type="video/ogg">
     <source src="movie.flv" type="video/flv">
     Your broswerdoes not support the video tag
     </video>
</div>

Go ahead and give it a try, you'll love it :)

Google+ Profile Here

Outlier

Video, Web, and Design Agency