【React-Player】動画を表示領域の真ん中に表示する

デザイン上、親コンポーネントによって動画の表示領域が固定になっている場合、下のコードの様に普通に表示すると動画の左上の部分だけが切り抜かれて表示されてしまいます。

<ReactPlayer
  url={url}
  controls={false}
  playing={false}
/>

元の動画↓

左上だけ切り抜かれて表示されてしまう↓

まず、親コンポーネントに合わせて、widthとheightを指定します。（100%でも可）
そうすると、動画が表示領域に収まるようになります。しかし、上下もしくは左右に余白ができてしまいます。

<ReactPlayer
  url={url}
  controls={false}
  playing={false}
  width={'114px'}
  height={'114px'}
/>

マシにはなったが余白が気になる。

ReactPlayerが内包しているvideoタグにobject-fit: fill;とかobject-fit: cover;を適用させれば良いため、以下のようにする。

<ReactPlayer
  url={url}
  controls={false}
  playing={false}
  width={'100%'}
  height={'100%'}
  config={{
    file: {
      attributes: {
        style: {
          width: "100%",
          height: "100%",
          objectFit: "cover",
        },
      },
    },
  }}
/>

いい感じになりました。