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>
    
    
    
    
      <div class="outer-container hide">
    
    <div class="containerB open">
        <div class="modal-content">

            <div class="buttonContainerA">
                <button data-destination="#ba" class="playButtonA btn-primary btn">Listening</button>
                <button data-destination="#bb" class="playButtonA btn-primary btn">Live Performance</button>
                <button data-destination="#bc" class="playButtonA btn-primary btn">On Loop</button>
                <button data-destination="#bd" class="playButtonA btn-primary btn">Audio Visual</button>
                <button data-destination="#be" class="playButtonA btn-primary btn">Lyric Video</button>
                <button data-destination="#bf" class="playButtonA btn-primary btn">Music Video</button>
                <button data-destination="#bg" class="playButtonA btn-primary btn">From The Vault</button>
                <button data-destination="#bh" class="playButtonA 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"...

CSS

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

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

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

body:has(.outer-container:not(.hide)) {
  padding-top: 0;
}

.outer-container {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  flex-direction: column;
}

.containerB,
.my-footer {
  margin-top: auto;
}

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

  100% {
    opacity: 1;
  }
}

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

  background: green;

}

.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 case*/
}

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

.ratio-keeper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*.outer-containerA .ratio-keeper {
    background: #000;
}*/



.wrap {
  opacity: 0;
  transition: opacity 3s
    /*ease-in-out*/
  ;
}

.wrap.visible {
  opacity: 1;
}

.curtain-leftA,
.curtain-rightA {
  position:...

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