search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.83k stars 76 forks source link

Possible to expose variables to style captions #1027

Closed endymion1818 closed 1 week ago

endymion1818 commented 3 weeks ago

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 commented 1 week ago

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

luwes commented 1 week ago

@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 commented 1 week ago

Ah great, thanks yeah that worked for us 👍