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;
  transform: translateY(0);
}

.video-containerA.slide .curtain {
  transition: 8s ease-in-out;
  transition-delay: 1s;
  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: 1s;
}


.flex-container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
 ...

JavaScript

/*global YT */
/*jslint browser:true */
/*jslint devel: true */

  window.onload = function() {
    const containerA = document.querySelector(".video-containerA");
    const containerB = document.querySelector(".video-containerB");
    const containerC = document.querySelector(".video-containerC");
    const heartPieceA = document.querySelector(".video-containerA .heart");
    const heartPieceB = document.querySelector(".video-containerB .heart");
    const heartPieceC = document.querySelector(".video-containerC .heart");
    const exitButton = document.querySelector(".exitA");

    heartPieceA.classList.add("visible");

    heartPieceA.addEventListener("transitionend", function() {
      //if (e.propertyName !== 'opacity') return;
      containerA.classList.add("slide");
    });

    heartPieceB.addEventListener("animationend", function() {
      //if (e.propertyName !== 'opacity') return;
      containerB.classList.add("slide");
    });

    heartPieceC.addEventListener("animationend", function() {
      //if (e.propertyName !== 'opacity') return;
      containerC.classList.add("slide");
    });

    containerA.addEventListener("transitionend", function(event) {
      if (event.propertyName !== "transform") return;
      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) {
   ...