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

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

body {
  background: #353198;
}

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

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

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

.inner-container {
  display: none;
}

/* when container is active hide the cssPlay and show the inner container*/
.playButtonContainer.active {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}

.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 {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.played {
  border-color: green;
}

.played::before {
  border-left-color: green;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  /*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
  border: 20px solid black;
  position: relative;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  user-select: none;
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47px;
 ...

JavaScript

document.querySelectorAll('button[data-id]').forEach(function(button) {
    button.addEventListener('click', function(e) {
      const videoContainer = document.querySelector('.video');
      videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
    });
  });


  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 resetButtons(buttonSelector) {
      const allButtons = document.querySelectorAll(buttonSelector);

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

    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);
      markAsPlayed(playButton);
      const playButtonContainer = playButton.parentElement;
      const container = document.getElementsByClassName(playButton.dataset.container)[0];
      playButtonContainer.classList.add("active");
      container.classList.add("active");
      show(playButtonContainer);
      show(container);
    }

    function coverClickHandler(evt) {
      currentPlayButton = evt.currentTarget;
      showCover(currentPlayButton);
    }

    function addClickToButtons(playButtons) {
      playButtons.forEach(function playButtonHandler(playButton) {
        playButton.addEventListener("click", coverClickHandler);
      });
    }

    function addCoverHandler(coverSelector, handler) {
      const cover = document.querySelector(coverSelector);
     ...