ResponsiveVideoBackground.js

// note: video doesn't autoplay when iOS's battery saving mode is on

const VideoContainer = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
	z-index: -1;
	pointer-events: none;

	>div>div span {
		display: none;
	}
	
	video {
		@media (min-aspect-ratio: 16/9) {
			width:100%;
			height: auto;
		}
		@media (max-aspect-ratio: 16/9) {
			width:auto;
			height: 100%;
		}

		
		/* Center the video */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);

		opacity: ${ ({ loading }) => loading ? 0 : 1 };
		transition: opacity ${ animations.slowSpeed } ease-in-out; 
	}
`