Fullscreen with Javascript

Make a div, video or canvas element go fullscreen using HTML5. (simulates pressing F11)

by Luke Nickerson

HTML

<h1>Fullscreen Test</h1>
<p>Based on
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode" target="_blank">MDN Full Screen Tutorial</a>. Doesn't seem to work in jsfiddle.
</p>

<h2>Div</h2>
<div id="testDiv">
    Hello World
</div>
<button type="button" id="fsDiv">Go Fullscreen (Div)</button>

<h2>Video</h2>
<video controls id="testVideo">
  <source src="somevideo.webm"></source>
</video>
<button type="button" id="fsVideo">Go Fullscreen (Video)</button>

<h2>Canvas</h2>
<canvas id="testCanvas"></canvas>
<button type="button" id="fsCanvas">Go Fullscreen (Canvas)</button>

CSS

#testDiv, #testCanvas {
    min-width: 2em; min-height: 2em;
    border: dashed 1px #666;
}

JavaScript

console.clear();

var elem = document.getElementById("fullScreen");
function requestFullScreen(elt) {
    console.log("Requesting fullscreen for", elt);
    if (elt.requestFullscreen) {
      elt.requestFullscreen();
    } else if (elt.msRequestFullscreen) {
      elt.msRequestFullscreen();
    } else if (elt.mozRequestFullScreen) {
      elt.mozRequestFullScreen();
    } else if (elt.webkitRequestFullscreen) {
      elt.webkitRequestFullscreen();
    } else {
        console.error("Fullscreen not available");
    }
}
document.getElementById("fsDiv").addEventListener("click", function () {
    requestFullScreen( 
        document.getElementById("testDiv") 
    );
});
document.getElementById("fsVideo").addEventListener("click", function () {
    requestFullScreen( 
        document.getElementById("testVideo") 
    );
});
document.getElementById("fsCanvas").addEventListener("click", function () {
    requestFullScreen( 
        document.getElementById("testCanvas") 
    );
});