The HTML5 Full-Screen API

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%;  
}

 

 

 
 

tags: html5 web tutorials html tools web design web development


We use our own cookies and third-party cookies to improve our services, show products based on your preferences, analyse the browsing habits of our users, and enable interaction with social networks. Continuing to browse our sites implies full acceptance of their use. You can change your cookie setting or get more information here: Cookies policy .