Includere un video di background in un sito web

Includere un video di background in un sito web
by Janeth Kent Date: 11-04-2013

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

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

  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.

 

 
by Janeth Kent Date: 11-04-2013 visite : 15621  
 
Janeth Kent

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.

 
 
 
Clicky