Question 74404 in Reactjs Question posted in
The new location for the React Documentation can be found here.

mux-player-react don't recognize object-fit cover – Reactjs

I’m using mux-player-react on a next.js site to implement a large background looped movie.

https://website-agobay-coming-soon-5iemrgd6o-hhag.vercel.app/

The video should be object-fit: cover to cover all the browser window. unfortunately it doesn’t work.

eather with:

 .videoMob {
 --controls: none;
 --media-object-fit: cover;
 --media-object-position: center;

or:

 .videoMob {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) scale(1);
 min-width: 100vw;
 min-height: 100vh;
 overflow: hidden;
 object-fit: cover;

It’s strange, if I use the mux-video-react class, it works fine but the video has a jumpcut and it don’t show the video on mobile devices.

thanks

Tags:

2

Answers


  1. 0

    object-fit seems to be working but the video doesn’t take up all the vertical space of its parent element. If you can use height: 100vh on the video tag, it should work.

    On another note – for a background video like this, native HTML5 video does the job as well …

    Login or Signup to reply.
  2. 0

    You can modify your videoMob class styles to look like this, it should solve your issue:

    .videoMob {
 position: absolute;
 inset: 0;
 min-width: 100vw;
 min-height: 100vh;
 overflow: hidden;
 object-fit: cover;
}

    Let me know if you have any other questions around using mux-player!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search