You Tube Video API - load vs cue example

This fiddle shows the difference between load and cue player methods.

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<!-- Business Web Technology (ISYS3004) -->
<!-- School of Information Systems      -->
<!-- Curtin University                  -->

<!-- See External Resources for you tube api reference -->
<!-- https://www.youtube.com/iframe_api"               -->

<div id='player_div'></div>
<div id='ux'>
    <p>
        <label>loadVideoById</label>
        <input id='loadVideoById' value='Xz0eS-npK0k' />
        <button onclick='submitLoadVideoById()'>Submit</button>
    </p>
    <p>
        <label>loadVideoByURL</label>
        <input id='loadVideoByUrl' value='https://www.youtube.com/v/dL0QsC5vZXg' />
        <button onclick='submitLoadVideoByURL()'>Submit</button>
    </p>
    <p>
        <label>loadPlaylist</label>
        <input id='loadPlaylist' value='kPmkHYppC9M, hm2nb3acl2o, pfaw3j2dwxk' />
        <button onclick='submitLoadPlaylist()'>Submit</button>
    </p>
        <p>
        <label>cueVideoById</label>
        <input id='cueVideoById' value='Xz0eS-npK0k' />
        <button onclick='submitCueVideoById()'>Submit</button>
    </p>
    <p>
        <label>cueVideoByURL</label>
        <input id='cueVideoByUrl' value='https://www.youtube.com/v/dL0QsC5vZXg' />
        <button onclick='submitCueVideoByURL()'>Submit</button>
    </p>
    <p>
        <label>cuePlaylist</label>
        <input id='cuePlaylist' value='kPmkHYppC9M, M7lc1UVf-VE, hm2nb3acl2o, pfaw3j2dwxk, M7lc1UVf-VE' />
        <button onclick='submitCuePlaylist()'>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});
}
                         
function submitLoadVideoByURL() {
    var url = document.getElementById("loadVideoByUrl").value;
    player.loadVideoByUrl({mediaContentUrl: url});
}

function submitLoadPlaylist() {
    var playlistString = document.getElementById("loadPlaylist").value;
   ...