JSFiddle - React, Tailwind, and code Playground

by dsgnr

HTML

<iframe style="width:100%; min-height:400px;" id="sample-video" class="yt-video" title="Our Economy Skycouch™ video" src="https://www.youtube.com/embed/oLTUz9qk45o?autoplay=0&amp;showinfo=0&amp;controls=0&amp;rel=0&enablejsapi=1&version=3"></iframe>


<ul id="events">
</ul>

JavaScript

// some code just for this demo, ignore
dataLayer = {}
dataLayer.push = function(obj){
	var textnode = document.createTextNode("Category: " + obj.youtubeEventCategory+", Action: " + obj.youtubeEventAction + ", Label: " + obj.youtubeEventLabel);
  var node = document.createElement("li");
  node.appendChild(textnode);
  document.getElementById("events").appendChild(node);
  console.log("Category: " + obj.youtubeEventCategory +", Action: " + obj.youtubeEventAction + ", Label: " + obj.youtubeEventLabel);
};

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


//Called after load of the YouTube iframe API. Ensure this function has window scope.

window.onYouTubeIframeAPIReady = function() {
window.players = [];
console.log("loaded");
	for(var v = document.getElementsByTagName("iframe"), i = v.length; i--;){
    players[i] = new YT.Player(v.id, {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': onPlayerError
      }
    });
  }
}
 
function onPlayerReady(e) {
// Use this if you'd like to enable autoplay on the videos. Otherwise, leave this function blank.
// e.target.playVideo();
};
 
//Called after each change in video state (play/pause/end)
function onPlayerStateChange(event) {
  var video_data = event.target["getVideoData"](),
      label = video_data.video_id + ':' + video_data.title;
 
  event["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, event["target"]);
 
  switch(event.data) {
    case YT.PlayerState.PLAYING:
       dataLayer.push({
           event: 'youtube',
           youtubeEventCategory: 'youtube',
           youtubeEventAction: 'play',
           youtubeEventLabel: label
        });
       break;
    case YT.PlayerState.PAUSED:
      dataLayer.push({
           event: 'youtube',
    ...