htmlvideosubtitle

Native HTML <video><track> subtitle positioning


We have a .vtt file without any line, alignment or positioning information.

In Firefox the subtitles are correctly positioned at the bottom of the video.

In Chrome and its children they are positioned right at the center of the video.

Is there any way to equalize the default position of the subtitle cues?

The MDN web docs about the ::cue Element say there is no allowed CSS property for positioning.

Google's stupid AI recommendations also say "You can reposition the cues with drag & drop" which isn't true at all! Most questions about this topic I can find ask questions about specific custom player implementations or issues on TV. I care about Desktop PC Browser positions.

As some additional information: Setting all Cue's lines to "-1" as recommended by some answers to similar questions gets ignored by Chrome based browsers entirely.

Setting snapToLines to false allows me to specify the line position with line as a percentage across browsers, but it also disables automatic line breaks on longer cues.

The videos are very simple so there is no region I can set, though the documentation about this attribute is also very sparse.


Solution

  • Chrome positions native text tracks with top set in a style attribute applied to the video::-webkit-media-text-track-display. The value for top is generated when the cue is displayed, depending on whether the native controls are currently visible. You can see this if you enable "show user agent shadow DOM" in dev tools.

    You could override the top position with CSS, but exercise caution: Chrome's positioning will account for user preferences for the text size. You may create an accessibility issue if your setting pushes the text out of the visible area.

    video::-webkit-media-text-track-display {
      top: 80% !important;
    }