JSFiddle - React, Tailwind, and code Playground

HTML

<audio></audio>
<div class="outer">
	<div class="tcell">
		<div class="containera hide">
			<div class="video-wrapper">
				<div class="ratio-keeper">
					<div class="wrapa">
						<div class="video video-frame"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<svg class="playa " width="100%" height="100%" viewBox="0 0 64 64">
		<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
	</svg>
	<svg class="playb" width="100%" height="100%" viewBox="0 0 64 64">
		<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
	</svg>
	<div class="containerb hide">
		<div class="wrapb">
			<div class="playButton b1" style="margin:2px 2px;" data-audio="http://getradio.me/svoefm">
				<div class="button">
					<div class="light"></div>
					<div class="dots"></div>
					<div class="characters"></div>
					<div class="shine"></div>
					<div class="shadow"></div>
				</div>
			</div>
			<div class="playButton b2" style="margin: 2px 2px 0 196px;"
				data-audio="https://getradio.me/rcm">
				<div class="button">
					<div class="light"></div>
					<div class="dots"></div>
					<div class="characters"></div>
					<div class="shine"></div>
					<div class="shadow"></div>
				</div>
			</div>
			<div class="playButton b3" style="margin: 2px 0 0 390px;"
				data-audio="https://getradio.me/spdeep">
				<div class="button">
					<div class="light"></div>
					<div class="dots"></div>
					<div class="characters"></div>
					<div class="shine"></div>
					<div class="shadow"></div>
				</div>
			</div>
			<div class="playButton b4" style="margin:241px 0 0 2px;"
				data-audio="https://radio.nueuphoria.com:8443/live">
				<div class="button">
					<div...

SCSS

$color: #ff1818;
$color2: orange;
$color3: orangered;
$color4: gold;
$color5: blue;
$color6: cyan;
$color7: skyblue;
$color8: yellowgreen;
$color9: darkseagreen;


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

body {
  background: #353198;
  animation: fade 2s ease 0s forwards;
}

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

  100% {
    opacity: 1;
  }
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.containera {
  position: absolute;
  top: 0;
  left: 0;
  /* bottom: 0;*/
  right: 0;
  width: 100%;
  /*height: 100%;*/
  min-height: 100%;
  background-image:
    linear-gradient(green 5px, #0000 5px),
    linear-gradient(90deg, green 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(black 20px, #0000 20px 150px, black 150px),
    linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
    linear-gradient(green 25px, #0000 25px 145px, green 145px),
    linear-gradient(90deg, green 25px, #0000 25px 145px, green 145px),
    linear-gradient(black 30px, #0000 30px 140px, black 140px),
    linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
    linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(black 40px, #0000 40px 130px, black 130px),
    linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
    linear-gradient(green 45px, #0000 45px 125px, green 125px),
    linear-gradient(90deg, green 45px, #0000 45px 125px, green 125px),
    linear-gradient(black 50px, #0000 50px 120px, black 120px),
    linear-gradient(90deg, black 50px, #0000 50px 120px,...

JavaScript

(function manageCovera() {

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

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const theplay = cover.parentElement.querySelector(".playb");
    hide(theplay);
    const thewrap = cover.parentElement.querySelector(".containera");
    show(thewrap);
  }

  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

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

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

  function addPlayer(video) {

    const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };
    player = new YT.Player(video, config);

  }

  function play() {
    player.playVideo();
  }
  return {
    addPlayer,
    play
  };
}());

function onYouTubeIframeAPIReady() {
  const cover = document.querySelector(".playa");
  const wrapper = cover.parentElement;
  const frameContainer = wrapper.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}

(function initCover() {

  function coverClickHandler() {
   ...