title: Youtube API fullscreen problems
body: <p>I have an RSS newsreader project under development here: <a href="http://davidcool.com/feeds" rel="nofollow">http://davidcool.com/feeds</a></p>
  
  <p>I have this code that deals with embedding the youtube HTML player:</p>
  
  <pre><code> /*!
   * Finds all youtube embeds and creates thumbnail + play button
   */
  
  // Find all the YouTube video embedded on a page
  var videos = document.getElementsByClassName("youtube"); 
  
  for (var i=0; i&lt;videos.length; i++) {
  
    var youtube = videos[i];
  
    // Based on the YouTube ID, we can easily find the thumbnail image
    var img = document.createElement("img");
  
    img.setAttribute("class", "item-thumb");
    img.setAttribute("src", "http://i.ytimg.com/vi/" + youtube.id + "/hqdefault.jpg");
  
    // Overlay the Play icon to make it look like a video player
    var playIcon = document.createElement("img");
  
    playIcon.setAttribute("class","item-play");
    playIcon.setAttribute("src", "play.png");   
  
    youtube.appendChild(img);
    youtube.appendChild(playIcon);
  
    // Attach an onclick event to the YouTube Thumbnail
    youtube.onclick = function() {
  
    // Create an iFrame with autoplay set to true
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id",this.id);
    iframe.setAttribute('allowfullscreen','1');
    iframe.setAttribute('frameborder','0')
    iframe.setAttribute("src", "http://www.youtube.com/embed/" + this.id + "?autoplay=1&amp;autohide=1&amp;border=0&amp;vq=hd720&amp;modestbranding=1&amp;wmode=opaque&amp;enablejsapi=1&amp;origin=http://davidcool.com");
  
    // The height and width of the iFrame should be the same as parent
    iframe.style.width  = this.style.width;
    iframe.style.height = this.style.height;
  
    // Replace the YouTube thumbnail with YouTube HTML5 Player
    this.parentNode.replaceChild(iframe, this);
  
    if (iframe.requestFullscreen) {
      iframe.requestFullscreen();
    }
    else if (iframe.msRequestFullscreen) {
      iframe.msRequestFullscreen();
    }
    else if (iframe.mozRequestFullScreen) {
      iframe.mozRequestFullScreen();
    }
    else if (iframe.webkitRequestFullScreen) {
      iframe.webkitRequestFullScreen();
    }
  
    function onYouTubePlayerReady(iframe) {
      ytplayer = document.getElementById(this.id);
      ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }
  
    function onytplayerStateChange(newState) {
      if ( newState == 0 ) {
       //cancel full-screen
       iframe.fullScreenCancel();
      }
    }
  
    }; // end onclick function  
  } // end for statement 
  </code></pre>
  
  <p>Things work properly for the most part. I have two issues:</p>
  
  <p>1) The video loads and is able to go into full screen mode. But if you click the fullscreen button in the YouTube video player controls it stays in fullscreen and gets "stuck" there. If you don't click it and hit the "esc" key it will come out of full screen.
  2) I added some code at the bottom to detect the state change and then automatically bring it out of full screen, but it seems to ignore this completely. I'm no javascript expert, perhaps someone knows of a way to fix these issues? I'm thinking these may be problems related to the API though? Any thoughts welcome!</p>