JSFiddle - React, Tailwind, and code Playground

by jslowack

HTML

<div class="background">
  <button class="start-video">Start Video</button>
</div>
<div class="player-wrapper">
  <div id="player"></div>
</div>

CSS

button {
  /* important properties*/
  z-index: 3;
  position: relative;
  pointer-events: none;
  opacity: 0;
  /* not important */
  margin-top: 50px;
  font-size: 50px;
  background: blue;
  color: white;
}

button.visible {
  /* important properties*/
  opacity: 1
}

.background {
  /* important properties*/
  position: absolute; // or position:relative;
  z-index: 2;
  pointer-events: none;
  /* not important */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: red;
}

.player-wrapper {
  /* important properties*/
  overflow: hidden;
  z-index: 1;
  position: relative;
}

.player-wrapper.playing {
  /* important properties*/
  z-index: 4;
}

JavaScript

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

var player;

onYouTubeIframeAPIReady = function() {
  player = new YT.Player('player', {
    height: '244',
    width: '434',
    videoId: 'objQ9x1hxfg', // youtube video id
    playerVars: {
      'autoplay': 0,
      'rel': 0,
      'showinfo': 0
    },
    events: {
      'onStateChange': onPlayerStateChange,
      'onReady': onPlayerReady
    }
  });
}

onPlayerReady = function(event) {
  placeVideoBehindButton();
}

onPlayerStateChange = function(event) {
  if (event.data == YT.PlayerState.ENDED || event.data == YT.PlayerState.PAUSED) {
    placeVideoBehindButton();
  } else if (event.data == YT.PlayerState.PLAYING) {
    placeVideoBack();
  }
}

placeVideoBack = function() {
  $('.start-video').removeClass('visible');
  $(".player-wrapper").removeAttr('style').addClass('playing');
  showButton(false);
}

placeVideoBehindButton = function() {
  var left = $('.start-video').offset().left;
  var top = $('.start-video').offset().top;
  var width = $('.start-video').outerWidth();
  var height = $('.start-video').outerHeight();

  $(".player-wrapper").css({
    'position': 'absolute',
    'top': top,
    'left': left,
    'width': width,
    'height': height
  }).removeClass('playing');
  showButton(true);

}

showButton = function(toggle) {
  $('.start-video').toggleClass('visible', toggle);
}

// for browser that don't support pointer-events, bind click event on button
$(document).on('click', '.start-video', function() {
  player.playVideo();
});