Supporté par ChromeSupporté par FirefoxSupporté par EdgeNon supporté par Safari/iOS Fullscreen API : Démo HTML5

Mise à jour : 2017-11-08
Cette API permet de passer une application Web, ou un de ses éléments (image, vidéo, ...), en plein écran.
L'utilisateur est alors informé du passage en plein écran, son consentement est requis et il est aussi informé de la manière de quitter ce mode.

Fullscreen API

Notes sur le tuto


Exemple de code HTML5

<!--_fullscreen.css
/* Mode plein écran sur fond vert et arrière-plan jaune */
:fullscreen {background: green}
::backdrop {background: yellow}
:-moz-full-screen {background: green}
:-ms-fullscreen {background: green}
::-ms-backdrop {background: yellow}
:-webkit-full-screen {background: green}
-->
Standard (Edge) : 
<button onclick="document.documentElement.requestFullscreen()">Passer en plein écran</button>
<button onclick="document.exitFullscreen()">Quitter le plein écran</button><br>
<span id="std"></span><br>
<script>
	std = document.getElementById("std")
	function fullscreenStatus(engine, enabled, element) {
		msg  = "Plein écran " + (enabled ? "" : "non ") + "supporté.<br>"
		msg += "Élément en plein écran : " + element
		engine.innerHTML = msg
		engine.className = (enabled ? "ok" : "ko")
	}
	fullscreenStatus(std, document.fullscreenEnabled, document.fullscreenElement)
	document.addEventListener("fullscreenchange", function(){
				fullscreenStatus(std, document.fullscreenEnabled,
							document.fullscreenElement)})
	document.addEventListener("fullscreenerror", function() {
				std.innerHTML = "Erreur de passage en plein écran !"
				std.className = "ko" })
</script>
<br>
<u>Préfixes</u> :<br>
<br>
Microsoft (10 &le; Internet Explorer &le; 11) :
	<button onclick="document.documentElement.msRequestFullscreen()">Passer en plein écran</button>
	<button onclick="document.msExitFullscreen()">Quitter le plein écran</button><br>
	<span id="ms"></span><br>
	<script>
		ms = document.getElementById("ms")
		fullscreenStatus(ms, document.msFullscreenEnabled, document.msFullscreenElement)
		document.addEventListener("MSFullscreenChange", function(){
					fullscreenStatus(ms, document.msFullscreenEnabled,
								document.msFullscreenElement)})
		document.addEventListener("MSFullscreenError", function() {
					ms.innerHTML = "Erreur de passage en plein écran !"
					ms.className = "ko" })
	</script>
	<br>
Mozilla (Firefox) : 
	<button onclick="document.documentElement.mozRequestFullScreen()">Passer en plein écran</button>
	<button onclick="document.mozCancelFullScreen()">Quitter le plein écran</button><br>
	<span id="moz"></span><br>
	<script>
		moz = document.getElementById("moz")
		fullscreenStatus(moz, document.mozFullScreenEnabled, document.mozFullScreenElement)
		document.addEventListener("mozfullscreenchange", function(){
					fullscreenStatus(moz, document.mozFullScreenEnabled,
							document.mozFullScreenElement)})
		document.addEventListener("mozfullscreenerror", function() {
					moz.innerHTML = "Erreur de passage en plein écran !"
					moz.className = "ko" })
	</script>
	<br>
Webkit (Chrome, Opera, Safari) : 
	<button onclick="document.documentElement.webkitRequestFullscreen()">Passer en plein écran</button>
	<button onclick="document.webkitExitFullscreen()">Quitter le plein écran</button><br>
	<span id="webkit"></span>
	<script>
		webkit = document.getElementById("webkit")
		fullscreenStatus(webkit, document.webkitFullscreenEnabled, document.webkitFullscreenElement)
		document.addEventListener("webkitfullscreenchange", function(){
					fullscreenStatus(webkit, document.webkitFullscreenEnabled,
								document.webkitFullscreenElement)})
		document.addEventListener("webkitfullscreenerror", function() {
					webkit.innerHTML = "Erreur de passage en plein écran !"
					webkit.className = "ko" })
	</script>

Démonstration du résultat HTML5


Standard (Edge) :


Préfixes :

Microsoft (10 ≤ Internet Explorer ≤ 11) :


Mozilla (Firefox) :


Webkit (Chrome, Opera, Safari) :

Détection automatique du support HTML5

Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
<script src="_html5detect.js"></script>
<script>
	isItemSupported("document.documentElement.requestFullscreen", true)
	isItemSupported("document.exitFullscreen", true)
	isItemSupported("document.fullscreenEnabled")
	isItemSupported("document.fullscreenElement")

	isItemSupported("document.documentElement.msRequestFullscreen", true)
	isItemSupported("document.msExitFullscreen", true)
	isItemSupported("document.msFullscreenEnabled")
	isItemSupported("document.msFullscreenElement")

	isItemSupported("document.documentElement.mozRequestFullScreen", true)
	isItemSupported("document.mozCancelFullScreen", true)
	isItemSupported("document.mozFullScreenEnabled")
	isItemSupported("document.mozFullScreenElement")

	isItemSupported("document.documentElement.webkitRequestFullscreen", true)
	isItemSupported("document.webkitExitFullscreen", true)
	isItemSupported("document.webkitFullscreenEnabled")
	isItemSupported("document.webkitFullscreenElement")
</script>		

Can I Use fullscreen? Data on support for the fullscreen feature across the major browsers from caniuse.com.