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

Aggiornato il

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, 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? (Fig. 1)

Il video promozionale di Spotify

Fig. 1: Spotify usa un video di sfondo sulla sua pagina ufficiale

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”. (Fig. 2)

jquery tubular

Fig. 2: La homepage del plugin tubular

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="https://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="https://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="https://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:

Il teaser ufficiale di Breaking bad

Fig. 3: L’id del video, ovvero la stringa di codice che appare subito dopo “v=

Lo script nella <head> quindi diventa:


<script src="https://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="https://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>

Demo

Clicca qui per scaricarti la demo di questo esercizio, ma ricorda bene: per vederli all’opera, questi files devono essere inseriti in un server virtuale oppure online sul tuo hosting.

Riferimenti

di Mattia Frigeri

COMMENTI

  • Ciao, bell’articolo, ho fatto qualche prova ma non mi funziona, si potrebbe avere uno zip di esempio da caricare su un sito o da virtualizzare così posso vedere cosa sbaglio nel codice?

    • Ciao, e grazie. Ho aggiunto i files del tutorial (in fondo all’esercizio), ma al 90% posso immaginare cosa stai sbagliando: forse non hai inserito le pagine in un server virtuale?

  • Grazie Mattia ora funziona, alla fine si trattava di permessi, infatti i file erano dentro il server virtuale, ma non potevano essere virtualizzati LOOOL

  • Ciao! Ho capito subito come farlo funzionare, ma ora vorrei capire una cosa: il video che voglio incorporare è in 1080p di pochissimi secondi, vorrei che partisse in 1080p al caricamento della pagina. Come posso fare?

    • Ciao Exolon, con “1080p” intendi dire “1080px” di definizione/grandezza? In questo caso, credo si possa fare…
      Se guardi alla pagina ufficiale del plugin, in basso ti spiega come modificare il parametro width:

      
      width: $(window).width() // no need to override
      
      

      Il parametro lo trovi all’inizio del file jquery.tubular.1.0.js, e di default ha come valore la dimensione del browser. Prova ad inserire 1080 al posto di $(window).width().
      Non ho mai provato a farlo, ti avverto, quindi non assicuro sulla “bontà” del risultato… Per esempio, centrerà il video o lo lascerà in alto a sinistra, non occupando più tutto lo specchio della finestra?
      Fammi sapere!

      • Intendevo 1080 come qualità video, cmq ho messo 1080 tra le parentesi ma non è successo nulla. Siccome non sono ancora molto pratico di jQuery, ci vanno gli apostrofi? ‘1080’ ? Cmq ho riscontrato qualcosa di strano, alla fine del video se come impostazione ho “pausa”, e non loop, esce un mosaico di foto che tra l’altro non riesco a capire come togliere.

        • Mi rispondo da solo xD. Alla fine del video se metto pausa ci sono i video anteprima di altri video su youtube. :D Bene… come farò?

          • Ciao, per le anteprime che ti appaiono non c’è niente da fare, la causa è YouTube!
            Ma se il tuo problema è evitare il loop, non cambiare le impostazioni su YouTube, prova a cambiare questo parametro dentro al file della libreria:

            
            repeat: true
            
            

            Al posto di true, prova con false.
            Per rispondere alla tua precedente domanda… bisogna provare. Prova prima mettendo gli apostrofi, e poi mettendo 1080px.

            • Pare non sia possibile inserire una qualità buona, se hai la banda occupata se ne va in qualità bassa automaticamente. Per quanto riguarda le anteprime, stavo pensando a qualche script che consenta di inserire pause 1 secondo prima la fine del video… secondo te è fattibile?

              • Ciao, e scusa. Adesso mi sono informato e ho capito cosa intendevi con 1080p (che se non sbaglio equivalgono a 1920px di dimensione in larghezza effettivi). Per la tua domanda, penso che jQuery Tubular sia modificabile nel suo script, ma la ritengo una cosa molto avanzata: cercherei qualche altra soluzione in giro per la rete, oppure fermerei il “loop” con le API ufficiali, cioè come ti indicavo prima.