title: webkitEnterFullscreen() using external button works in Chrome and Safari but not iOS
body: <p>Can anyone tell me why webkitEnterFullscreen() using an external button works in Chrome and Safari, but not iOS?</p>
  
  <p>In iOS, the button doesn't work even if I set the video to "visible". It appears to only work once the video is playing, then it will allow me to launch fullscreen. I can't script it either by using "this.play();", it only works when a human hits the play button.</p>
  
  <p>I'm using an iPad 2 and iOS 5.0.1</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Fullscreen Video&lt;/title&gt;
          &lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
              $(function(){
                  // hide video
                  $("#myVideo").css({'visibility' : 'hidden', 'display' : 'none'});
  
                  // extend button functionality
                  $('#fs').bind('click', function() {
                      // display the video
                      $("#myVideo").css({'visibility' : 'visible'});
  
                      // launch the video fullscreen
                      $("#myVideo")[0].webkitEnterFullscreen();
                  });
              });
          &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;h1&gt;Fullscreen Video&lt;/h1&gt;
          &lt;video id="myVideo" width="852" height="480" controls="false" preload="false"&gt;
              &lt;source src="videos/myVideo.mp4" type='video/mp4' /&gt;
          &lt;/video&gt;
          &lt;br /&gt;
          &lt;input type="button" id="fs" value="Fullscreen"&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>