Video is more prevalent on the web than ever before. Yet, people rarely mention video when they talk about responsive design. What is responsive video and why don’t we hear more about it?

In order for a video to be responsive, the video should always expand to fill the width of its container while maintaining its original aspect ratio. We want to avoid static sizing that can break page layouts, distort the image, or display black bars around the video.

We probably don’t hear about responsive video often because video is complicated. However, we can simplify things by ignoring file types, video and audio codecs, the video player, and the video source for this discussion. What we are left with are the same concerns for responsive images: aspect ratio, quality, and file size.

Common Issues

Specifying a fixed width and height for a video can cause layout issues. The section below is split into two columns, as seen by the blue and black boxes. The video in the blue box has a fixed width and height, which causes it to spill over into the adjoining content area when the width of the blue box is less than the video width.

Another drawback of specifying the dimensions of a video is the black bars that display when the dimensions do not match the source aspect ratio. Black bars at the top and bottom of a video, called letterboxing, are common on videos with a widescreen (16:9) source that have been formatted to fit a 4:3 aspect ratio. With most web video players, you will see letterboxing when you increase the height of an embedded video without changing its width. The player adds these bars to prevent distortion of the video image.

Black bars at each side of a video, called pillarboxing, are added to fit a 4:3 aspect ratio video in a 16:9 player. You will see pillarboxing in embeded video when you set a wider aspect ratio than the original (i.e. by increasing the width without adjusting the height accordingly).

Black bars on all sides of a video are called windowboxing. This happens when the source video is pillarboxed to fit a 4:3 aspect ratio then played back at 16:9.

JavaScript Isn’t the Answer

There are several approaches we can take using CSS, JavaScript, or a combination of the two. Most articles I’ve read on the topic recommend using JavaScript to try and handle all possible scenarios. This type of blanket approach made sense when we needed to support many different browser versions with little or no support for modern web standards. Code started getting messy fast when we had to use several conditionals to check if the user agent was Internet Explorer and implement several CSS workarounds for various browsers. Fortunately, that is no longer the case.

Another justification for using JavaScript is that publishers may not be tech-savvy enough to do more than copy and paste a video embed snippet. If someone is not comfortable manually adding a line of HTML to the video embed code, Embed Responsively will do it for them. So much for that argument!

As a content provider, you are focused on getting the content to your audience with as few interruptions as possible. Adding another JavaScript library or additional code to download is rarely the best solution. Living in large cities in developed nations, we get accustomed to fast internet speeds. Not everyone is so lucky. According to the FCC, nearly 34 million Americans lack access to fixed broadband internet access. Videos are much larger than text content or images and will place the highest demand on bandwidth. The impact is even greater for mobile devices which can be painfully slow when you roaming on cellular data. Mobile processors are much slower than desktop computers, so we want to limit the amount of script executions so they can render the webpage instead.

From the user’s perspective, the content (video in this case) is more important than the technology used to get the content. We should do all we can to limit the amount of bandwidth and processor used to display the page. The faster the page loads, the faster the video player can download the first chunk of video, render a preview, display metadata (video length, title, etc) and begin buffering. If you host your videos on a third party site such as YouTube or Vimeo, their video player will handle choosing the best quality for the user’s available bandwidth.

A Good Solution: CSS

The CSS-only approach is much better for performance. If you are in control of your videos and know they will only be one aspect ratio, your browser will only have to parse a very small amount of CSS. It is also much more predictable, less error prone, and you don’t have to worry about the video snapping to size after the JavaScript finishes loading.

We have implemented our responsive video below. Readers using a personal computer can resize the browser window to see how the video is resized when the container width changes. If you are reading on a mobile device, switch between portrait and landscape views and notice how the video dimensions change.

This solution was pioneered by Thierry Koblentz in his 2009 article Creating Intrinsic Ratios for Video featured on A List Apart. We start by wrapping the video element with a div. The div is a block level element, so it will dynamically expand to fill the full width of its container.

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/PAKAVc3_9NU" frameborder="0" allowfullscreen></iframe>
</div>

Next, we absolutely position the video element so that it takes up the full width and height of the wrapper.

.video-wrapper {
  position: relative;
}

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

Finally, we set the height of the wrapper to 0 and add padding-bottom based on the aspect ratio: padding-bottom = width / height. So, for an aspect ratio of 16:9, we divide 9 by 16 and get 0.5625 or 56.25%.

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

We no longer need to worry about padding-top for the video player chrome since modern video players now use an overlay.

Limitations

This approach is very clean and easy to implement if all of your videos are same aspect ratio. However, if you are using videos with different aspect ratios, you will need a unique class for each. Thierry also provided us with a good solution for this: break out the padding-bottom into a separate class based on the aspect ratio.

.wide-screen {
  padding-bottom: 56.25%;
}

.standard {
  padding-bottom: 75%;
}

<div class="video-wrapper wide-screen">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

<div class="video-wrapper standard">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

Summary

When implementing responsive design, don’t forget to make your videos responsive too! After seven years, using CSS is still a great solution for responsive videos. Thankfully it is even easier to implement with newer video players and modern web browsers.

The simplest solution looks like this:

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

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

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

We no longer need to worry about black boxes around our video or broken page layouts!

This is a lightweight solution that will work for all modern browsers, no matter what devices your audience is using.

Cantina partnered with Cisco to improve the customer video viewing experience on across all devices including computer or mobile. Because the interfaces for web and mobile were developed separately the user experience is disjointed across platforms. Users get a different video experience depending on how they access the information. In order to improve the customer’s video experience, we reviewed the current state of video consumption, created wireframes using best practices in interactive design and provided recommendations on next steps and back-end technologies.