Recently I’ve watched the Chernobyl miniseries on HBO GO. It had this somewhat unusual ratio of 2:1 and the site tried to squeeze it into 16:9 portion of the screen. As with 21:9, this resulted in windowboxing and a video smaller then it should be. Unfortunately my previous script could not fix it, but with a few tweaks it was easy enough to make a new one. Obviously, before I could enjoy the series, I had to write a new script.
The black rectangle represents a 21:9 screen, the red rectangle is the 16:9 area used by HBO GO and finally the blue rectangle is the area where a 2:1 video gets displayed. This means that if I want to use more of the screen for 2:1 video, I need to compensate for the difference between 2:1 video and the 16:9 area that HBO GO intends to use. So the question is, how much do I need to upscale the video.
(16/9) * x = 2/1
(16/9) * x = 2 | / (16/9)
x = 2 * (9/16)
x = 18/16
x = 112.5%
As before, I also need to offset the video to get rid of the upper black bar.
Let H be the height of the screen, h the height of 2:1 video squeezed into 16:9 area and b the height of a single black bar.
We know that to make the image fit the screen height, we need to multiply it by 18/16. So we are trying to inverse the downscaling operation that was already done to the video. This means that that the two heights are related by an inverse ratio.
h = (16/18) * H
The difference between those two heights is the area occupied by the black bars and since there are two of those, the height of a single black bar is half of this number.
b = (H – h) / 2
b = (H – (16/18) * H) / 2
b = H * (1 – (16/18)) * (1/2)
b = H * ((18/18) – (16/18)) * (1/2)
b = H * (2/18) * (1/2)
b = H * (1/9) * (1/2)
b = (1/18) * H | / H
b / H = 5.(5)%
This means we need to offset the image vertically by roughly 5.55%.
After changing the numbers in my old script, the new one looks like this:
javascript: (function(){ var video = document.body.querySelector('.video-js .vjs-tech'); if (video.getAttribute("style") == null) { video.setAttribute("style", "height: 112.5% !important; transform: translateY(-5.55%) !important;"); } else { video.removeAttribute("style"); } })();
As with the previous script, I recommend adding it to your browser as a bookmarklet. Just create a new bookmark, paste the code into the url/address field and click on it whenever you want to watch a 2:1 video on HBO GO and you have a screen that has ratio wider than 16:9 (in my case 21:9).
smallhax 