How To: Avoid Black Bars Around Your Video

We’ve all seen it on “other people’s” websites: a beautifully produced video, embedded on a page. But what’s this? Why are there those pesky little black bars either on the top and bottom or the two sides?  Nothing screams “I don’t know what I’m doing” like seeing black bars around your video. Not to mention the huge waste of real estate.

The reason you get these black bars is because your player and your video are not the same aspect ratio.   In today’s day and age, most video is shot in high definition (HD). HD footage uses a 16:9 aspect ratio - what is known as “widescreen” which also includes resolutions known as 4K, 1080, and 720. That 16:9 ratio means that for every 16 pixels you go wide, you have to add 9 pixels to your height. Before the HD revolution, we shot video in Standard Definition (SD) which used a 4:3 aspect ratio. All this means is that for every 4 pixels that your video is wide, it is 3 pixels tall.

If you play a 4:3 SD video in a 16:9 player, you’re going to have black bars on the sides. In fact, if your player and video are even 1 pixel off in either the height or width, you’ll see black bars around your video.

The good news? This complex problem of pixels and ratios is actually very easy to solve. If you’re watching a video- someone’s else’s video on someone else’s website, of course - that has black lines around it, you’ll know that they simply need to adjust the player size to match the aspect ratio of the video itself.

We’ve provided a simple spreadsheet that does the hard computational work for you. Simply enter either the height or width of your video, and it will tell you what the other dimension should be in order to maintain a 16:9 aspect ratio. That translates into no black bars.

Lastly, if the player you are using has not been configured to be responsive, which means that the player automatically resizes for the device on which you’re watching it, you will want to enter the exact size from the spreadsheet. (Note: Smart players need to be configured to be responsive. The Brightcove Player is automatically responsive, but can be set to a fixed height and width if desired)

Setting player aspect ratio is as simple as that! When you have sized your player correctly, all your black bars should be out of your life.

I hope you find this little tip helpful in keeping your videos looking professional once they have been published to your website or anywhere else.