Suggestion: expose object-fit on media & poster slot as a css custom property

[jools-r]

When using media-chrome for video containers that change dimensions depending on viewport, e.g. for background video use, object-fit: cover; on the video and poster image elements is useful to avoid letterboxing.

Currently, you need to set the property via javascript on the video element in the shadow DOM once the media chrome element exists. That works fine but it would be easier if that property could be exposed as a CSS custom property, e.g. as --media-object-fit on the video and poster slots / elements.

In my local tests, it works fine but when using media-chrome in conjunction with hls-video-element, which replaces/rewraps the video element, I found I needed to add the same custom property to the hls-video-element as well. Is that unavoidable?

Thanks for considering the idea!

[luwes]

thanks for the feedback @jools-r! generally Media Chrome has CSS custom props for things that are not reachable inside the shadow DOM, also for default styles for the custom elements but I'm not sure this is a valid case for adding a new custom CSS property because the video and poster elements can be easily styled in the "light" DOM with object-fit: cover.

for the custom video like elements like hls-video-element and mux-video it does make a lot of sense. Related to muxinc/elements#125

I'll move this suggestion to discussions to get more feedback of the community.

[luwes]

this was added to mux-video and mux-audio in the mean time 🎉 muxinc/elements#199