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
Related Posts
- 15 Awesome games made with HTML5 and JavaScript
- A roadmap to becoming a web developer in 2019
- The Meaning of Colors in web Design. A little bit of psychology
- How To Build A Presentation Using HTML, CSS, & JavaScript
- Parallax Landscape Scenes Built Entirely With CSS and HTML
- Fullscreen Background Video HTML5 And CSS cross-browser
- How to Become a Full Stack Developer in 2018
- How to make SVG images code responsive
- 10 addictive retro video games recreated with HTML5, JS & CSS
- 11 Guides for Front-end Developers
- Mallorca's Ham