Pseudo-classe :fullscreen (Fullscreen API)

Dernière modification : juin 2022

Passer en plein écran

Le code :

<div id="fullscreen">
<img src="image" alt>
</div>
<button id="bouton_fullscreen">Passer en plein écran</button>

#fullscreen:-webkit-full-screen::before {
content:'Paysage vue sur mer';
font-size:2rem;
color:white;
position:absolute;
bottom:0;
left:0;
right:0;
padding: 5px;
background: hsla(0, 0%, 0%, 0.7);
}
	
#fullscreen:-ms-fullscreen::before {
content:'Paysage vue sur mer';
font-size:2rem;
color:white;
position:absolute;
bottom:0;
left:0;
right:0;
padding: 5px;
background: hsla(0, 0%, 0%, 0.7);
}
	
#fullscreen:fullscreen::before {
content:'Paysage vue sur mer';
display:flex;
justify-content: center;
font-size:2rem;
color:white;
position:absolute;
bottom:0;
left:0;
right:0;
padding: 5px;
background: hsla(0, 0%, 0%, 0.7);
}

let monBouton  = document.getElementById("votreid");
let ecran_large = document.getElementById("fullscreen");
let fonction_ecran_large = ecran_large.requestFullscreen;
if (!fonction_ecran_large) {
['mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullScreen'].forEach
(function (req) {
fonction_ecran_large = 
fonction_ecran_large || ecran_large[req];
});
}
function enterFullscreen() {
fonction_ecran_large.call(ecran_large);
}
fullscreenButton.addEventListener(
'click', enterFullscreen
); 

Source, inspiration, ressources :

Pseudo-classe :fullscreen

Voir un exemple de galerie d'images utilisant cette pseudo-classe.