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.