JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myModal" class="modal open">
  <div class="modal-content">
    <div class="blog-pager close">
      <a title="Exit" aria-label="Close"></a>
    </div>
    <div class="container">
    <div class="ratio-keeper wrap">
      <div class="video " data-id="1Q1aDAnBsU8"></div>
    </div></div>
    <div class="playa"></div>
  </div>
</div>
<!-- end modal -->

<div class="container">
  <div class="ratio-keeper">
    <div class="video " data-id="1Q1aDAnBsU8"></div>
  </div>
  <div class="playb"></div>
</div>
<div class="container">
  <div class="ratio-keeper">
    <div class="video" data-id="1Q1aDAnBsU8"></div>
  </div>
  <div class="playc"></div>
</div>
<div class="container">
  <div class="ratio-keeper">
    <div class="video" data-id="1Q1aDAnBsU8"></div>
  </div>
  <div class="playd"></div>
</div>
<div class="container">
  <div class="ratio-keeper">
    <div class="video" data-id="1Q1aDAnBsU8"></div>
  </div>
  <div class="playe"></div>
</div>
<div class="container">
  <div class="ratio-keeper">
    <div class="video " data-id="1Q1aDAnBsU8"></div>
  </div>
  <div class="playf"></div>
</div>

CSS

.modal {
  display: none;
}

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

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  position: fixed;
  /* Stay in place */
  z-index: 99;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black w/ opacity */
}

.modal-content {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
  margin: auto;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #0059dd;
  z-index: 100;
  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,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  width: 100%;
  max-width: 642px;
}

.close {
  display: block;
  color: red;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* mostly code below from fiddle except i changed the blog-pager*/

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

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

.container {
  max-width: 642px;
  margin: 15px auto 30px;
  padding: 15px;
  /*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
  border: 1px solid #0059dd;
  border-radius: 0;
  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,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
...

JavaScript

// modal code
(function (d) {
  const myModal = d.querySelector("#myModal");
  const close = d.querySelector(".close");
  close.addEventListener("click", clickMenu);
    myModal.addEventListener("click", clickMenu);
  function clickMenu() {
    myModal.classList.remove("open");
  }
})(document);
//end modal code

const manageCover = (function makeManageCover() {
 
  


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



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

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

const manageUI = (function makeManageUI() {

  function exitClickHandler() {
  
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

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

  function init() {
    const exitButtons = document.querySelectorAll(".close");
    addClickToExit(exitButtons);
  }

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

const videoPlayer = (function makeVideoPlayer() {

  let player;

  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) {
    player.setShuffle(true);
    player.playVideoAt(0);
    //player.stopVideo();
 ...