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

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

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 = "playlist";
      playerOptions.playerVars.list = id;
    }
    if (Array.isArray(playerOptions.videoId)) {
      const randomNumber = Math.random() * playerOptions.videoId.length;
  ...