Pagina web con video in background

Nel precedente articolo abbiamo mostrato come inserire un video in una pagina web, sfruttando HTML5. In questa “puntata”, vedremo invece come far diventare il nostro video, lo sfondo della pagina. Al posto di una qualsiasi immagine o colore, useremo quindi il nostro video. Faremo uso di jQuery, e degli eventi:

  • loadedmetadata: una volta caricati tutti i metadata della pagina, dovremo ridimensionare il video, adattandolo a sfondo della pagina web;
  • resize: ad ogni modifica delle dimensioni della pagina web, il video dovrà adattarsi alla dimensione di questa.

Per poter adattare il video, creeremo una funzione apposita, la quale caricando i metadata, dovrà ridimensionare il video. I passi da svolgere sono:

  1. Caricare altezza e larghezza della finestra;
  2. Caricare altezza e larghezza del video;
  3. Calcolare i fattori di scala per altezza e larghezza, dividendo i valori 1 con i valori 2;
  4. Scegliere il fattore di scala tra quelli calcolati al punto precedente;
  5. Scalare il video.

Vediamo di seguito, il codice necessario alla soluzione dei punto scritti:

1. Caricare altezza e larghezza della finestra


var wHeight = $(window).height();
var wWidth = $(window).width();

2. Caricare altezza e larghezza del video


var videoHeight = $("video#videoBg")[0].videoHeight;
var videoWidth = $("video#videoBg")[0].videoWidth;

3. Calcolare i fattori di scala per altezza e larghezza, dividendo i valori 1 con i valori 2


var scaleFactorW = wWidth/videoWidth;
var scaleFactorH = wHeight/videoHeight;

4. Scegliere il fattore di scala tra quelli calcolati al punto precedente


if(scaleFactorW > scaleFactorH)
var scale = scaleFactorW;
else
var scale = scaleFactorH;

5. Scalare il video


var newVH = videoHeight * scale;
var newVW = videoWidth * scale;

$("video#videoBg").height(newVH);
$("video#videoBg").width(newVW);

Questo codice andrà quindi inserito all’interno di una funzione che chiameremo scaleVideo e dovrà essere eseguita ogni qual volta si verificano gli eventi spiegati ad inizo articolo:


$("video#videoBg").on("loadedmetadata",scaleVideo);
$(window).on("resize",scaleVideo);

A questo punto, il nostro video apparirà nello sfondo della pagina web. Occorrerà quindi inserire il contenuto all’interno di un div, a cui assegneremo identificativo content.


<div id="content">
   <h3>Video in background!</h3>
</div>

Questo div sarà posizionato al centro della pagina web mediante le proprietà css:


height:400px; /*scegliere a piacere*/
width:600px; /*scegliere a piacere*/
margin:0 auto;
position:relative;
display:block;
color:white;

A questo punto il nostro esempio è terminato…dovremmo aver ottenuto una pagina web simile a questa:

Il risultato del nostro esempio - Una pagina web con un video come sfondo
Il risultato del nostro esempio – Una pagina web con un video come sfondo

Se vuoi, puoi scaricare un esempio funzionante cliccando su uno dei seguenti pulsanti social. Ti verrà mostrato l’indirizzo web a cui poter testare e scaricare l’esempio: [like_to_read] Vai all’esempio [/like_to_read]

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.