You Tube Video API - JavaScript Template

This fiddle is a starter template that uses JavaScript to load a video and set basic parameters.

by Brian von Konsky

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='history_div'></div>

CSS

.error {
    color: red;
}

JavaScript

var player;                  // You Tube player object
var videoId="P5_GlAOCHyE";   // You Tube ID
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: videoId,   // 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");
 
  // Can process other player requests or build an interface
  // that will process requests here.
}

// 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 = "ended";
            break;
        case YT.PlayerState.PLAYING:
            state = "playing";
            break;
        case...