I am currently working on developing and maintaining the Chromecast Receiver app at Viki. For those of you who are not familiar with Chromecast, a Chromecast Receiver is a front-end app that runs on the Chromecast device making it possible for our users to display our content on their TV either through the mobile app or our site itself.
Recently, I had to fix a bug where our subtitle is cropped on the left and right side. This does not happen on all TV though, only the ones with Overscan mode on:
So what exactly is Overscan mode? If you’re like me who don’t watch shows on TV (I watch stuff but only on my laptops or tablets), you won’t be familiar with the Overscan mode. But in layman terms, Overscan mode actually zooms in slightly to the picture causing the extreme edges of the picture to be cut off. If you’re interested to know more about why some TVs do this, check out this article by Engadget.
video::cue selector. A quick search will tell you that the
video::cue selector only accepts certain properties so that won’t do since I was planning to add a padding around the subtitle or reduce the width itself.
Finding a Solution Through Intuition
Since I was running out of patience at that time, I decided to Google for a potential fix. I can’t remember what exactly was my search keywords but it leads me to this CSS file by Apple, Inc. There is one selector that caught my attention and it is the
video::-webkit-media-text-track-container. Through the descriptive and explicit naming of the selector, I had a strong gut feeling that this is a selector that I could work with (see, this is why descriptive naming is important).
Just to verify, I decided to search for official documentations on
video::-webkit-media-text-track-container but that didn’t yield any meaningful results except for this StackOverflow post and the ones that I can’t really work with. I decided to give it a go and try it out.
And it works beautifully! All I needed to do is put a
max-width and re-center it with the
transform: translateX properties:
What About Other Browsers?
Moral of the Story?
Long and descriptive names in code can save lives! Also, don’t underestimate your intuition when it comes to solving problems. Ha.
Update on 21st October ’17: I changed the max-width from 800px to 90%. Changing it to a percentage-based value ensures that it will scale well on larger or smaller TV size. Also, if you have a really long subtitle, it won’t collapse to 4 or 5 lines which will happen if you used a fixed, px-based value.