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="ratio-keeper wrap">
      <div class="video " data-id="1Q1aDAnBsU8"></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 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();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    //shufflePlaylist(player);
  }

  function onPlayerStateChange(event) {
    const player = event.target;
    return player;
  }


  function addPlayer(video, playerOptions) {
    playerOptions.videoId = playerOptions.videoId || video.dataset.id;
    playerOptions.events = playerOptions.events || {};
    playerOptions.events.onReady = onPlayerReady;
    playerOptions.events.onStateChange = onPlayerStateChange;


    const player = new YT.Player(video, playerOptions);
    return player;
  }

  return {
    addPlayer
  };
}());

const managePlayer = (function makeManagePlayer() {

  const playerVars = {
    autoplay: 0,
    controls: 1,
    disablekb: 1,
    // enablejsapi: 1,
    //loop: 1,
    //playlist: 1,
    fs: 0,
    iv_load_policy: 3
  };

  const defaults = {
    height: 360,
    host: "https://www.youtube-nocookie.com",
    playerVars,
    width: 640
  };

   function show(el) {
    el.classList.remove("hide");
   }

  function combinePlayerOptions(opts1 = {}, opts2 = {}) {
    const combined = Object.assign({}, opts1, opts2);
    Object.keys(opts1).forEach(function checkObjects(prop) {
      if (typeof opts1[prop] === "object") {
       ...