Do you own an UltraWide screen? If so, the first thing that will start bothering you, will be the videos that you stream from the Web services!
You will notice the black bars the videos.
It all depends on the aspect ratio of the video. Whether you play the video with 4:3 or 16:9 aspect ratio, it will not look good on 21:9 UltraWide aspect ratio screens. You can find some videos in 21:9 aspect ratio too, but it’s not that common.
Nowadays, you can even see many videos on YouTube having 21:9 aspect ratio not rendered properly. For example:https://www.youtube.com/watch?v=LH4Y1ZUUx2g
If you make this video full screen at 21:9 monitor, you will see a disaster. Black bars on both X and Y axis.
Maybe video streaming services should allow creators a feature, to upload different rendered outputs for different aspect ratios, but I guess that’d be too much work for the creators.
If you take a look at the Chrome, Firefox, Opera, Edge extension/add-ons Store, you can already find some extensions that can help you to solve the aspect ratio problem for UltraWide screens. What those extensions do, behind the scenes, is not a science. They simply zoom-in the video, by making higher width/height dimension, so the Y axis will be cropped to some proportion, where as X axis will then fill that unused space.
Since UltraWide screens are WQHD (1440p) resolution and not 4K, playing a 4K or 8K video and using such upscale functionality will look perfectly on your UltraWide screen. When upscaling is not an option, there’s always a stretch option, which might look a bit weird in many cases, but still saves you those cropped portions of upscale.
Existing Extensions
I don’t want to bash other developers of the extensions with such purpose, but there’s just too much code duplication, extra libraries as dependencies, bugs, etc. The reality is, it can be solved much simpler and with a lot less code. Providing one too many options is also the case in some of those extensions and instead of making it dumb, small and simple, they want to implement too many options and overcomplicate things for the end-user.
The main and most important problem with many, if not all of the extensions of this kind, is that they do not work across every single video streaming website. Aside, assuming that neither is working with embedded videos.
Introducing UltraWideo
The browser extension that I developed for personal use and to help other consumers of UltraWide screens as well.
The UltraWideo extension is cross-browser and currently works with Chrome and Firefox, but I also made a submission to Opera and it’s on the way of approval. Opera is so slow with reviews… Edge extension will be supported, just as soon as they implement object-fit CSS property for video elements. (might never happen)
I’ll make a list of links below, if you’d like to take a closer look or perhaps use the extension.
To break it down, it’s dead simple. It has only 3 options!
UltraWideo Extension — Settings
- Pause extension, will destroy the event listener and will not work on any video elements, until you decide to toggle that option off.
- Upscale/Stretch are the two modes. You can enable only one of them and you cannot disable both. Modes are responsible for how the video will look.
What makes it different than the alternatives?
I’ll try to answer this as simple as possible…
- Tiny extension file size
- Minimal popup design
- Requires only
storagepermission to read/write the settings - Single cross-browser extension
- Relies on a single CSS property
object-fit - Doesn’t use JavaScript for the video width/height calculations
- Has zero dependencies
- Works with video streaming services
- Works with embedded videos
- Works with multiple videos on the same page
No other extension alternative can compare with UltraWideo and that’s a fact!
Concluding
I suggest all UltraWide screen consumers to try out my extension and review it on the store where you download it from, whether it’s a Chrome, Firefox or upcoming Opera… I bet that you will uninstall any alternative that you might be using right now and switch over to UltraWideo.
I appreciate any kind of support. Least you can do is help me out on GitHub by reporting bugs or helping me to write tests.
Also, if you know how to build a Safari extension, have any kind of tutorial or useful pointers, please do let me know in the comments or via any profile listed below. I want to make this possible for Safari consumers as well.
Until next time
If you enjoyed this and learned something new, please share some love.To do so, tap the clap icon 👏 or hold it for more claps! 👏👏👏
Much appreciated. You’re the best!
List of profiles where you can follow me and my work:GitHub, Twitter, Medium, Instagram, Facebook