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() {
    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);
    cover.addEventListener("click", handler);
  }

  function init(selectors) {
    config.containers =...