Full-screen mode on a Crocodoc iFrame

main.css

#overlay{
  background: #000 repeat top left;
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:100;
}

.iframe_player {
  overflow-y: hidden;
}

.fullscreen_iframe {
  position: absolute;
  top: 30px;
  left: 0;
  width:100%;
  height: 90%;
  z-index: 1000;
}

.player:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
.player:-moz-full-screen {
  width: 100%;
  height: 100%;
}

main.html

<iframe allowfullscreen="true" class="iframe_player" height="622" id="crocodoc_player" name="crocodoc_player" scrolling="no" src="/player.html" width="680"></iframe>
<div id="overlay" style="display:none;"></div>

player.css

.toolbar .close, .toolbar .fullscreen { position:absolute; height:28px; right:12px; top:3px; }

player.html

<div class="toolbar">
  <div class="btn close"><span class="icon"></span></div>
  <div class="btn fullscreen"><span class="icon"></span></div>
</div>

player.js

$(".fullscreen").bind("click", function(e) {
  
  e.preventDefault();

  iframe = parent.document.getElementById("crocodoc_player");
  
  $(this).hide();
  
  if (iframe.mozRequestFullScreen) {
    iframe.mozRequestFullScreen();
  } else if (iframe.webkitRequestFullScreen) {
    iframe.webkitRequestFullScreen();
  } else {
    window.parent.$("#overlay").show();
    iframe.addClass("fullscreen_iframe");
  }
  
});

$(".close").bind("click", function(e) {
  e.preventDefault();
  
  $(".fullscreen").show();
  
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else {
    window.parent.$("#overlay").hide();
    
    iframe = parent.document.getElementById("crocodoc_player");
    iframe.removeClass("fullscreen_iframe");
  }

});