title: webkitRequestFullScreen not working?
body: <p>I have this JSFiddle sample for webkitRequestFullScreen. </p>
  
  <p>I'm using Chrome 2 on Mac OSX and the example does not appear to work for me. Initially I wrote my own example but the one in the link below is not written by me. Still it doesn't appear to work. </p>
  
  <p><a href="http://jsfiddle.net/2uNzk/1/" rel="noreferrer">http://jsfiddle.net/2uNzk/1/</a></p>
  
  <pre><code>var test = document.querySelector('.test');
  
  test.addEventListener('click', function () {
  
    if(test.requestFullScreen) {
      test.requestFullScreen();
    } else if(test.mozRequestFullScreen) {
      test.mozRequestFullScreen();
    } else if(test.webkitRequestFullScreen) {
      test.webkitRequestFullScreen();
    }
  }, false);
  </code></pre>
  
  <p>however the following example does work! Only when I try to reproduce it in Plunker or JSFiddle it doesn't appear to work:</p>
  
  <p><a href="http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/" rel="noreferrer">http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/</a></p>
  
  <p>heres my plunker example:</p>
  
  <pre><code> &lt;!-- just to keep things in one place I put the JS here. --&gt;
    &lt;script type="text/javascript"&gt;
      function goFullscreen(id) {
  
        // Get the element that we want to take into fullscreen mode
        var element = document.getElementById(id);
  
        // These function will not exist in the browsers that don't support fullscreen mode yet, 
        // so we'll have to check to see if they're available before calling them.
  
        if (element.mozRequestFullScreen) {
          // This is how to go into fullscren mode in Firefox
          // Note the "moz" prefix, which is short for Mozilla.
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
  
          // This is how to go into fullscreen mode in Chrome and Safari
          // Both of those browsers are based on the Webkit project, hence the same prefix.
          element.webkitRequestFullScreen();
  
        }
        // Hooray, now we're in fullscreen mode!
      }
    &lt;/script&gt;
  
  
  
    &lt;div class="example"&gt;
      &lt;img class="video_player" src="http://assets3.parliament.uk/iv/main-large//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg" id="player2"&gt;
      &lt;button onclick="goFullscreen('player2'); return false"&gt;Click Me To Go Fullscreen! (For real)&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/BOhqNTEACTPmr9ebVnHs?p=preview" rel="noreferrer">http://plnkr.co/edit/BOhqNTEACTPmr9ebVnHs?p=preview</a></p>
  
  <p>Any ideas? I'm baffled!</p>