JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<script src="https://www.youtube.com/iframe_api"></script>

<div id='player_div'></div>
<div id='ux'>
    <p>
        <label>loadVideoById</label>
        <input id='loadVideoById' value='Xz0eS-npK0k' />
        <button onclick='submitLoadVideoById()'>Submit</button>
    </p>
</div>
<div id='history_div'></div>

CSS

.error {
    color: red;
}

label {
    display: inline-block;
    width: 100px;
    text-align: right;
}

#ux {
    visibility: hidden;
}

JavaScript

var player;                   // You Tube player object
var theHistory = "";
var startTime = -1;


// When You Tube API is ready, create a new 
// You Tube player in the div with id 'player'
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player_div', 
    {
        videoId: 'P5_GlAOCHyE',   // Load the initial video
        playerVars: {
               autoplay: 0,      // Don't autoplay the initial video
               rel: 0,           //  Don’t show related videos
               theme: "light",   // Use a light player instead of a dark one
               controls: 1,      // Show player controls
               showinfo: 0,      // Don’t show title or loader
               modestbranding: 1 // No You Tube logo on control bar
        },
        events: {               
               // Callback when onReady fires
               onReady: onReady,
            
               // Callback when onStateChange fires
               onStateChange: onStateChange,   

               // Callback when onError fires
               onError: onError
        }
    });

}

// Callback specified to process the onReady event has been received
// so can proceed with creating and managing You Tube player(s)
function onReady(event) {
  var time = getTime();
  theHistory = "player ready " + time + "<br/>" + theHistory;
  document.getElementById("history_div").innerHTML = theHistory;
  console.log("player ready");
  
  // make the interface visible since we're now ready to go
  document.getElementById('ux').style.visibility = 'visible';
    
}

function submitLoadVideoById() {
    var videoId = document.getElementById("loadVideoById").value;
    player.loadVideoById({videoId: videoId});
}
       

// Log state changes
function onStateChange(event) {
    var time = getTime();
    var state = "undefiend";
    switch (event.data) {
        case YT.PlayerState.UNSTARTED:
            state= "unstarted";
            break;
        case YT.PlayerState.ENDED:
            state...