The Fullscreen API allows a web page or an HTML element to be viewed in fullscreen mode, hiding all browser user interface and other applications from the screen. You can use this API to bring videos, images, and other content to a user's full attention.
Simply call the requestFullscreen()
method on the element that you'd like to present in full screen (such as a <img>, for example). Users can easily leave fullscreen mode at any time by pressing ESC. To get out of fullscreen mode programmatically, call the exitFullscreen()
method.
Some browsers still prefix the API with a unique identifier; Trident uses ms, Gecko uses moz, and WebKit uses webkit. It's a good idea to have a single function that requests fullscreen mode across all prefixes, like the examples shown here.
Demo
Source Code
<style> #exampleImage { cursor:zoom-in; } #exampleImage:-webkit-full-screen { cursor:zoom-out; } #exampleImage:-moz-full-screen { cursor:zoom-out; } #exampleImage:-ms-fullscreen { cursor:zoom-out; } #exampleImage:fullscreen { cursor:zoom-out; } </style> <p> <label>Click the button below to toggle between fullscreen mode and windowed mode for this page.</label><br> <button id="btnFullscreen" type="button">Toggle Fullscreen</button> </p> <p> <label>Click the image below to view it in fullscreen mode, click the image again to exit fullscreen mode.</label><br> <img id="exampleImage" src="https://source.unsplash.com/featured/?nature"> </p> <script> function toggleFullscreen(elem) { elem = elem || document.documentElement; if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } } document.getElementById('btnFullscreen').addEventListener('click', function() { toggleFullscreen(); }); document.getElementById('exampleImage').addEventListener('click', function() { toggleFullscreen(this); }); </script>
Fullscreen CSS
We can use the :fullscreen
CSS pseudo-class to style any element that's currently being displayed in fullscreen mode. The W3C proposal uses the single word :fullscreen
, that is without a dash, but both the Webkit and Gecko experimental implementations use a prefixed variant with two words linked by a dash: :-webkit-full-screen
and :-moz-full-screen
, respectively. See the example below for cross-browser code.
#exampleImage:-webkit-full-screen { cursor:zoom-out; } #exampleImage:-moz-full-screen { cursor:zoom-out; } #exampleImage:-ms-fullscreen { cursor:zoom-out; } #exampleImage:fullscreen { cursor:zoom-out; }
how can i detect when the user exits fullscreen? for Chrome?
You may want to check out the fullscreenchange event. Inside that event handler, check for
document.fullscreenElement
, it returnsnull
if the browser is switched out-of fullscreen mode. Note that the API is still vendor-prefixed in Chrome (webkitfullscreenchange
andwebkitFullscreenElement
).Sadly it won't stay in fullscreen if user press F5 or Ctrl+F5... did you find a way?
To achieve this, you can attach
keydown
event when entering fullscreen mode:Then remove the event listener when exiting fullscreen mode:
Inside the event handler, call
event.preventDefault()
if the pressed key is F5:Thank you, works well.
It's my pleasure.
Thank you very much for the coding
You're very welcome!
Excellent! Quite the clearest and fullest treatment of the use of the HTML5 Fullscreen API that I've come across. Superbly helpful examples! Thanks for sharing!
Thanks, appreciate that! Glad you found it helpful.