Siete stanchi delle solite, noiose immagini statiche utilizzate come sfondo del vostro sito? Preferireste qualcosa di piú movimentato? Di seguito vi spiegheremo diverse metodologie che vi aiuteranno a ravvivare la vostro home page inserirendo un video come background.
Per l'integrazione di un video come sfondo del vostro sito web, si possono utilizzare tre diversi approcci:
1. Utilizzare l' HTML5. Per visualizzare correttamente un video in html5 è sufficiente usare la seguente dichiarazione:
Tuttavia spesso le nostre esigenze sono più ampie, e soprattutto ci sono alcuni attributi che è bene non dimenticare di menzionare, quali ad esempio le dichiarazioni di larghezza ed altezza. Possiamo quindi ampliare il nostro codice così:
Internet Explorer 8 purtroppo non supporta l'elemento video in nessun formato. In IE 9 invece sono supportati i video con codifica MPEG4.
Attributi video HTML5
| Attributo | Valore | Descrizione |
|---|---|---|
| autoplay | autoplay | Specifica se il video deve partire non appena è pronto |
| controls | controls | Permette di mostrare i comandi di riproduzione |
| height | pixels | Specifica l'altezza in pixel del lettore |
| loop | loop | Permette di far eseguire il video a ciclo continuo |
| preload | preload | Permette di decidere di far iniziare il video solo quando è stato caricato interamente. Questo attributo è ignorato se la funzione autoplay è attiva |
| src | url | Indica il percorso in cui si trova il video |
| width | pixels | Specifica la larghezza del lettore |
E per avere un video cross-browser? Se siete dei maniaci del Mac potete avvalervi di Miro Video Converter, grauito ed open source. Per i fan dei PC invece vi consigliamo a questa lista di utilità, gratuite e non: http://www.webmproject.org/tools/.
IMPORTANTE: per includere un video di background che si adatti a tutti i dispositivi, potete ricorrere alle media query o dare delle dimensioni fluide allo stesso video tramite CSS.
video {width:100%; max-width:500px;height:auto;}
2- Per includere un video come background della homepage di un sito web, possiamo ricorrere all'utilizzo di plugin Jquery come Tubular o BigVideo.js.
3- Per inserire un video di YouTube come sfondo della vostra pagina webpotete usare semplicemente del codice HTML e CSS
- // Rimpiazza 'ID' con l'ID del tuo video YouTube.
