JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Poppins:wght@400;500&display=swap');
	</style>
</head>



<div class="containerA">
	<div class="video-containerA">
		<button class="exitA exit" type="button" title="Exit" aria-label="Close"></button>
		<div class="ratio-keeper">
			<div class="video-one"></div>
			<div class="wrap">
				<div class="video playInitial"></div>
			</div>

			<div class="curtain-leftA">
			</div>
			<div class="curtain-rightA">
			</div>


		</div>

		<div class="playInitial"></div>
	</div>
	<div class="modalA hide">
		<div class="modal-content">

			<div class="buttonContainer">
				<button data-destination="#ba" class="playButton btn-primary btn">Listening</button>
				<button data-destination="#bb" class="playButton btn-primary btn">Live Performance</button>
				<button data-destination="#bc" class="playButton btn-primary btn">On Loop</button>
				<button data-destination="#bd" class="playButton btn-primary btn">Audio Visual</button>
				<button data-destination="#be" class="playButton btn-primary btn">Lyric Video</button>
				<button data-destination="#bf" class="playButton btn-primary btn">Music Video</button>
				<button data-destination="#bg" class="playButton btn-primary btn">From The Vault</button>
				<button data-destination="#bh" class="playButton btnq">
          <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 856 856">
            <path fill="#000" d="M 856 0 H 856 V 856 H 0 L 0 0 H 856" />
            <path fill="#1155cc" d="M79.4,816.3c-21,0-38-17-38-37.9c0-21.1,16.9-38.1,38-38.1c20.9,0,37.9,17,37.9,38.1
      C117.3,799.3,100.4,816.3,79.4,816.3" />
            <path fill="#1155cc" d="M79.4,115.7c-21,0-38-17-38-38s16.9-38,38-38c20.9,0,37.9,17,37.9,38S100.4,115.7,79.4,115.7" />
            <path fill="#1155cc" d="M513.6,766.6c0,0.8-0.8,1.5-1.6,1.5H344.2c-0.8,0-1.5-0.7-1.5-1.5V658.2c0-0.9,0.7-1.7,1.5-1.7H512
      c0.8,0,1.6,0.7,1.6,1.7V766.6z"...

CSS

/*:root {
    --color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;
  }*/

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 50px 8px 0;
}




@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.wrapB.visible,
.outer-containerA .wrapB:not(.wrapB.visible),
.outer-containerB .wrapB:not(.wrapB.visible)

{
  opacity: 0;
  animation: fadeIn 3s ease-in forwards;
  animation-delay: 700ms;
}

.containerA {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  /* Enable scroll if needed */
  --units: 8px;
  --brick1: #222;
  --brick2: #222;
  --lines: #121212;
  --gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
  --gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
  background:
    repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn),
    repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100%) var(--gp-ln),
    repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100%) var(--gp-ln);
}

.containerA.hide {
  display: none;
}

.video-containerA.hide {
   display: none;
}

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

.video-containerA::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.video-containerA::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #0059dd;
 z-index: 2;
  pointer-events: none;
  /* just in...

JavaScript

/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {
  const container = document.querySelector(".video-containerA");
  container.classList.add("slide");
  const wrapper = document.querySelector(".wrap");
  wrapper.classList.add("visible");
};
const videoPlayer = (function makeVideoPlayer() {
  let players = [];
  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

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

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    shufflePlaylist(player, player.getIframe().dataset.shuffle === "true");
    // shufflePlaylist(player);
  }

  function onPlayerStateChange(event) {
    const eventPlayer = event.target;
    if (eventPlayer !== players[0]) {
      if (event.data === 1) {
        players.forEach(function pauseOtherVideos(player) {
          const hasIframe = player.getIframe();
          const isDifferentPlayer = player !== eventPlayer;
          const isPlaying = player.getPlayerState() === 1;
          if (hasIframe && isDifferentPlayer && isPlaying) {
            player.pauseVideo();
            console.log("pause");
          }
        });
      }
    }
  }

  function addPlayer(video, playerOptions) {
    let id = video.dataset.id;
    playerOptions.playerVars = playerOptions.playerVars || {};
    if (playerOptions.listType && playerOptions.list) {
      playerOptions.playerVars.listType = playerOptions.listType;
      playerOptions.playerVars.list = playerOptions.list;
    } else if (id && id.startsWith("PL")) {
      playerOptions.playerVars.listType = "playlist";
      playerOptions.playerVars.list = id;
    }
    if (Array.isArray(playerOptions.videoId)) {
      const...