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.
Top comments (0)