Youtube API - Events

by billjohnston4

HTML

<div id="testVideo" class="hidden"></div>

CSS

.hidden{opacity:0}

JavaScript

// From http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

 var ga = document.createElement('script');
 ga.type = 'text/javascript';
 ga.async = false;
 ga.src = 'http://www.youtube.com/player_api';
 var s = document.getElementsByTagName('head')[0];
 s.appendChild(ga);

 var done = false;
 var player,
     myWidth = "145px",
     myHeight = "100px";

 function onYouTubePlayerAPIReady() {
     player = new YT.Player('testVideo', {
         height: myWidth,
         width: myHeight,
         videoId: 'GslPzhFLyas',
         events: {
             'onReady': onPlayerReady,
             'onStateChange': onPlayerStateChange
         },
          playerVars: {
             controls:0,
             showinfo:0
          }        
     });
 }

 function onPlayerReady(evt) {
     console.log('onPlayerReady', evt);
     evt.target.playVideo();
 }

 function onPlayerStateChange(evt) {
     if (evt.data == -1) {
        evt.target.a.width = "200px"; 
        evt.target.a.height = "200px"; 
     }
     else if (evt.data == 1) {
          evt.target.a.className = "";
         evt.target.a.width = myWidth; 
         evt.target.a.height = myHeight; 
         done = true;
     }
 }

 function stopVideo() {
     console.log('stopVideo');
     player.stopVideo();
 }