Captions Cut Off in Fullscreen on Chrome

[joe-replin]

Subject of the issue/enhancement/features

Some users have reported that captions (subtitles) get cut off or overlap the video controls when watching videos in fullscreen mode on Chrome.

• This issue only happens in fullscreen on some versions of Chrome.
• It works fine in Firefox and in normal (non-fullscreen) mode.
• The problem seems to happen when captions have two lines, and the second line drops too low and gets hidden behind the player bar.

MediaElement.js uses native browser caption rendering by default (renderCaptionsNatively: true). In Chrome, native captions are rendered by the browser itself, and:

• Cannot be styled via regular CSS (line-height, bottom, etc.)
• May be influenced by the user's system caption settings
• In fullscreen, Chrome often repositions captions downward, and the second line may get tucked underneath the media player bar.

Meanwhile, Firefox appears to render native captions differently (more predictably), or positions them upward to stay within bounds of the video frame.

Your environment

• FW v5.45.2
• Media v7.0.0
• Chrome 140.0.7339.128
• Window & MacOS

Steps to reproduce

Using the following configuration above, add a multi-line caption to a video and play in Chrome fullscreen.

Temporary Fixes

To reduce the impact of the issue:

1. Smaller Caption Text in Fullscreen - We've reduced the caption font size when a video goes fullscreen. This makes it less likely that the second line will get cut off. But understand this isn't a good long-term solution.
2. Auto-Hide the Player Bar - Captions don't get blocked.

Possible Long-term fixes

• Evaluate the mediaelement.js library to see if any settings exist
• Possibly disable native caption rendering by browsers. Instead apply our own styles.
• Manually detect fullscreen / Chrome and attempt to override styles programmatically.

Screenshots (if you can)

Chrome fullscreen CC Text rendering

[oliverfoster]

https://developer.mozilla.org/en-US/docs/Web/CSS/::cue
https://w3c.github.io/webvtt/
https://developer.mozilla.org/en-US/docs/Web/API/VTTCue/VTTCue

[joe-replin]

Thank you. While font-size would slightly help to alleviate the issue, I'm not seeing any other CSS properties in the links you provided that would solve for this issue. Chrome remains unaffected by positioning, line-height, margin & padding, for instance.

[oliverfoster]

Agreed. Only JavaScript preprocessing with VTTCue.line maybe?

Another option is to hang the controls below the video tag rather than overlaying them?

All of the positional things seem to come from the VTT file and are always relative to video area.

[swashbuck]

Another option is to hang the controls below the video tag rather than overlaying them?

I've been wondering whether we should just change the default value for _offsetMediaControls to true. This should help with the CC text being obscured.

[joe-replin]

@swashbuck, after another look, I think my original reported issue was specific to a project. Here is a left / right vanilla comparison of Firefox/Chrome. And another screenshot of Chrome at full screen. Just want you to confirm so we can close this.

[swashbuck]

@joe-replin I'm on Mac, and I do see a difference. I increased the CC text font size to 20px. Non-fullscreen below:

Firefox

---

Chrome

CSS

.mejs__container:not(.mejs__container-fullscreen) video::cue {
  font-size: 20px !important;
}