DOM 요소 전체 화면 표시 솔루션

<script type="text/javascript">
  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!
  }
</script>

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

이렇게 하면 전체 화면이 표시되지만 DOM 요소의 크기는 변하지 않습니다.걱정하지 마라, 아래에서 너를 도와 이 문제를 해결할 것이다.

<style type="text/css">
  .player:-webkit-full-screen {
    width: 100%;
    height: 100%;
  }
  .player:-moz-full-screen {
    width: 100%;
    height: 100%;
  }
</style>
<img class="video_player" src="image.jpg" id="player3"></img>
<button onclick="goFullscreen('player');">Click Me To Go Fullscreen! (All the way)</button>

이렇게 하면 대부분의 DOM 요소에 작용하지만, iframe 요소에 대해서는 allowFullScreen이라는 속성을 추가해야 합니다.

<iframe src="iframe_src.html" width="400" height="300" allowFullScreen></iframe>

ok, 큰일났다!
reference: http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/