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.

I was having a hard time with the bug because I can’t seem to control it with Javascript since I am working with the Google Cast Media Player Library. The best advice that the Chromecast docs gave me is that I can style the subtitle using the 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.

The Fix

And it works beautifully! All I needed to do is put a max-width and re-center it with the left and transform: translateX properties:

video::-webkit-media-text-track-container {
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
}

What About Other Browsers?

Since this is suppose to only work with our Chromecast Receiver (and by extension, the Chrome Browser), I don’t really care about other non-webkit browsers. Through my conversations with the engineers that are working on the Video Player component at Viki, they told me that they can control the subtitle positioning easily through Javascript with Video.js. Perhaps that is something that you can look into if you’re not developing for Chromecast.

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.