Сделать React-video крышкой родительского контейнера? (реагирующий игрок)

Я пытаюсь сделать так, чтобы мое видео вмещало/закрывало весь экран и реагировало на изменение размера точно так же, как если бы вы использовали objectFit: закрытие или < strong>Размер фона: обложка. Прямо сейчас, когда видео слишком большое, вы можете видеть левую и правую часть видео, а когда окно слишком маленькое, вы можете видеть верхнюю и нижнюю часть.

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;

Здесь вы можете увидеть черный фон:

Слишком высокий:

Слишком широко:

Размер контейнера 100vw, 100vh, соотношение видео 4096x2160.

Вот пример, который я стараюсь не делать, так как видео сжимается вместе со страницей:

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