Possible to expose variables to style captions

[endymion1818]

Hi, I've noticed that the player chrome covers the captions in your examples.

https://www.media-chrome.org/docs/en/examples/captions-menu

I've tried to change the position using the HTML ::cue selector on the mux-video element but I have so far been unable to do that.

https://developer.mozilla.org/en-US/docs/Web/CSS/::cue

Could you expose a few CSS variables so that styling the captions could be possible? Specifically one that would allow us to reposition the captions further up from the bottom (line-height seems to be a working candidate here out of the limited available properties).

Thanks

[endymion1818]

❌ Closing as this is needed in mux-player not media-chrome.

[luwes]

@endymion1818 this should be possible with these CSS vars:

      video::-webkit-media-text-track-container {
        transform: var(--media-webkit-text-track-transform);
        transition: var(--media-webkit-text-track-transition);
      }

https://github.com/muxinc/media-elements/blob/main/packages/custom-media-element/custom-media-element.js#L86-L89

note that Mux player already does transforms on these when the controls show / hide.
I believe there isn't a way to select shown / hidden controls in CSS only at the moment but you can change the transform fixed like this:
https://codesandbox.io/p/sandbox/mux-player-text-track-transform-pzslo0?file=%2Findex.html%3A27%2C1

[endymion1818]

Ah great, thanks yeah that worked for us 👍