JSFiddle - React, Tailwind, and code Playground

HTML

<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" width="100" height="100" fill="var(--color-d)" />
      <rect x="40" y="40" width="90" height="90" fill="var(--color-a)" />
      <rect x="45" y="45" width="80" height="80" fill="var(--color-b)" />
      <rect x="50" y="50" width="70" height="70" fill="var(--color-c)" />
      <rect x="55" y="55" width="60" height="60" fill="var(--color-d)" />
      <rect x="60" y="60" width="50" height="50" fill="var(--color-a)" />
      <rect x="65" y="65" width="40" height="40" fill="var(--color-b)" />
      <rect x="70" y="70" width="30" height="30" fill="var(--color-c)" />
      <rect x="75" y="75" width="20" height="20" fill="var(--color-d)" />
      <rect x="80" y="80" width="10" height="10" fill="var(--color-a)" />
    </svg>
  </div>
</div>

<div id="myModal" class="modal open">
	<div class="modal-content">
		<button class="exitInitial" type="button" title="Exit" aria-label="Close"></button>
		<div class="ratio-keeper">
			<div class="wrap hide">
				<div class="video video-frame" data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
			</div>
			<div class="panel">
			  
			</div>
		</div>
		<div class="playInitial remove"></div>
  
	</div>

</div>
<!-- end modal -->

<template id="image-templateA">
  <img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
  <div>
    <img...

CSS

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

svg {
  --color-a: #1155cc;
  --color-b: black;
  --color-c: #1155cc;
  --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: 3;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: transparent;
}

.modal-content {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

  padding: 1px;
}

.modal-content::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.modal-content:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #0059dd;
  z-index: 2;
  pointer-events: none;
  /* just in case*/
}

:root {
  --wide: 8.8%;
  --angle1: 0;
  --angle2: -90;
}

.panel {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  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;
  z-index: 0;
  overflow: hidden;
  transform: translateY(0%);
...

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");
    splashScreen.addEventListener("transitionend", function () {
        splashScreen.style.pointerEvents = "none";
        wrap.classList.remove("hide");
    });

    const closeButton = document.querySelector(".exitInitial");
    panel.addEventListener("transitionend", function () {
        closeButton.classList.add("visible");
    });
};


const videoPlayer = (function makeVideoPlayer() {

    let 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) {
                    const hasIframe = player.getIframe();
                    const isDifferentPlayer = player !== eventPlayer;
                    const isPlaying = player.getPlayerState() === 1;
                    if (hasIframe && isDifferentPlayer && isPlaying) {
                        player.pauseVideo();
                        console.log("pause");
                    }
                });
            }
        }
    }

   ...