Recently I decided to give HBO GO a try, because they had a movie available that I wanted to watch. As an owner of an ultrawide monitor, I was a little disappointed when I find out that the movie was in 16:9 (while even DVDs tend to be in 21:9 those days).
However the next movie I watched “Wreck-it Ralph”, aside from being pretty great, was actually in 21:9. However, a new problem emerged when watching. The aspect ratio might have been correct, but now I had to deal with windowboxing.
It appears HBO GO aims to deliver 16:9 content, so a 21:9 movie will be letterboxed (ie. black bars will be added to the video). Combined with the vertical black bars that occur when you display 16:9 content on 21:9 screen, we end up with a thick black box around the movie and not all of the screen being used for displaying it.
Thankfully I use HBO GO in a browser and the way a webpage is displayed can be easily adjusted.
The video player is styled to take all available space
If I were to increase the height of the video I could make it fit the width of the screen and hide horizontal black bars. So it’s time for some math.
I have a 3440×1440 monitor and a 16:9 1440p screen resolution would be 2560×1440.
I need to find out how much I need to increase the size of the video to make it fit the width of my screen.
2560 * x = 3440
x = 3440 / 2560
3440 / 2560 = 1.34375
If I increase the height to around 134% the video should fit the width of the screen, but the bottom of the video is now cropped, because the black bars have also increased in size. So now, I need to move the video up.
We can calculate the new height of the video.
1440 * 1.34375 = 1935
Check how it differs from the height of the screen (this is the amount of space the black bars take).
1935 – 1440 = 495
We need to offset the video by the height of a single black bar, so we divide it by 2.
495 / 2 = 247.5
If we were to offset the video by set amount of pixels, it would look wrong if window resolution wasn’t exactly 3440×1440 (ie. window mode or different screen resolution), so we translate it to percentage.
247.5 / 1935 = 0.1279…
Note, this is in relation to the new video height (1935) and not the original video height (1440).
So, I should be able to fix the windowboxing by adding following inline css to the video element.
height: 134.375% !important; transform: translateY(-12.79%) !important;
Adding this as inline css and using !important helps preventing some other style from overthrowing our change and sure enough, it works.
The only thing that’s left is adding some way to activate\deactivate this hack. Since we only want to apply it to some movies, adding it automatically to every page is a bad idea.
Another problem is that HBO GO appears to work like a single page application, so a user script (it generally runs once after you loaded a page) would require some extra work. Not to mention integrating the script with HBO GO ui would be a hassle.
A simple bookmarklet script for activating\deactivating the 21:9 hack, could look like this:
Note that this works with the version of HBO GO available in my country and might not necessarily work elsewhere (or might require slight changes). Also, in Firefox I can simply copy the bookmarklet code into a bookmark, but it might require some encoding in another browser.