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 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
posterindica 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 575px non vedremo nulla. Solo colore di sfondo della pagina.
- Da 576px 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: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 il video impostato come background ed il risultato non cambia.