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...

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() {
    const 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);
        const isShuffle = player.getIframe().dataset.shuffle === "true";
        shufflePlaylist(player, isShuffle);
    }

    function onPlayerStateChange(event) {
        const eventPlayer = event.target;
        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 =...