JSFiddle - React, Tailwind, and code Playground

by dsgnr

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="player-test"></div>

<a id="test">Click me</a>

CSS

a{
  color:red;
  font-size:34px;
}

JavaScript

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//Debug info
//console.log($(".l-hero__video").attr("src"))

//Dynamically add required attributes for video tracking
//CAVEAT: Page flashes briefly
//$(".l-hero__video").attr("src", $(".l-hero__video").attr("src")+"&enablejsapi=1&version=3").attr("id","tutorial")

//Debug info
//console.log($(".l-hero__video").attr("src"))
//Mandatory callback function. Window scope.
var player;
window.onYouTubeIframeAPIReady = function() { 
  console.log("loaded");
  player = new YT.Player('tutorial', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
  
  console.log(player);
}

var dataLayer = [];

//Secondary callbacks
window.onPlayerReady = function() {
  console.log("hey Im ready");
  //do whatever you want here. Like, player.playVideo();
}

//Secondary callbacks
window.onPlayerStateChange = function(event) {
 event["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, event["target"]);
	var video_data = event.target["getVideoData"](),
  label = video_data.video_id + ':' + video_data.title;
  console.log(label);
  
  switch(event.data) {
    case YT.PlayerState.PLAYING:
       console.log("playing");
       dataLayer.push({
           event: 'youtube',
           eventCategory: 'youtube',
			     eventAction: 'play',
           eventLabel: label
        });
       break;
    case YT.PlayerState.PAUSED:
      console.log("paused");
      dataLayer.push({
           event: 'youtube',
           eventCategory: 'youtube',
			     eventAction: 'play',
           eventLabel: label
      });
      break;
    case YT.PlayerState.ENDED:
      console.log("ended");
      dataLayer.push({
           event: 'youtube',
          ...