Allow ::cue or custom properties for styling captions

[joshchagani]

Howdy friends,
I'm working with captions and I don't believe there's a way to style captions using ::cue from the :host. This might be a shadow dom limitation because my generic video::cue { } seems to have no effect. Perhaps introducing additional CSS custom properties that can style the allowed properties (https://developer.mozilla.org/en-US/docs/Web/CSS/::cue#permitted_properties) could be incredibly helpful!

[luwes]

thanks for the feedback! indeed that might be the case due to shadow DOM.

which media element are you using?

[joshchagani]

I tired adding a class directly to <video> and <hls-video> that would target ::cue but nothing seemed to be working. Firefox was not very helpful in even seeing the pseudo selector's properties in the inspector within the custom elements. Without knowing a ton of what can and can't be passed through the shadow dom I figured I would reach out to minds smarter than my own.

[luwes]

with the native <video> it should work like that.
see https://codepen.io/argyleink/pen/wvmJWeG

Firefox is I believe the most restrictive in allowing certain CSS properties via the ::cue pseudo class so some will just not work unfortunately.

hls-video allows a native <video> element as a child and that will used under the hood exposing it to the light DOM.
code will look a bit like:

<hls-video id="video" preload="metadata" controls autoplay muted crossorigin="anonymous" src="https://stream.mux.com/ICURmKjmMbTgtp2TXRJMX5nzCSdctZ1lVmvH13TVAuE.m3u8">
  <video></video>
</hls-video>

see an example here https://codepen.io/luwes/pen/LYMPNaj

[joshchagani]

Once I add <hls-video> into the <media-controller> all of the ::cue styling goes away. In the code pen I'm using the example player at https://www.media-chrome.org/docs/en/get-started and adding in your VTT track.

https://codepen.io/joshchagani/pen/qBLWVOP

[luwes]

yes, it's a bit strange but a native <video> tag is required as a child of hls-video otherwise a video tag will be created in the shadow dom and it will not be accessible via CSS from the outside.

this works https://codepen.io/luwes/pen/BavBJdQ
cheers!

[joshchagani]

Right you are! Thank you so much!