title: On Play: Make Youtube Video Full Screen
body: <p>Using the Youtube Javascript API; <strong>is there a way to make the video play full screen when the 'Play' button is clicked?</strong></p>
  
  <p>I am aware of a way to make the <a href="https://stackoverflow.com/questions/13120704/full-screen-option-in-chromeless-player-using-javascript">video container full screen</a> but this only works for the latest versions of Firefox and Chrome.</p>
  
  <p><em>If there isn't any way to do this through the Youtube Javascript API, do you know of a Cross Browser way I could make the youtube video full screen when play is clicked?</em></p>
  
  <p>This is how you make a video full screen when play is clicked for the latest versions of Firefox and Chrome browsers:
      </p>
  
  <pre><code>        function onPlayerStateChange(event) {
              var player = document.getElementById("MSJbUEj7U7M");
              if (event.data != YT.PlayerState.BUFFERING &amp;&amp; event.data != YT.PlayerState.CUED &amp;&amp; event.data != YT.PlayerState.PLAYING)
                  return -1;
  
              if (player.requestFullScreen) {
                console.log("1()");
                player.requestFullScreen();
              }
              else if (player.mozRequestFullScreen) {
                console.log("2()");
                player.mozRequestFullScreen();
              }
              else if (player.webkitRequestFullScreen) {
                console.log("3()");
                player.webkitRequestFullScreen();
              }
          }
  
          function loadYouTubeVideo(uid) {
              setTimeout( function() {
                          var id         = uid;
                          var instPlayer = new YT.Player(id, {
                              height: '480',
                              width: '853',
                              enablejsapi: 1,
                              suggestedQuality: 'highres',
                              videoId: uid,
                              events: {
                                  'onStateChange': onPlayerStateChange
                              }
                          });
                  }, 500);
          }
      &lt;/script&gt;
  </code></pre>