JSFiddle - React, Tailwind, and code Playground

by The_Kinng_96

HTML

<div class="container">
	<div class="video-wrapper">
		<div class="ratio-keeper">
			<div class="wrap hide">
				<div class="video video-frame"></div>
			</div>
		</div>
	</div>
  <div class="play cover">
    <button type="button" aria-label="Open"></button>  
  </div>
</div>

CSS

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

body {



  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  margin: 0 8px;
}

.video-wrapper {
  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;
  animation: noClick 5.2s;

}

@keyframes noClick {
  0% {
    pointer-events: none;
  }

  99% {
    pointer-events: none;
  }

  100% {
    cursor: pointer;
    pointer-events: initial;
  }
}

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

.video-wrapper.slide::after {
  content: "";
  /*animation: border 1s ease-in 1 forwards;*/
  border: 1px solid #0059dd;

  transition: border 2s ease-in;
}

/*@keyframes border {

  to {
    border: 1px solid #0059dd;

  }
}*/


.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  outline: 1px solid #333;
}






.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 2.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;
}

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

  100% {

    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.play {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.play button {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin:...

JavaScript

const manageCover = (function makeManageCover() {
  const events = {};

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

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

  function fadeVideoIn(cover) {
  const buttonCover = document.querySelector(".play.cover");
  hide(buttonCover)
  hide(cover);
  const videoWrapper = document.querySelector(".video-wrapper");
  videoWrapper.classList.add("slide");
  return videoWrapper;
  }

  function showVideo(videoWrapper) {
    const thewrap = videoWrapper.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const videoWrapper = fadeVideoIn(cover);
    showVideo(videoWrapper);
    cover.dispatchEvent(events.afterClickCover);
  }

  function init(callback) {
    const button = document.querySelector(".play button");
    button.addEventListener("click", coverClickHandler);
    events.afterClickCover = new Event("afterClickCover");
    button.addEventListener("afterClickCover", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  const events = {};
  const eventHandlers = {};
  let player = null;


  function loadIframeScript() {
    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 onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
  }

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

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    shufflePlaylist(player);
    const iframe = player.h;
   ...