HTML5 Fullscreen API

The Fullscreen API provide an easy way for web content to be presented . The API lets you easily direct the browser to make an element  occupy the fullscreen.

How Activate fullscreen mode

Given an element that you’d like to present in fullscreen mode (such as a <video>, for example), you can present it in fullscreen mode by simply calling its requestFullscreen() method.

See example:

<video controls id="myvideo">
<source src="video.webm"></source>
<source src="video.webm"></source>
</video>

and

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

Presentation differences

It’s worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: “width: 100%; height: 100%“. WebKit doesn’t do this; instead, it centers the fullscreen element at the same size in a screen that’s otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own “width: 100%; height: 100%;” CSS rules to the element yourself:

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

How Get out of full screen mode

The user always has the ability to exit fullscreen mode of their own accord. You can also do so programmatically by calling the exitFullscreen() method.

Watching for the Enter key

When the page is loaded, this code is run to set up an event listener to watch for the Enter key.

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

Toggling fullscreen mode

This code is called when the user hits the Enter key, as seen above.

function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

 

Prefixing

For the moment not all browsers are implementing the unprefixed version of the API. You should to use prefixes and names specified for the particular browser.

For example:

Standard	Blink (Chrome & Opera)	Gecko (Firefox)
Document.fullscreen	webkitIsFullScreen	mozFullScreen
Document.fullscreenEnabled	webkitFullscreenEnabled	mozFullScreenEnabled
Document.fullscreenElement	webkitFullscreenElement	mozFullScreenElement
Document.onfullscreenchange	onwebkitfullscreenchange	onmozfullscreenchange
Document.onfullscreenerror	onwebkitfullscreenerror	onmozfullscreenerror
Document.exitFullscreen()	webkitExitFullscreen()	mozCancelFullScreen()
Element.requestFullscreen()	webkitRequestFullscreen()	mozRequestFullScreen()