Have you ever seen an online video that looks like this?
Ugly black bars appear on videos, both on TV and on the web, when the aspect ratios of your video and the housing it lives in don’t match.
Why black bars appear
The issue is most clear in the case of TV, so let’s start there.
Prior to HDTV, televisions and the video created for them followed a 4:3 aspect ratio. With HDTV came a new standard of 16:9. What happens when you watch a video created at the old aspect ration of 4:3 on a TV that is 16:9? Black bars show up on either side to fill the extra space
The exact same thing happens when you try to stick a web video with one aspect ratio into a box (a.k.a. a container) with a different ratio. There is a key difference, however. Unlike a TV, you (or the person adding video to your site) get to dictate the size of the container online. Because of this, you should almost never see black bars on your web videos.
How to get rid of them
To eliminate the black bars around your video, you need to figure out where the mismatch is between the aspect ratios of your video and its container.
You can find the aspect ratio of your video by looking at the video file itself or in your video hosting platform. In the four examples below, all of the videos are different sizes, but the aspect ratio of each is the same – divide the width by the height and in each case you get 1.77, which is 16 / 9, or a 16:9 aspect ratio.
When these videos are embedded on your website, they don’t have to be the same size as the original file, but they do have to have the same aspect ratio. For example, we like videos on our blog to be 610 pixels wide. That means the container for a 16:9 video on our blog should be 610 x 343.
Other common issues that result in black bars
Black bars can show up in a ton of other situations, but the root cause is always the same – aspect ratio mismatch. If you can find and correct the mismatch, the bars will disappear.
A few of the more common situations where we see black bars are:
Third party plugins that “automatically” resize videos: Plugins such as flexslider make it easy to add videos to your site, but they also will occasionally affect aspect ratios. If you are using any third party plugins for your site, confirm that the aspect ratio of the video as it appears on your site matches your original embed code.
Responsive video implementation: Making your site mobile-friendly and responsive can also result in videos with black bars at different screen widths. The solution here is to make your video responsive as well, with something like Wistia’s own Video Foam tool.
Social bar or other elements within the video container: If you use Wistia you’re probably familiar with the Social Bar feature that adds social buttons below your video. Because this feature (or any feature similar to it) is included in the embed code, the aspect ratio of the embed is now different from the original video, by design. In this case, if you change the embed code to match the original video ratios, you will again end up with black bars.
Conclusion
Black bars are ugly. They can’t be avoided on TV because our screens are a fixed aspect ratio, but on the web, we have full control, so no excuses! Let’s exert that control and rid the world of black bars. The internet will be a slightly more beautiful place because of it!
Authored by Ezra Fishman,Marketing Director at Wistia