title: Request Full Screen HTML5 Video onPlay
body: <p>I'm using the following code to trigger fullscreen when a user clicks on the play button on a <code>&lt;video&gt;</code> element:</p>
  
  <pre><code>var video = $("#video");
  video.on('play', function(e){
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      }
  });
  </code></pre>
  
  <p>But nothing happens when I click the play button.</p>
  
  <p>Any idea's why?</p>
  
  <p>EDIT: Here's my HTML code:</p>
  
  <pre><code>&lt;video width="458" height="258" controls id='video' &gt;
            &lt;source src='&lt;?= bloginfo('template_directory'); ?&gt;/inc/pilot.mp4' type="video/mp4"&gt;
            &lt;source src='&lt;?= bloginfo('template_directory'); ?&gt;/inc/pilot.ogv' type="video/ogg"&gt;
            &lt;source src='&lt;?= bloginfo('template_directory'); ?&gt;/inc/pilot.webm' type="video/webm"&gt;
  &lt;/video&gt;
  </code></pre>