How to Remove Black Bars from Your Video

Have you ever seen an online video that looks like this?

Black bars appear on video, both on TV and online, when the aspect ratio of the video and where it lives on the web don’t match up. What are aspect ratios, you ask? Great question!

An aspect ratio is the proportional relationship between a video’s width and height. And while that concept may sound pretty simple, it can actually be surprisingly easy to mess up.

Why black bars appear

Before the days of HD television, videos followed a 4:3 aspect ratio everywhere, but the standard is now 16:9 widescreen. So, what happens when you watch a video created in the old aspect ratio of 4:3 on a screen that’s made for 16:9? You guessed it. Black bars.

This same principle applies to video embedded online, however unlike a TV, you actually have the power to make these eyesores disappear! Let’s break it down.

Look for your video’s aspect ratio

First and foremost, you need to find the aspect ratio of your video. In order to eliminate the black bars, you need to figure out where the mismatch is between the aspect ratio of your video and the container it lives in.

You can find the aspect ratio of your video by looking at the video file itself. Just right click on the file and navigate to “get info” on a Mac, or “properties” on a PC. Here it will tell you the exact pixel dimensions of your file.

If your video’s dimensions are any of the following, then you should be good to go on most platforms on the web.

• 640 x 360 (360p SD)
• 960 x 540 (540p SD)
• 1280 x 720 (720p HD)
• 1920 x 1080 (1080p HD)
• 3840 x 2160 (4K)

Calculating aspect ratios

Math is hard. That’s why we recommend using a 16:9 calculator that will help you determine the correct dimensions for your video’s aspect ratio when you’re embedding. For example, if you’re embedding a video into a container that is 656 pixels wide, how on earth will you know what the height is supposed to be without trying out a hundred numbers before getting it right?

That’s why we’ve created a little aspect ratio calculator to do just that!

If you’re embedding a video into a blog post, for example, and you want the width of the video to match the text on the post, plug in your ideal width into this calculator, and you’ll get the appropriate height for the video. No more black bars for you! If your videos are hosted on Wistia, you can simply change the width on your embed and we’ll calculate the height for you.

Warning: When playing around with your video’s aspect ratio, don’t just add 10 pixels to each number, for example. That will not keep your video in 16:9, though it is certainly tempting (and seems logical) to do so. Instead, trust the calculator to do that hairsplitting math for you!

And while 16:9 is perfect for most instances, there are a number of places online, specifically on social media platforms, that require unique aspect ratios.

Aspect ratios for social media

The easiest way to make sure you’re not seeing black bars is to upload the proper aspect ratio to the platform you’re working in. In most cases that is going to be 16:9, but some newer social media platforms cater to many different types of video formats. Instagram, for example, is a great place for both square video or vertical video — square for the normal feed and vertical for Instagram Stories.

Here’s a quick breakdown of all the ideal aspect ratios for major social media platforms:

• Facebook: 16:9 or 9:16 (max upload 4k - 3840 x 2160)
• Instagram: 16:9 or 9:16 (max upload 1080p)
• Twitter: 16:9 (max upload 1080p)
• Snapchat: 9:16 (1080 x 1920)
• YouTube: 16:9 (max upload 4k - 3840 x 2160)

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.

Here are a few of the more common situations where we see black bars:

• Beware of third-party plugins. If you’re 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. Sometimes videos can be “automatically” resized, so you’ll want to keep an eye out for that!
• Responsive video for the win. In this day and age, you want your site to be as mobile-friendly as possible — that goes for videos, too. Make sure your videos are responsive so that they can adapt to screens at varying widths. If you’re a Wistia user, never fear, our player is oh-so responsive.

Goodbye to black bars

The moral of the story is, black bars are not pleasing to the eye. They can tarnish the experience for the viewer, and no one wants that. Let’s use the power of math and the internet, and rid the world of black bars once and for all. The internet will be a slightly more beautiful place because of it!