Full video background in una pagina web

Full video background in una pagina web
Full video background in una pagina web

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 page.

Oggi mi occuperò di come inserire un video come background a tutta pagina, sia in un sito statico che in un CMS come Joomla!, senza installare alcuna estensione.

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, fino a determinate dimensioni del viewport.

Questo per evitare tempi lunghi di attesa del caricamento della pagina, non conoscendo a priori il peso del video ed evitare 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 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

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:

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:575px) {
.content-video {
background:lightblue;
height:100%;
}
}

Imposto una immagine di background per i tablet:

@media screen and (min-width:576px) 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 nessun passaggio. 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 l'editor di Joomla, qualunque esso sia. Il codice HTML è quello riportato più su. Non cambia:

<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 pagina demo statica con ed il risultato non cambia.