HTML5 subtitles with dynamic width on OSX

If you've run into subtitles taking up 100% width of the HTML5 video player window, which is common in Chrome or Safari on OSX, here is a neat styling trick:

::-webkit-media-text-track-display { // prevent subtitles from taking up 100% width // while remaining centered width: auto !important; left: 50% !important; transform: translateX(-50%); // prevent unexpected line breaks, since the // above styling will otherwise force 50% width // on the subtitle element white-space: pre; } 

This code will center the subtitle element, make sure it keeps a dynamic width, and prevent unexpected line-breaks.

Since the fix maintains native subtitle rendering, it allows for operating system level accessibility options to be applied.