JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/7.8.4/video-js.css">
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
<div class="banner">
  <div class="video-wrapper">
    <video id="my-video" class="video-js vjs-fluid">
      <source src="https://dev.joshmoto.wtf/video/doming-machine-gopro-loop.mp4" type="video/mp4" />
      <source src="https://dev.joshmoto.wtf/video/doming-machine-gopro-loop.webm" type="video/webm" />
    </video>
  </div>
</div>

SCSS

HTML,
BODY {
  height: 100%;
  min-height: 100%;
}

.banner {
  background: red;
  overflow: hidden;
  min-height: 100%;
  height: 100%;
  position: relative;
}

.video-wrapper {
  position: absolute;
  width: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

JavaScript

let player = videojs('my-video',{
  preload: 'auto',
  muted: true,
  autoplay: true,
  controls: false,
  loop: true,
  width: 1280,
  height: 720
});