<video> object-fit: cover in mux-player-react

[luwes]

Hello,
How i can setup object-fit: cover for the video element, in mux-player-react?
Thank you

Originally posted by @ProofWoW in #125 (comment)

[gkatsev]

Looks like there isn't a good way to do this from mux-player. We do export <video> as a ::part from mux-video. We could re-export it on mux-player, which I think would be better than exposing an option or a CSS variable specifically for object-fit.
Though, @cjpillsbury does have some concerns about exposing this, since internal styles or new defaults might interfere with CSS that folks might add to the ::part

[wiesson]

How do I use it?
I also was looking for this! I tried sth like this, but no result (no experience with web components so far)

mux-video::part(video) {
  object-fit: cover;
}

[luwes]

@ProofWoW @mikker we are on the fence of adding this to the Mux player because it could potentially result in breaks if we decide to change any styles on the internal video element in the future. What exactly is the use-case?

Is it to fix letterboxing or hairline black edges around the video content?

Would a custom CSS var be able to cover the use-case?
Is it only for adding object-fit: cover?

---

Thanks for the feedback @wiesson !

What's the high level reasoning for adding object-fit: cover; to the video element in your use-case?

Thank you!

[wiesson]

I'm experimenting to add the mux-player here on this page -> https://www.douglas.de/de/cp/videos/video-overview (instead of an overlay, it could start inline) but the tiles have different sizes across multiple platforms. They also should align with the other product tiles.

Is there anything I can do to style the shadow dom element from outside?

[luwes]

@wiesson at the moment there is no way to do this. we'll try to add this soon as it seems highly requested.

[mikker]

My use case is that I want the player to have the full height of the window. So,

mux-player::part(video) {
  height: 100vh;
}

This works great when I add the exportparts="video: video" attribute to <mux-video> inside <mux-player>.

I see your point about being hesitant to let users style too much so you don't break it with updates. I think though that the vast majority of folks customizing in this way would be aware that there's a risk the styles might change. That in mind + sticking somewhat to semantic versioning with the player, I don't see any problems with adding a direct way to style individual parts.

[luwes]

Thanks all! This feature is added and released https://github.com/muxinc/elements/releases/tag/%40mux%2Fmux-player%401.0.0-beta.0