Video background in pagina Joomla!
Inserire un video come background in una pagina Joomla!
Extrowebsite

Il design di un sito web è cambiato radicalmente rispetto a quello di qualche anno fa. Il trend è quello di avere pagine iniziali che ricoprono quasi tutta l'area utile del monitor. Spesso viene impostata anche una immagine a tutto schermo, mostrando logo e menu di navigazione. Parallelamente alle immagini "full" si vedono sempre più spesso anche video impostati come sfondo, soprattutto nella home. Oggi mi occuperò di come inserire un video di background in una pagina Joomla!, senza installare alcuna estensione.

Il tutorial che oggi spiego è applicabile anche ad una pagina HTML. La semplicità e leggerezza del codice non prevede alcuna estensione tipo plugin o modulo, tantomeno nessun rigo di codice javascript.

Una breve introduzione per pianificare quanto andremo a realizzare.
Anticipo subito che il video di background non sarà visibile su smartphone ma soltanto su pc desktop. Questo per evitare tempi lunghi di attesa del caricamento della pagina, non conoscendo a priori il peso del video ed evitare il consumo di banda.

Chi usa il tablet, invece, vedrà una immagine. Il tutto sarà possibile grazie alle mediaqueries.

Gli oggetti da inserire nella pagina

Gli oggetti di cui si necessita sono:

  • Il video nei formati ".mp4" - "ogv" - "webm"
  • Una immagine che verrà visualizzata come scritto nella premessa, oltre ad essere servita sui browser più datati.

Il codice html per il video

<div class="content-video">

<video class="video" poster="/immagine.jpg" autoplay loop muted>
<source src="/NomeVideo.mp4" type="video/mp4">
<source src="/NomeVideo.ogv" type="video/ogg">
<source src="/NomeVideo.webm" type="video/webm">
</video>

</div><!--/content-video-->

Notare dove è scritto poster | autoplay | loop | muted

poster Previsto dal tag HTML5 video, l'attributo poster indica una immagine che viene visualizzata sui browser più datati, come anticipato nell'introduzione.
Autoplay sta ad indicare che il video deve avviarsi all'apertura della pagina.
loop sta ad indicare che non deve mai interrompersi. Consiglio di inserire un video di pochi secondi in maniera tale che non sia molto pesante e che catturi l'attenzione dell'utente quel tanto che basta per renderlo gradevole.
muted Ovviamente non deve esserci nessun audio.

Il codice CSS per il video

Come scritto nel codice HTML, avremo un "elemento contenitore", content-video, al cui interno andremo ad inserire il video stesso.

Avremo tre diverse visualizzazioni:

  • Fino alla dimensione di 639px non vedremo nulla. Solo colore di sfondo della pagina.
  • Da 640px fino a 767px avremo una immagine statica.
  • Da 768px in poi avremo il video.

Eliminiamo completamente il video:

@media screen and (max-width:767px) {
.video{
display:none; 
visibility:hidden;
}
}

Assegno un colore di sfondo, al contenitore del video, per gli smartphone:

@media screen and (max-width:639px) {
.content-video {
background:lightblue;
height:100%;
}
}

Imposto una immagine di background per i tablet:

@media screen and (min-width:640px) and  (max-width:767px) {
.content-video {
min-width: 100%;
min-height: 100%;
background: url(immagine.jpg);
background-position: center center;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
-ms-background-size: cover;
background-size: cover; 
}
}

Visualizziamo il video:

@media screen and (min-width:768px) { 
video {
position: fixed;
top: 50%;
left: 50%;
display: block;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
}

Il codice scritto sin qui è sufficiente ad avere il video impostato come background, da una certa dimensione di viewport in poi. Ovvio che potremmo anche inserire un logo, un menu di navigazione ecc. E' una pagina HTML a tutti gli effetti.

Impostare il video di background in una pagina Joomla!

Prima di passare alla dimostrazione su come inserire il video di background in una pagina Joomla!, ho volutamente fatto l'esempio per una normale pagina HTML. Il procedimento non cambia in nulla. Vediamo adesso cosa fare per la home page di Joomla!

Si acceda in amministrazione Joomla! e si apra l'articolo attinente alla home page del sito. Inutile dire che deve essere associata alla voce di menu "Home" la tipologia "Articolo statico".

Si disabiliti per un attimo l'editor di Joomla, qualunque esso sia. Il codice HTML è quello riportato più su. Non cambia nulla:

<div class="content-video">

<video class="video" poster="/immagine.jpg" autoplay loop muted>
<source src="/NomeVideo.mp4" type="video/mp4">
<source src="/NomeVideo.ogv" type="video/ogg">
<source src="/NomeVideo.webm" type="video/webm">
</video>

</div><!--/content-video-->

Ricordarsi, se si abilita l'editor, di controllare che non vada perso qualche rigo di codice HTML, se si dovesse apportare qualche modifica alla pagina "Home".

Il codice CSS va scritto, come per qualsiasi sito Joomla!, nel file template.css.

Rispetto all'esempio fatto da me, controllare bene i percorsi, e modificarli, per quanto riguarda il video e l'immagine.

Non potendo disporre di un sottodominio con una installazione di Joomla!, posso assicurare che nella home ho ottenuto il video impostato come sfondo. Ho anche realizzato una ed il risultato non cambia.