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.
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.
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
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.
Next, we absolutely position the video element so that it takes up the full width and height of the wrapper.
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%.
We no longer need to worry about padding-top for the video player chrome since modern video players now use an overlay.
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.
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:
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.