JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

CSS

.play1 {
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.play2 {
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

.play3 {
  --color-a: green;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

.play4 {
  --color-a: orange;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

.play5 {
  --color-a: yellow;
  --color-b: black;
  --color-c: yellow;
  --color-d: black;
}

.play6 {
  --color-a: blue;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

.play7 {
  --color-a: red;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

.play8 {
  --color-a: white;
  --color-b: black;
  --color-c: white;
  --color-d: black;
}

.play9 {
  --color-a: red;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}


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

body {
  background: #353198;
  /*  animation: fadeInBody1 0s ease forwards;*/
}

/*@keyframes fadeInBody1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}*/

/*body.*/
.initial-fade {
  animation: initial-fade 500ms ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}

.initial-fade,
.fadingOut {
  cursor: default;
}

.initial-fade .cover,
.initial-fade .cover * {
  pointer-events: none !important;
}


.container {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}


/*body.*/
.bg1 {
  animation: fadeInBody 5s ease 0s forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadeInBody {
  100% {
    opacity: 1;
  }
}

/*body.*/
.bg1 .with-curtain:before {
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
  background-image:
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),

    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(90deg,...

JavaScript

var playButtons = document.querySelectorAll('button.cover');

    for (var button of playButtons) {
      button.addEventListener('click', function() {
        var videoContainer = document.querySelector('.video');
        videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
      });
    }
  

  const manageCover = (function makeManageCover() {
    const config = {};
    const body = document.body;
    let currentPlayButton = {};

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

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

    function hideAll(elements) {
      elements.forEach(hide);
    }

    function resetBackground(backgroundSelector) {
      const allBackgrounds = document.querySelectorAll(backgroundSelector);

      function hideBackground(background) {
        background.classList.add("bg1");
      }
      allBackgrounds.forEach(hideBackground);
    }

    function resetButtons(buttonSelector) {
      const allButtons = document.querySelectorAll(buttonSelector);

      function hideButton(button) {
        button.classList.add("isOpen");
      }
      allButtons.forEach(hideButton);
    }

    function resetPage() {
      resetBackground("body");
      resetButtons(".container");
    }

    function markAsPlayed(played) {
      played.classList.add("played");
    }

    /*function showCover(playButton) {
      hideAll(config.containers);
      resetPage();
      markAsPlayed(playButton);
      const cover = playButton.parentElement;
      cover.classList.add("active");
      show(cover);
    }*/

    function showCover(playButton) {
      hideAll(config.containers);
      resetPage();
      markAsPlayed(playButton);
      const playButtonContainer = playButton.parentElement;
      const container = document.getElementsByClassName(playButton.dataset.container)[0];
      playButtonContainer.classList.add("active");
      container.classList.add("active");
      show(playButtonContainer);
     ...