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.73k stars 70 forks source link

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

Closed jools-r closed 2 years ago

jools-r commented 2 years ago

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 commented 2 years ago

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

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