JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">

  <div class="tcell">
    <div class="containera hide">
      <div class="containera-inner">
        <div class="video-wrapper">
          <div class="ratio-keeper">
            <div class="wrapa">
              <div class="video video-frame"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <svg class="playa " width="100%" height="100%" viewBox="0 0 64 64">
      <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
    </svg>
  </div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  animation: fade 2s ease 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.outer {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
}

.tcell {
  display: flex;
  width: 100%;
  justify-content: center;
}

    .containera-inner{
    display: flex;
    flex: 1 0 0%;
     background-image:
     linear-gradient(teal 5px, #0000 5px),
     linear-gradient(90deg, teal 5px, #0000 5px),

     linear-gradient(black 10px, #0000 10px 160px, black 160px),
     linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
  
     linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
     linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
     
     linear-gradient(black 20px, #0000 20px 150px, black 150px),
     linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
     
     linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
     linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),

     linear-gradient(black 30px, #0000 30px 140px, black 140px),
     linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
 
     linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
     linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),

     linear-gradient(black 40px, #0000 40px 130px, black 130px),
     linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),

     linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
     linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),

     linear-gradient(black 50px, #0000 50px 120px, black 120px),
     linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),

     linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
     linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),

     linear-gradient(black 60px, #0000 60px 110px, black 110px),
   ...

JavaScript

(function manageCovera() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);

    const thewrap = cover.parentElement.querySelector(".containera");
    show(thewrap);
  }

  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
  }

  let hasShuffled = false;

  function onPlayerStateChange(event) {
    player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }


  function addPlayer(video) {

    const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady,
      "onStateChange": onPlayerStateChange
    };
    player = new YT.Player(video, config);

  }

  return {
    addPlayer
  };
}());

function onYouTubeIframeAPIReady() {
  const cover = document.querySelector(".playa");
  const wrapper = cover.parentElement;
  const frameContainer = wrapper.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}