title: Iframe enter fullscreen mode
body: <p>I need to make iframe enter fullscreen mode,
  i am using iframe to display pdf file by google docs viewer
  i need this iframe to enter fullscreen.
  I have found an code in the internet for displaying html video and iframe and there full screen but when i try to remove the video, the fullscreen never work
  In this code the iframe (fullscreen) not working</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  </code></pre>
  
  <p></p>
  
  <p>
      </p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="_styles.css" media="screen"&gt;
  
  &lt;title&gt;Fullscreen API | The CSS Ninja&lt;/title&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;div class="fl"&gt;
      &lt;iframe src="http://thecssninja.com/talks/dnd_and_friends/" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;&lt;br /&gt; 
      &lt;button id="fullscreeniframe" class="button"&gt;Fullscreen iframe&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      (function(window, document){
          var $ = function(selector,context){return(context||document).querySelector(selector)};
  
          var video  = $("video"),
              iframe = $("iframe"),
              domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
  
          var fullscreen = function(elem) {
              var prefix;
              // Mozilla and webkit intialise fullscreen slightly differently
              for ( var i = -1, len = domPrefixes.length; ++i &lt; len; ) {
                prefix = domPrefixes[i].toLowerCase();
  
                if ( elem[prefix + 'EnterFullScreen'] ) {
                  // Webkit uses EnterFullScreen for video
                  return prefix + 'EnterFullScreen';
                  break;
                } else if( elem[prefix + 'RequestFullScreen'] ) {
                  // Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
                  return prefix + 'RequestFullScreen';
                  break;
                }
              }
  
              return false;
          };
  
          // Will return fullscreen method as a string if supported e.g. "mozRequestFullScreen" || false;
          var fullscreenvideo = fullscreen(document.createElement("video"));
  
          // Webkit uses "requestFullScreen" for non video elements
          var fullscreenother = fullscreen(document.createElement("iframe"));
  
          if(!fullscreen) {
              alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
              return;
          }
  
          // Should add prefixed events for potential ms/o or unprefixed support too
          video.addEventListener("webkitfullscreenchange",function(){
              console.log(document.webkitIsFullScreen);
          }, false);
          video.addEventListener("mozfullscreenchange",function(){
              console.log(document.mozFullScreen);
          }, false);
  
          $("#fullscreenvid").addEventListener("click", function(){
              // The test returns a string so we can easily call it on a click event
              video[fullscreenvideo]();
          }, false);
          $("#fullscreeniframe").addEventListener("click", function(){
              // iframe fullscreen and non video elements in webkit use request over enter
              iframe[fullscreenother]();
          }, false);
      })(this, this.document);
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><a href="http://www.thecssninja.com/demo/fullscreen/">http://www.thecssninja.com/demo/fullscreen/</a></p>