Impostare elementi HTML in modalità fullscreen con Javascript

Mattepuffo's logo
Impostare elementi HTML in modalità fullscreen con Javascript

Impostare elementi HTML in modalità fullscreen con Javascript

Ho scoperto l'altro giorno che esiste la funzione Javascript requestFullscreen!

In pratica consente di mettere in modalità fullscreen un elemento HTML.

Sicuramente l'esempio più calzante è un video, ed è quello che useremo.

Questa la funzione Javascript:

function requestFullScreen() {
	const el = document.querySelector('video');
	el.requestFullscreen()
		.then(() => console.log('ok'))
		.catch(err => console.log(err.message));
}

Qui sotto la parte HTML:

<button type="button" onclick="requestFullScreen()">Richiedi</button>
<hr>
<video controls=""
	   src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
	   poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620">
</video>

Enjoy!


Condividi

Commentami!