JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="headerContainer"></div>
<div class="dots"></div>
<div class="side"></div>

<div class="content"></div>

<div class="footer"></div>

<div class="fullscreen-bg">
    <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
        <source id = "myVideo" src="https://srv84.clipconverter.cc/download/qtbafoZ8u5iwZW5wnpSVaGpk5KWmqXFs4pSYbXBgoWVtaW60qc%2FMqHyf1qiZpa2d2A%3D%3D/Flight%20Through%20Beautiful%20Clouds%20Footage%204K%20Loop.mp4" type="video/mp4">
    </video>
</div>

CSS

.dots {
  height: calc(100vh - 120px);
  width: calc(100vw - 400px);
  right: 0;
  position: absolute;
  opacity: 0.2;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSJ3aGl0ZSIgLz4KICA8Y2lyY2xlIGN4PSIxIiBjeT0iMSIgcj0iMSIgZmlsbD0iYmxhY2siLz4KPC9zdmc+"); background-repeat: repeat;
}

.footer {
    display: block;
    height: 40px;
    width: 100%;
    background: rgba(139, 0, 0, 0.3);
    bottom: 0;
    position: absolute;
    border-top: 2px solid white;
}

body {
  margin: 0;
  background: #bbb;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: auto;
    height: 100%;
  }
}
@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

JavaScript

document.getElementById("myVideo").playbackRate = 0.1;