The HTML5 Full-Screen API

 

 

How to Launch the Fullscreen Mode

The fullscreen API's requestFullScreen method is still prefixed in some browsers, so we'll need to do a bit ofsearching to find it:

// Find the right method, call on correct 
elementfunction launchFullScreen(element) { 
   if(element.requestFullScreen) {  
    element.requestFullScreen();    
} else 

if(element.mozRequestFullScreen) {  
    element.mozRequestFullScreen();    
} else if(element.webkitRequestFullScreen) {  
    element.webkitRequestFullScreen();    
}  }  

 // Launch fullscreen

How to Remove Fullscreen Mode

The remove FullScreen method you have to morphs the browser chrome back into standard layout:

// Whack fullscreen function cancelFullscreen() {  
  if(document.cancelFullScreen) {  
    document.cancelFullScreen();    
} else if(document.mozCancelFullScreen) {      
document.mozCancelFullScreen();    
} else if(document.webkitCancelFullScreen) {    
  document.webkitCancelFullScreen();    
}  
}  
  // remove fullscreen

Note that cancelFullScreen function is called on the document object only, so you not need to pass the individual element itself.

Hot to set fullscreen properties & events

Events and properties are prefixed, but will be unprefixed over time.

• document.fullScreenElement: the element which has been pushed to fullscreen.
• document.fullScreenEnabled:  notes if fullscreen is current enabled.

The fullscreenchange event lets us know when we go to/from fullscreen mode:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled

You can detect which browser-prefixed event to use along with the initial fullscreen method detection.

Fullscreen CSS

Browsers do provide us one helpful bit of fullscreen CSS control:

/* html */ 
 :-webkit-full-screen {    background: green;  }  
:-moz-full-screen {    background: green;  }    
/* deeper elements */  
:-webkit-full-screen video {    
width: 100%;    
height: 100%;  
}