BackgroundVideo.js

import ReactPlayer from 'react-player'
import { useSize } from 'react-use'

const videoConfig = {
  vimeo: {
    playerOptions: {
      background: true
    }
  }
}

export default function BackgroundVideo({ video }) {
  const [sized, { width, height }] = useSize(({ width, height }) => {
    let vw
    let vh
    let trans
    if (width / height > video.width / video.height) {
      vh = `calc(${width}px / ${video.width} * ${video.height})`
      vw = `${width}px`
      trans = `translate(0, calc((${height}px - (${width}px / ${video.width} * ${video.height})) / 2))`
    } else {
      vh = `${height}px`
      vw = `calc(${height}px / ${video.height} * ${video.width})`
      trans = `translate( calc((${width}px - (${height}px / ${video.height} * ${video.width})) / 2), 0)`
    }
    return (
      <div style={{ position: 'relative', height: '100%', width: '100%', overflow: 'hidden' }}>
        <div
          style={{
            position: 'absolute',
            left: '0',
            top: '0',
            height: vh,
            width: vw,
            transform: trans
          }}
        >
          <ReactPlayer
            url={video.embed_url}
            config={videoConfig}
            loop={true}
            muted={false}
            width="100%"
            height="100%"
          />
        </div>
      </div>
    )
  })
  return sized
}