Videos fully contained and centred in squared react-player component

[FilipMasar]

I have square react-player component

<div
    style={{
        position: "relative",
        paddingTop: "100%",
        borderStyle: "solid"
    }}
>
    <ReactPlayer
        style={{ position: "absolute", top: 0, left: 0 }}
        url={url}
        controls
        width="100%"
        height="100%"
    />
</div>

But some of my videos are not squared. I would like to have a squared react-player component, and show videos fully contained and centred in it. That means left and right parts of the video won't be shown. Is it possible ?

Thanks for your help ;-)

[cookpete]

Try adding object-fit: cover; to the <video> element (use config.file.attributes to set props on the video element).

Browser support: https://caniuse.com/#feat=object-fit

[FilipMasar]

Thanks for your quick response. I've done this, but it also stretches react-player itself

<ReactPlayer
  style={{ position: "absolute", top: 0, left: 0 }}
  url={url}
  controls
  width="100%"
  height="100%"
  config={{
    file: {
      attributes: {
        style: { height: "100%", objectFit: "cover" },
      },
    },
  }}
/>;

How do I pass the style to <video> element ?

Now it looks like this

[cookpete]

Have you tried width: "100%" as well? eg style: { width: "100%", height: "100%", objectFit: "cover" }

[FilipMasar]

That was the missing part 😅 Thanks so much for help :-)

This is the solution

<div
  style={{
    position: "relative",
    paddingTop: "100%",
  }}
>
  <ReactPlayer
    style={{ position: "absolute", top: 0, left: 0 }}
    url={videoURL}
    controls
    width="100%"
    height="100%"
    config={{
      file: {
        attributes: {
          style: {
            width: "100%",
            height: "100%",
            objectFit: "cover",
          },
        },
      },
    }}
  />
</div>

[atsakiridis]

@cookpete, can you think of any reason why this wouldn't work in a Vimeo player, i.e.

   ...
  <ReactPlayer
    style={{ position: "absolute", top: 0, left: 0 }}
    url={vimeoVideoURL}
    controls
    width="100%"
    height="100%"
    config={{
      vimeo: {
        attributes: {
          style: {
            width: "100%",
            height: "100%",
            objectFit: "cover",
          },
        },
      },
    }}
  />
</div>