JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containerA">
  <div class="curtain">
    <button class="exitA" type="button" title="Exit" aria-label="Close"></button>
    <div class="ratio-keeper">
      <div class="video-one "></div>
      <div class="wrap">
        <div class="video video-frame" data-id="djV11Xbc914"></div>
      </div>
    </div>
    <div class="playInitial"></div>
  </div>

  <div class="modalA hide">
    <div class="modal-content">
      <button class="exitB" type="button" title="Exit" aria-label="Close"></button>
      <div class="buttonContainer">
        <button data-destination="#ba" class="playButton ba">ButtonA</button>
        <button data-destination="#bb" class="playButton bb">ButtonB</button>
        <button data-destination="#bc" class="playButton bc">ButtonC</button>

      </div>

    </div>

    <div id="ba" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="video video-frame" data-id="CHahce95B1g"></div>
          <div class="buttonA"></div>
          <div class="panel">
          </div>
        </div>
        <button class="close">&times</button>
      </div>
    </div>

    <div id="bb" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="video video-frame" data-id="CHahce95B1g"></div>
          <div class="buttonB"></div>
          <div class="panel">
          </div>
        </div>
        <button class="close">&times</button>
      </div>
    </div>

    <div id="bc" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="video video-frame" data-id="CHahce95B1g"></div>
          <div class="buttonC"></div>
          <div class="panel">

          </div>

        </div>
        <button class="close">&times</button>
      </div>
    </div>

  </div>
</div>
<!-- end modal -->



<div class="panel-container">
  <div class="slide panel-left">
    <div class="inner">
      <div class="container2"></div>
   ...

CSS

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

.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);
  height: 100vh;
  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);
}



.curtain.hide {
  display: none;
}
.containerA.hide {
  display: none;
}

.curtain {
  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;
}

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

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


/*.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/

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

.wrap.visible {
 ...

JavaScript

/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {

  const wrapper = document.querySelector('.wrap');
  wrapper.classList.add('visible');
};


const manageUI = (function makeManageUI() {
  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exitA");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  return {
    addExitHandlers
  };
}());

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 onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    if (player === players[0]) {
      shufflePlaylist(player);
    }
  }

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

  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;
    if (id.startsWith("PL")) {
      playerOptions.playerVars = playerOptions.playerVars || {};
      playerOptions.playerVars.listType = "playlist";
      playerOptions.playerVars.list = id;
    } else {
      // If videoId is an array, select a random element from it
      if...