JSFiddle - React, Tailwind, and code Playground

by Kishore Polsani

HTML

<h1>In page youtube video player API</h1>

<br/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/pdVNa6j-kRg?list=PL-YLElxe3rJ38q3sFf4d2LVzA9L_1QlMo" frameborder="0" allowfullscreen></iframe>

JavaScript

//YOUTUBE API
// 2. 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);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
onYouTubeIframeAPIReady();

function onYouTubeIframeAPIReady() {
    alert("onYouTubeIframeAPIReady");
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    alert("onPlayerReady");
    var embedCode = event.target.getVideoEmbedCode();
    event.target.playVideo();
    if (document.getElementById('embed-code')) {
        document.getElementById('embed-code').innerHTML = embedCode;
    }
}
var done = false;

function onPlayerStateChange(event) {
    alert("onPlayerStateChange");
    switch (event.data) {
        case YT.PlayerState.PLAYING:
            alert("PLAYING");
            playVideo();
            break;
        case YT.PlayerState.ENDED:
            alert("ENDED");
            stopVideo();
            break;
        case YT.PlayerState.PAUSED:
            alert("PAUSED");
            pauseVideo();
            break;
        case YT.PlayerState.BUFFERING:
            alert("BUFFERING");
            break;
        case YT.PlayerState.CUED:
            alert("CUED");
            break;
        default:
    }

}

function stopVideo() {
    player.stopVideo();
}

function playVideo() {
    player.playVideo();
}

function pauseVideo() {
    player.pauseVideo();
}

function getPlayerState() {
    alert("Player state: " +...