JSFiddle - React, Tailwind, and code Playground

by jmsmarcelo

HTML

<div id="player"></div>
<a href="#" id="resume">Play</a>

JavaScript

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

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: '0Bmhjf0rKe8',
        events: {
			'onStateChange': onPlayerStateChange
		}
    });
    document.getElementById('resume').onclick = function() {
        PlayPause();
        return false;
    };
}
// 4. This function change name of tag click.
var playerState;
function onPlayerStateChange(event) {
	var getId = document.getElementById('resume');
	if(event.data === 0) {
		getId.innerText = 'Play';
	}
  else if(event.data === 1) {
		getId.innerText = 'Pause';
	}
  else if(event.data === 2) {
		getId.innerText = 'Resume';
	}
  else if(event.data === 3) {
		getId.innerText = 'Loading...';
	}
	playerState = event.data;
}
// 5. This function Play/Pause the video.
function PlayPause() {
	if(playerState == '1') {
		player.pauseVideo();
	}
	else {
		player.playVideo();
	}
}