JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">
      <div class="wrap hide">
        <div class="video video-frame"></div>
      </div>

      <div class="panel-left">
        <p>added text to</p>
      </div>
      <div class="panel-right">
        <p>the curtain player.</p>
      </div>
      
  </div>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>

CSS

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

body {
  background:#3C5291;;
}

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

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background-image: radial-gradient(60% 60% at 50% 50%, rgb(40, 0, 115), rgb(0, 0, 0));
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}


.panel-left p {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: right;
  text-align: right;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}

.panel-left p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /*background: black;*/
  z-index: -1;
  width:640px;
  height:360px;
}

.panel-right p {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  font-family: 'Roboto', sansleftserif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}

.panel-right p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /*background: black;*/
  z-index: -1;
  width:640px;
  height:360px;
}

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

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*animation: fadeInVideo 0s 0s forwards;
  opacity: 0;*/

/*@keyframes...

JavaScript

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

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

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

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(events.afterClickCover);
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    events.afterClickCover = new Event("afterClickCover");
    cover.addEventListener("afterClickCover", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  const events = {};
  const eventHandlers = {};
  let player = null;


  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    shufflePlaylist(player);
    const iframe = player.h;
    iframe.dispatchEvent(events.afterPlayerReady);
  }

  function addPlayer(video) {

    const config = {
      height: 360,
     ...