JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container play2 with-curtain">
  <div class="inner-container curtain curtain2">
    <div class="ratio-keeper">

      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
      <div class="panel panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="container play1 with-curtain">
  <div class="inner-container curtain curtain2">
    <div class="ratio-keeper">

      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
      <div class="panel"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="containerInitial hide">
  
  <button class="playInitial cover spinner" type="button" data-container="play2" data-id="EK3h0IADYrQ">
    <span class="color-circle"></span>
  </button>

  <button class="exitInitial" type="button" aria-label="Open"></button>
</div>

<div class="playButtonContainer with-curtain ">
  <button class="playSingle0 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
</div>

CSS

.panel.panel2  {
  background-color: red;
}

body.initial {
  --color-a: #379DEB;
}

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

body {
  background: #353198;
}


.containerInitial.exitIsOpen {
  display: none;
}


.containerInitial.active {
  display: none;
}

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

.containerInitial {
  background: #353198;

  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;

}


.exitInitial {
  position: fixed;
  top: 200px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;

  width: 47px;
  height: 47px;
  cursor: pointer;
  background: transparent;
  border-radius: 50%;
  border: 5px solid red;
  animation: fadeInExit 1s forwards;


}

.exitInitial::before,
.exitInitial::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exitInitial::before {
  transform: rotate(45deg);
}

.exitInitial::after {
  transform: rotate(-45deg);
}

.playButtonContainer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  max-width: 630px;
  gap: 18px;
}

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

  100% {
    opacity: 1;
  }
}

.cover {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.cover::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.cover:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.cover:focus {
 ...

JavaScript

const myVideo = document.querySelector('.video');

document.querySelectorAll('button.cover').forEach(function(button) {
  button.addEventListener('click', function(event) {
    myVideo.dataset.id = event.currentTarget.dataset.id;
  });
});

(function manageExitInitial() {

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

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

  function resetInitial(initialSelector) {
    const allInitials = document.querySelectorAll(initialSelector);

    function hideInitial(initial) {
      initial.classList.add("exitIsOpen");
    }
    allInitials.forEach(hideInitial);
  }


  function resetPage() {
    resetInitial(".containerInitial");
  }

  function coverClickHandler(evt) {
    resetPage();
    const cover = evt.currentTarget;
    const thewrap = document.querySelector(".playButtonContainer");
    hide(cover);
    show(thewrap);

  }

  const cover = document.querySelectorAll(".exitInitial");
  cover.forEach(function addHandler(el) {
    el.addEventListener("click", coverClickHandler);
  });
}());

const manageCover = (function makeManageCover() {
  const config = {};

  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) {
   ...