Twitter
Partagez cette démonstration : Twitter

Pseudo-classe :fullscreen (Fullscreen API)

Dernière modification : juin 2022

Test Image fullscreen

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
); 





Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.

haut page