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">
			<div class="wrap hide">
					<div class="video video-frame remove" data-id="AxLxnN6z0Og"></div>
			</div>
			<div class="panel"></div>
		</div>
		<div class="playInitial remove"></div>
	</div>
  <svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <use href="#box" />
  </svg>
</div>
<!-- end modal -->

<div class="container">
	<div class="ratio-keeper">
		<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
	</div>
	<div class="play1"></div>
</div>
<div class="container">
	<div class="ratio-keeper">
		<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
	</div>
	<div class="play2"></div>
</div>
<div class="container">
	<div class="ratio-keeper">
		<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
	</div>
	<div class="play3"></div>
</div>
<div class="container">
	<div class="ratio-keeper">
		<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
	</div>
	<div class="play4"></div>
</div>
<div class="container">
	<div class="ratio-keeper">
		<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
	</div>
	<div class="play5" data-id="AxLxnN6z0Og"></div>
</div>
<div class="splash-screen">
	<div class="circle">
		<svg class="box" width="170" height="170" viewBox="0 0 170 170">
			<rect x="0" y="0" width="170" height="170" fill="var(--color-a)" />
			<rect x="5" y="5" width="160" height="160" fill="var(--color-b)" />
			<rect x="10" y="10" width="150" height="150" fill="var(--color-c)" />
			<rect x="15" y="15" width="140" height="140" fill="var(--color-d)" />
			<rect x="20" y="20" width="130" height="130" fill="var(--color-a)" />
			<rect x="25" y="25" width="120" height="120" fill="var(--color-b)" />
			<rect x="30" y="30" width="110" height="110" fill="var(--color-c)" />
			<rect x="35" y="35"...

CSS

/*:root {
    --color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;
  }*/

svg {
  --color-a: red;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.modal {
  display: none;
}

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

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  height:100%;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: red;
  /* Fallback color */
  /*background-color: rgb(0, 0, 0, 0);*/

  /*--color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;



    background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
      linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
      linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
      linear-gradient(90deg,
        var(--color-b) 10px,
        #0000 10px 160px,
        var(--color-b) 160px),
      linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
      linear-gradient(90deg,
        var(--color-c) 15px,
        #0000 15px 155px,
        var(--color-c) 155px),
      linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
      linear-gradient(90deg,
        var(--color-d) 20px,
        #0000 20px 150px,
        var(--color-d) 150px),
      linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
      linear-gradient(90deg,
        var(--color-a) 25px,
        #0000 25px 145px,
        var(--color-a) 145px),
      linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
      linear-gradient(90deg,
        var(--color-b) 30px,
        #0000 30px 140px,
        var(--color-b) 140px),
      linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
      linear-gradient(90deg,
    ...

JavaScript

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

window.onload = function () {
  const splashScreen = document.querySelector(".splash-screen");
  splashScreen.classList.add("hide");

  const panel = document.querySelector(".panel");
  panel.classList.add("slide");

  const wrap = document.querySelector(".wrap");

  // Add event listener to splashScreen
  splashScreen.addEventListener("transitionend", function () {
    // Unhide .wrap after splash-screen transition ends
    wrap.classList.remove("hide");
  });

  panel.addEventListener("transitionend", function () {
    //  panel.style.display = 'none';
    const blogPager = document.querySelector(".blog-pager");
    //blogPager.classList.remove('hide');
    blogPager.classList.add("visible");
  });
};

function addCloseButtonHandler(handler) {
  const closeButton = document.querySelector(".close");
  closeButton.addEventListener("click", handler);
}

function manageModal() {
  const myModal = document.querySelector("#myModal");
  const closeButton = document.querySelector(".close");



  function modalClickHandler() {
 myModal.classList.remove("open");
    }

   
  
  addCloseButtonHandler(modalClickHandler);
}

const videoPlayer = (function makeVideoPlayer() {
  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 onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    if (player === players[0]) {
      shufflePlaylist(player);
    }
  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerStateChange(event) {
    const eventPlayer = event.target;
    if (eventPlayer !== players[0]) {
      if (event.data === 1) {
        players.forEach(function pauseOtherVideos(player) {
   ...