JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container1 ">
  <div class="ratio-keeper">
    <div class="wrap embed-youtube ">
      <div class="video embed-youtube  " data-id="djV11Xbc914">
      </div>
      <button class="playa cover playgreen  embed-youtube-play" type="button" aria-label="Open"></button>
    </div>
  </div>
  <button class="exit" type="button" aria-label="Open"></button>
</div>
<div class="container2">
  <div class="container">
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playb cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <button class="exit" type="button" aria-label="Open"></button>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playc cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playd cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playe cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playf cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
  </div>
</div>
<div class="container3">
  <div class="container">
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div...

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


body {
  background: #302b63;
}

.container1 {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;
}

.bg1 .container1 {
  display: none;
}

body.initial-fade {
  animation: initial-fade 1s ease forwards;
}

@keyframes initial-fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    pointer-events: none;
  }
}

body.bg1 {
  animation: bg1 5s ease 0s forwards;
}

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

  100% {
    opacity: 1;
    background: teal;
  }
}

body.bg2 {
  animation: bg2 5s ease 0s forwards;
}

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

  100% {
    opacity: 1;
    background: teal;
  }
}


.container2 {
  display: none;
}

.bg1 .container2 {
  display: flex;
}

.container3 {
  display: none;
}

.bg2 .container3 {
  display: flex;
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  padding: 8px 8px;
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  clip-path: circle(50%);
}


.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.hide {
  display: none;
}

JavaScript

const manageCover = (function makeManageCover() {

  function showCover(playButton) {
    const cover = playButton.parentElement;
    cover.classList.add("active");
  }

  function openCurtain(curtain) {
    curtain.classList.add("slide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    showCover(cover);
    const curtain = evt.currentTarget.parentElement
    .parentElement.parentElement;
    openCurtain(curtain);
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector(coverSelector);
    cover.addEventListener("click", handler);
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function playButtonHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler);
    });
  }

   function init(/*selectors*/ ) {
  //config.containers = document.querySelector(selectors.container);
 // const allContainers = document.querySelector(".container");
  //const playButtons = document.querySelector(selectors.playButton);
  const allPlaybuttons = document.querySelectorAll(".cover");
  //const allPlaybuttons = document.querySelectorAll(".embed-youtube-play");
  addClickToButtons( allPlaybuttons);
   }
  

  return {
    addCoverHandler,
   init
  };
}());

const manageUI = (function makeManageUI() {
const body = document.body;

    const players = [];

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

  // inline arrow function, direct return
  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

  function resetBackground(backgroundSelector) {
    const background =...