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