JSFiddle - React, Tailwind, and code Playground

HTML

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



        <div class="wrap hide">
          <div class="video video-frame"></div>
        </div>



      </div>


      <svg class="play " width="100%" height="100%" viewBox="0 0 64 64">
        <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
              M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
      </svg>
    </div>

  </div>
</div>

CSS

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

body {
background: black;
}





.outer {
  position: relative;
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain {
  max-width: 640px;
  margin: auto;
  border: 3px solid red;
  box-sizing: border-box;
  border-radius: 25px;
  overflow: hidden;
  background: transparent;
}

.curtain-ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  background: transparent;
}




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

}

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}

.hide {
  display: none;
}

JavaScript

(function manageCurtain() {
  "use strict";


  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);
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  const cover = document.querySelector(".play");
  cover.addEventListener("click", coverClickHandler);
}());


const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  let player = null;

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addPlayer(video) {

    const playlist = "M7lc1UVf-VE";
    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady,
      "onStateChange": onPlayerStateChange
    };
    player = new YT.Player(video, config);

  }

  return {
    addPlayer
  };
}());

function onYouTubeIframeAPIReady()...