JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-containerA">
      <div class="video-containerA">
        <button class="exitA" type="button" title="Exit" aria-label="Exit"></button>
        <div class="ratio-keeper ">
          <div class="video playA"></div>
          <div class="curtain ">
            <div class="flex-container ">
              <div class="heart ">
                <div class="heart-piece-0"></div>
                <div class="heart-piece-1"></div>
                <div class="heart-piece-2"></div>
                <div class="heart-piece-3"></div>
                <div class="heart-piece-4"></div>
                <div class="heart-piece-5"></div>
                <div class="heart-piece-6"></div>
                <div class="heart-piece-7"></div>
                <div class="heart-piece-8"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="playA"></div>

      </div>
      <div class="video-containerB hide">
        <button class="exitB" type="button" title="Exit" aria-label="Exit"></button>
        <div class="ratio-keeper">
          <div class="video playB"></div>
          <div class="curtain ">
            <div class="flex-container ">
              <div class="heart ">
                <div class="heart-piece-0"></div>
                <div class="heart-piece-1"></div>
                <div class="heart-piece-2"></div>
                <div class="heart-piece-3"></div>
                <div class="heart-piece-4"></div>
                <div class="heart-piece-5"></div>
                <div class="heart-piece-6"></div>
                <div class="heart-piece-7"></div>
                <div class="heart-piece-8"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="playB"></div>

      </div>
      <div class="video-containerC hide">
        <button class="exitC" type="button" title="Exit" aria-label="Exit"></button>
        <div class="ratio-keeper">
          <div class="video...

CSS

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

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

body:has(.modal.active) {
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.outer-containerA {
  background: #15202b;
}

.outer-containerA,
.outer-containerB,
.modal {
  display: flex;
  position: fixed;
  inset: 0;
  overflow: auto;
  /* Enable scroll if needed */
}

.video-containerA,
.video-containerB,
.video-containerC {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
}

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

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

.ratio-keeper iframe,
.curtain {
  position: absolute;
  inset: 0;
}

.curtain {
  /*position: absolute;
  height: 100%;
  width: 100%;
  inset:0;*/
  --wide: 8.8%;
  --angle1: 0;
  --angle2: -90;
  background: repeating-linear-gradient(calc(var(--angle1) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px)),
    repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px));
  background-color: #222;
  border-bottom: 2px solid #191919;
  background-repeat: no-repeat;
  overflow: hidden;
}

.video-containerA.slide .curtain {
  transition: 8s ease-in-out;
  transition-delay: 2.5s;
  transform: translateY(-100%);
}

@keyframes slide {
  to {
    transform: translateY(-100%);
  }
}

.video-containerB.slide .curtain,
.video-containerC.slide .curtain {
  animation: slide 8s ease-in-out forwards;
  animation-delay: 2.5s;
}

.video-containerA.slide .curtain,
.video-containerB.slide .curtain,
.video-containerC.slide .curtain...

JavaScript

/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {
  const container = document.querySelector(".video-containerA");
  const exitButton = document.querySelector(".exitA");

  container.classList.add("slide");

  container.addEventListener("transitionend", function() {
    exitButton.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 addPlayer(video, playerOptions) {
    playerOptions.playerVars = playerOptions.playerVars || {};
    video.dataset.shuffle = playerOptions.shuffle;
    playerOptions.events = playerOptions.events || {};
    playerOptions.events.onReady = onPlayerReady;
    players.push(new YT.Player(video, playerOptions));
  }

  function destroyPlayers() {
    players.forEach(function(player) { // Use player array here
      const playerElement = player.getIframe();
      if (playerElement) {
        const playerClass = playerElement.className;
        console.log("Destroying player with class: " + playerClass);
        player.destroy();
      }
    });
    console.log("playerRemoved");
  }

  return {
    addPlayer,
    destroyPlayers
  };
}());

const managePlayer = (function makeManagePlayer() {
  const playerVars = {
    autoplay: 0,
    controls: 0,
    disablekb: 1,
    fs: 0,
    iv_load_policy: 3
  };
  const defaults = {
    height: 360,
    host:...