JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="containerA">
  <div class="video-container">
    <button class="exitA exit" type="button" title="Exit" aria-label="Close"></button>
    <div class="ratio-keeper">
      <div class="video-one"></div>
      <div class="wrapA">
        <div class="video playInitial"></div>
      </div>
      <div class="curtain-left">
      </div>
      <div class="curtain-right">
      </div>
    </div>
    <div class="playInitial"></div>
  </div>
</div>
<div class="outer-container hide">
  <div class="containerB">
      <div class="modal-contentA">
        <button data-destination="#ba" class="playButtonA btnA-primary btnA">Listening</button>
        <button data-destination="#bb" class="playButtonA btnA-primary btnA">Live Performance</button>
        <button data-destination="#bc" class="playButtonA btnA-primary btnA">On Loop</button>
        <button data-destination="#bd" class="playButtonA btnA-primary btnA">Audio Visual</button>
        <button data-destination="#be" class="playButtonA btnA-primary btnA">Lyric Video</button>
        <button data-destination="#bf" class="playButtonA btnA-primary btnA">Music Video</button>
        <button data-destination="#bg" class="playButtonA btnA-primary btnA">From The Vault</button>
        <button data-destination="#bh" class="playButtonA btnA-primary btnA">Mystery Box</button>
        <button data-destination="#bi" class="playButtonA btnA-primary btnA">Cover</button>
        <button data-destination="#bj" class="playButtonA btnA-primary btnA">Remix</button>
        <button data-destination="#bk" class="playButtonA btnA-primary btnA">Instrumental</button>
        <button data-destination="#bl" class="playButtonA btnA-primary btnA">Extended Mix</button>
        <button data-destination="#bm" class="playButtonA btnA-primary btnA">Duet</button>
        <button data-destination="#bn"...

CSS

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

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

body:has(.modalA.active),
body:has(.modalB.active) {
  overflow: hidden;
}

.wrapA {
  opacity: 0;
  transition: opacity ease-in-out 3s;
  transition-delay: 0s;
}

.wrapA.visible {
  opacity: 1;
}


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

  100% {
    opacity: 1;
  }
}

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

.containerA {
  display: flex;
  padding: 8px 8px;
  position: fixed;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  /* Enable scroll if needed */
  margin: auto;
  background: #353198;
}

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



.curtain-left,
.curtain-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  transition: all ease 8s;
  transition-delay: 1s;
}

.curtain-left {
  left: 0;
}

.curtain-right {
  right: 0;
}

.curtain-left::before,
.curtain-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #121212;
}

.curtain-right::before {
  left: -100%;
}

.video-container.slide .curtain-left {
  transform: translateX(-100%);
}

.video-container.slide .curtain-right {
  transform: translateX(100%);
}


.outer-container {
  display: flex;
  min-height: 100vh;
}

.modal-contentA {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  max-width: 518px;
  gap: 10px;
  /*background: red;*/
  background: linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
     ...

JavaScript

/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {
  const container = document.querySelector(".video-container");
  container.classList.add("slide");
  const wrapper = document.querySelector(".wrapA");
  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 player = event.target;
  }

  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;
      const randomIndex = Math.floor(randomNumber);
      playerOptions.videoId = playerOptions.videoId[randomIndex];
    } else if (!playerOptions.videoId && id) {
      playerOptions.videoId = id;
    }
    video.dataset.shuffle = playerOptions.shuffle;
    playerOptions.events = playerOptions.events || {};
    playerOptions.events.onReady = onPlayerReady;
    playerOptions.events.onStateChange =...