UltraWideo: Cross Browser Extension to Fix Video Black Bars

Nenad Novaković
HackerNoon.com
3 min readJul 29, 2018

--

While watching your favorite show, the black bars, both horizontal and vertical, can diminish your joy.

Have you ever experienced this problem?

Depending on the screen resolution and video aspect ratio, they can be on all sides. I found it distracting and problematic, which is why I built this cross-browser extension — UltraWideo.

Demonstration of Black-Bars on YouTube platform for the ultra-wide screen. Video by Jacob + Katie Schwarz.

This add-on will work in all browsers with Webkit, Blink, or Gecko engine. It covers all the browsers, except Internet Explorer, Safari, and the old version of Edge. The extension has been fully tested on the following browsers and is proven to be fully functional:

Browser extension to the rescue!

This add-on solves a real-world problem! Not only for ultra-wide screens, but for all displays in general. The problem is known as black-bars. Usually, black-bars appear only vertically, when it gets intentionally rendered to have a cinematic look.

However, black-bars can also appear horizontally, and that’s when the output can’t fit the screen resolution on which the video is playing.

How to install UltraWideo add-on?

Depending on your current browser and its engine, make sure to install the add-on’s latest release from the corresponding store.

If you are using Firefox, which uses the Gecko engine, you can install UltraWideo as Firefox Add-on.

For all other browsers, they are either Webkit or Blink, and you may install UltraWideo from Chrome Web Store.

With this ultra-wide video extension, you can get rid of black bars and enjoy videos in fullscreen the way it should be.

How does it compare to the alternatives?

The UltraWideo is the only extension on the market that works on all streaming services. Not only that, you will be able to get the best out of each video from a specific platform, but it also works on all embedded videos on any website.

It isn’t a concern if there are many direct or embedded video players on an individual web page. The extension is intelligent enough to operate the video you place into a fullscreen without interacting with other players.

The plan is to make this the only add-on on the market that everyone will want to have in their browser’s tool belt.

There are many other alternatives, where none of them works on embedded videos. Almost all of them are working on a single or very few video streaming services.

What does it provide?

The extension offers intuitive but straightforward UI/UX. The options are split into three categories.

Master:
With only one switch available right now, the master switch controls the core functionality.

  • Pause — Immediately terminates all of the “expensive” operations that the extension uses internally (keyboard event listeners and DOM manipulations). Once activated, you cannot deactivate it via a shortcut, only manually via click.

Modes:
There are a few switches available in this category.

  • Normal — Restores the video to its original state. On Firefox for Android, this mode solves a browser bug.
  • Upscale — Scales up the video to the point where all black-bars are no longer visible.
  • Stretch — Similar to Upscale, but it distorts the video.

Upscale crops part of the content, depending on your monitor’s resolution, and Stretch mode makes the video distorted. Depending on the video material you are watching, you will need to pick a trade-off.

Shortcuts:
The extension comes with predefined shortcuts but can be configured easily to the desired keystrokes.

  • Toggle Pause
  • Toggle Modes

Feel free to watch this showcase video that I recorded, trying to explain each option and what it does.

You can upvote the UltraWideo extension on the ProductHunt.

If you are willing to contribute, look at the source code, or download the current development version, check the official repository.

On the other hand, if you find any issues or you have a feature suggestion, do not report it on the Chrome or Firefox store. Instead, go ahead to the official repository and create a new issue.

Leave a comment below if you have any questions.

--

--

Nenad Novaković
HackerNoon.com

Hi, my name is written above, but the artist within me is called dvL. I'm full-stack developer & designer, but also more than "just" that… 💻 🤘