Support for CSS Object-fit: cover or background-size: cover

Great, package, but most of the time I need a video player, the video is used as a background that needs to cover the viewport no matter the size. Just like when you give an img an object fit cover or a backgroundSize a cover property. Thanks!

[mylesfarm]

Hello @pcdependency, I achieved the same outcome using styled-components in my project, and wrapped ReactPlayer in a styled div with a descendent selector for the video element like so:

export const StyledVideo = styled.div`
  video {
    object-fit: cover;
  }
`;

Then, placed ReactPlayer inside:

<StyledVideo>
  <ReactPlayer
    ref={player}
    playsinline
  />
</StyledVideo>

[cookpete]

You could use width='100vw' height='100vh', but how the video fills the space depends on what type of URL you are using.

If you are playing a file, see #1003 or use @mylesfarm’s solution above.