Inserire un video full screen come sfondo di un sito con il plugin jQuery tubular

2014/01/20
web

Ti sarai certamente accorto che i siti internet sono in continua evoluzione: se in precedenza le ridotte possibilità di connessione e la qualità hardware e software dei componenti permettevano prestazioni in qualche modo “limitate”, il diffondersi della banda larga e il lancio in commercio di dispositivi sempre più performanti hanno rivoluzionato totalmente il concetto di comunicazione digitale. E come funghi in autunno, spuntano a ritmo di crescita frenetico siti dall’enorme cura del dettaglio grafico, con animazioni HTML5 sempre più “spinte”, e che fanno uso di nuovi e sgargianti caratteri nativi per il web grazie ad efficaci sistemi di incorporamento (Google Fonts, ~~Typekit~~ Adobe Fonts, ecc.).

In quest’elenco di novità trova spazio l’introduzione del video come elemento di background. Parlare di “novità” non è propriamente corretto, perché tecnologie ormai “antiche” come Flash già ne facevano uso. Ma, dato che noi web designer non abbiamo digerito completamente il suo inevitabile declino, abbiamo deciso di spremere le nuove e riappropriarcene.

Inserire un video come sfondo di un sito è una tecnica accattivante e comercialmente molto efficace: coinvolge il visitatore sfruttando i canali visivo e uditivo assieme, ne concentra ed amplifica l’attenzione. Se usato in maniera appropriata, getta un potente “faro luminoso” sul prodotto o l’oggetto commercializzato. Non a caso i siti che fanno largo uso di video sono proprio quelli ad intenso contenuto emotivo (siti portfolio o di progetti innovativi) o commerciale (nuove applicazioni o prodotti lanciati sul mercato).

Può non rappresentare la soluzione indicata per tutti i tipi di siti, ma non sei d’accordo con me su quanto sia giovane, dinamica e convincente la “call to action page” di Spotify con il suo bel video promozionale?

Come implementare il video nello sfondo di un sito, quindi? Esiste un buon elenco di plugin che possono aiutarti a farlo, una lista che tempo permettendo ti consiglierei di testare per intero. Ma se hai fretta e vuoi subito il risultato, il più comodo ed immediato di tutti per me è sicuramente tubular: creato nel 2010, a quasi quattro anni di distanza dalla sua “nascita” rimane ancora a pieno titolo nella “Hall of fame”.

Inserire tubular nel tuo sito

Per prima cosa devi sapere che tubular necessita di un web server per “lavorare”: non funzionerà cioè in una qualunque pagina HTML sul tuo desktop!

Ciò significa che se vuoi vederlo all’opera, dovrai posizionare la pagina online sul tuo hosting o in locale servendoti di un web server virtuale: ad esempio MAMP (per utenti Mac) o XAMPP (per gli utenti Windows).

Inziamo! Tubular si basa sulla libreria jQuery, quindi il primo passo è caricarla richiamandola nella <head> della tua pagna:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Subito sotto jQuery, carica lo script della libreria:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8" src="jquery.tubular.1.0.js"></script>

Puoi scaricare il pacchetto completo della libreria a questa pagina, tenendo presente però che ti serve solamente il file jquery.tubular.1.0.js per farla funzionare.

Ora hai bisogno di un contenitore all’interno della pagina che possa ospitare il video. Basterà un <div> con valore id noto, ad esempio id="contenitore-video". Questo contenitore inoltre deve essere l’ultimo elemento HTML appena prima la chiusura del tag <body>:


<body>

<!-- ...resto del contenuto... -->

<div id="contenitore-video"></div>

<body>

“Aggancia” adesso tubular al contenitore che hai appena creato, aggiungendo alla <head> questo script:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8" src="jquery.tubular.1.0.js"></script>

<script>
$().ready(function() {
    $('#contenitore-video').tubular({videoId: 'id-del-tuo-video'});
});
<script>

Ricordati di cambiareambiare il valore id-del-tuo-video con l’id del video di YouTube che hai scelto!

Per esempio, volendo inserire come sfondo il teaser ufficiale della prima stagione di Breaking Bad (incredibile serie TV: una “droga”, in tutti i sensi!), recupero il suo id alla fine dell’URL nella pagina di YouTube:

Lo script nella <head> quindi diventa:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8" src="jquery.tubular.1.0.js"></script>

<script>
$().ready(function() {
    $('#contenitore-video').tubular({videoId: 'XZ8daibM3AE'});
});
<script>

Fine! Se hai fatto tutto correttamente (e la tua pagina si trova su un server virtuale o è online) ti comparirà sullo sfondo il faccione di Walter White che ti punta una pistola.

Alcune precisazioni...

Tieni presente che tubular, quando attivato, cambia la struttura del tuo CSS: come spiegato nella pagina ufficiale di Google Code, trasformerà il <div> contenitore aggiungendo posizionamento relativo e valore z-index=99. Inoltre verranno creati automaticamente 2 <div> supplementari con posizionamento fisso, più 1 <div> “vuoto”: quest’ultimo serve a prevenire eventuali click sullo sfondo, che linkerebbero il visitatore alla pagina di YouTube del video utilizzato.

Ti sarai anche accorto che il video che hai inserito è senza audio! Non è un errore, bensì l’impostazione di default di tubular. Se vuoi aggiungere l’audio, nessun problema, ma dovrai modificare direttamente il file jquery.tubular.1.0.js che hai caricato nella <head>. Apri il file, e più o meno all’inizio del foglio modifica il parametro mute, inserendo “false“” al posto di “true“:


var defaults = {
    ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
    videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
    mute: false,
    repeat: true,
    width: $(window).width(),
    wrapperZIndex: 99,
    playButtonClass: 'tubular-play',
    pauseButtonClass: 'tubular-pause',
    muteButtonClass: 'tubular-mute',
    volumeUpClass: 'tubular-volume-up',
    volumeDownClass: 'tubular-volume-down',
    increaseVolumeBy: 10,
    start: 0
};

Puoi fare questo ed altro per alterare il comportamento di tubular: è tutto spiegato alla pagina ufficiale del plugin. Riporto di seguito il codice totale del foglio come traccia dell’esercizio:


<!DOCTYPE html>

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="jquery.tubular.1.0.js"></script>
    <script>
        $().ready(function() {
            $('#contenitore-video').tubular({videoId: 'XZ8daibM3AE'});
        });
    </script>

</head>

<body>

    <div id="contenitore-video"></div>

</body>

</html>