JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="curtain">
		<div class="ratio-keeper">


	<div class="panel-left"></div>
	<div class="panel-right"></div>

			<!-- 1. Video Wrapper Container -->

			<div class="embed-youtube" data-video-id="djV11Xbc914">

				<!-- 2. The preview button that will contain the Play icon -->
				<button class="embed-youtube-play" type="button" aria-label="Open"></button>
			</div>
		</div>
	</div>
	<div class="curtain">
		<div class="ratio-keeper">

	<div class="panel-left"></div>
	<div class="panel-right"></div>
			<!-- 1. Video Wrapper Container -->
			<div class="embed-youtube " data-video-id="djV11Xbc914">
				<!-- 2. The preview button that will contain the Play icon -->
				<button class="embed-youtube-play" type="button" aria-label="Open"></button>
			</div>
		</div>
	</div>

	<div class="curtain">
		<div class="ratio-keeper">

	<div class="panel-left"></div>
	<div class="panel-right"></div>
  
			<!-- 1. Video Wrapper Container -->
			<div class="embed-youtube " data-video-id="djV11Xbc914">
				<!-- 2. The preview button that will contain the Play icon -->
				<button class="embed-youtube-play" type="button" aria-label="Open"></button>
			</div>
		</div>
	</div>
</div>

CSS

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

body {
  background: white;
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  padding: 8px 8px;
}

.curtain {
  margin:auto auto 20px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}
.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}
.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #333;
  pointer-events: none;
}

.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
}



.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 700ms;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;

}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background:black;
  /* filter: drop-shadow(0 0 5px #000);*/
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .panel-right {
  transform: translateX(calc(100% + 1px));
}

.embed-youtube {
  background-color: #000;
  margin-bottom: 100px;
}

.embed-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 1;
}

.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  position: absolute;
}

.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  animation: fadein 3s ease-in 0s...

JavaScript

(function manageCover() {

  function openCurtain(curtain) {
    curtain.classList.add("slide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget.parentElement.parentElement.parentElement;
    const curtain = openCurtain(cover);
  }

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());


(function() {
  let YouTubeContainers = document.querySelectorAll(".embed-youtube");

  // Iterate over every YouTube container you may have
  for (let i = 0; i < YouTubeContainers.length; i++) {
    let container = YouTubeContainers[i];
    /*  let imageSource = "https://img.youtube.com/vi/" + container.dataset.videoId + "/sddefault.jpg";*/

    // Load the Thumbnail Image asynchronously
    /*  let image = new Image();
      image.src = imageSource;
      image.addEventListener("load", function () {
        container.appendChild(image);
      });*/

    // When the user clicks on the container, load the embedded YouTube video
    container.querySelector("button").addEventListener("click", function() {
      let iframe = document.createElement("iframe");

      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "");
      iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
      // Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it 
      iframe.setAttribute("src", "https://www.youtube.com/embed/" + container.dataset.videoId + "?rel=0&showinfo=0&autoplay=1&fs=0");

      // Clear Thumbnail and load the YouTube iframe
      container.innerHTML = "";
      container.appendChild(iframe);
    });
  }
})();