Make a React-video Cover the Parent Container? (react-player)

Question

I'm trying to get my video to fit/cover the entire screen and respond to resize just like if you use objectFit: cover or backgroundSize: cover. Right now when the video is too large you can see the left and right side of the video, and when the window is too small, you are able to see the top and bottom.

import React from "react";
import ReactPlayer from "react-player/lazy";

const Header = (props) => {
  return (
        <ReactPlayer
          muted={true}
          volume={0}
          playing={true}
          loop={true}
          width="100vw"
          height="100vh"
          style={{
            position: "absolute",
            objectFit: "cover",
            backgroundSize: "cover",
          }}
          url={props.videos[1]}
        />
  );
};

export default Header;

Here you can see the black background:

Too tall:

Too wide:

The container's size is 100vw, 100vh, and the ratio of the video is 4096x2160.

Here an example that I'm trying to not do since the video shrinks with the page:

https://jsfiddle.net/e6w3rtj1/131/

Answer 1

I found my solution, for some reason the react-video package doesn't work with object-fit or background-size, so I had to try something else.

I found that you can just use the html5 video and source tags for the video.

Here the code:

<video
   autoPlay
   muted
   loop
   style={{ height: "100%", width: "100%", objectFit: "cover" }} //object-fit:cover
>
   <source src={props.videos[1]} type="video/mp4" />
</video>