JSFiddle - React, Tailwind, and code Playground

by nicomiceli

HTML

<script></script>
<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/rpHNaWNgZtk?enablejsapi=1"></iframe>

JavaScript

window.dataLayer = [];
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var pauseFlag = false;

function onYouTubePlayerAPIReady() {
	[].forEach.call(document.querySelectorAll('iframe[src*="youtube"]'), function(el) {
		var player = new YT.Player(el, {
			events: {
				'onReady': function() {
					console.log('ready')
				},
				'onStateChange': onPlayerStateChange,
				'onError': onPlayerError
			}
		});
	});
}

function onPlayerStateChange(event) {
	var videoName = event.target.F.videoData.title,
		player = event.target;
	setTimeout(percViewed, 1000, player);
	switch (event.data) {
		case YT.PlayerState.PLAYING:
			if (cleanTime(player) == 0) {
				dataLayer.push({
					'event': 'youtubeChange',
					'eventCategory': 'Video',
					'eventAction': 'Started',
					'eventLabel': videoName
				});
				console.log('video started');
				pauseFlag = false;
			} else {
				dataLayer.push({
					'event': 'youtubeChange',
					'eventCategory': 'Video',
					'eventAction': 'Played',
					'eventLabel': 'Video: ' + videoName + ' | Time: ' + cleanTime(player)
				});
				console.log('video played');
				pauseFlag = false;
			};
			break;
		case YT.PlayerState.PAUSED:
			if (player.getDuration() - player.getCurrentTime() != 0 & !pauseFlag) {
				dataLayer.push({
					'event': 'youtubeChange',
					'eventCategory': 'Video',
					'eventAction': 'Paused',
					'eventLabel': 'Video: ' + videoName + ' | Time: ' + cleanTime(player)
				});
				console.log('video paused');
				pauseFlag = true;
			};
			break;
		case YT.PlayerState.ENDED:
			dataLayer.push({
				'event': 'youtubeChange',
				'eventCategory': 'Video',
				'eventAction': 'Ended',
				'eventLabel': videoName
			});
			console.log('video ended');
			break;
	};
};

function onPlayerError(event) {
	switch (event.data) {
		case...