Includere un video di background in un sito web

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:

<video src="video.mp4" controls="controls"> </video>

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ì:

<video src="video.mp4" width="320" height="240" controls="controls">
Il tuo browser non supporta il tag video!
</video>

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

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

1. <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
2. <iframe frameborder="0" height="100%" width="100%"
3. src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
4. </iframe>
5. </div>
6.  
7. // Rimpiazza 'ID' con l'ID del tuo video YouTube.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.