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.
MENSAJE
OPERACIÓN EJECUTADA
Utilizziamo i nostri cookie e quelli di terzi per migliorare i nostri servizi, compilare informazioni statistiche e analizzare le vostre abitudini di navigazione. Questo ci permette di personalizzare i contenuti che offriamo e di mostrarvi le pubblicità relative alle vostre preferenze. Cliccando su "Accetta tutto" acconsentite alla memorizzazione dei cookie sul vostro dispositivo per migliorare la navigazione del sito web, analizzare il traffico e assistere le nostre attività di marketing. Potete anche selezionare "Solo cookies di sistema" per accettare solo i cookies necessari al funzionamento del sito web, oppure potete selezionare i cookies che desiderate attivare cliccando su "Impostazioni".
Tradotto con www.DeepL.com/Translator (versione gratuita)" o "Rifiuta".
Questi cookie sono necessari per il funzionamento del sito Web e non possono essere disattivati sui nostri sistemi. Generalmente vengono impostate solo in risposta alle vostre azioni di richiesta di servizi, come l'impostazione delle vostre preferenze sulla privacy, l'accesso o la compilazione di moduli. È possibile impostare il browser in modo da bloccare o avvisare l'utente di questi cookie, ma alcune aree del sito non funzioneranno. Questi cookie non memorizzano alcuna informazione di identificazione personale
Performance Cookies
Questi cookie ci permettono di contare le visite e le fonti di traffico in modo da poter valutare le prestazioni del nostro sito e migliorarle. Ci aiutano a sapere quali sono le pagine più o meno visitate e come i visitatori navigano nel sito. Tutte le informazioni raccolte da questi cookie sono aggregate e quindi anonime. Se non consentite l'utilizzo di questi cookie, non sapremo quando avete visitato il nostro sito e non saremo in grado di valutare se ha funzionato correttamente
Cookies Funzionali
Questi cookie consentono al sito Web di fornire una migliore funzionalità e personalizzazione. Essi possono essere impostati dalla nostra azienda o da fornitori esterni di cui abbiamo aggiunto i servizi alle nostre pagine. Se non si consente l'utilizzo di questi cookie, alcuni di questi servizi potrebbero non funzionare correttamente
Cookies Pubblicitari
Questi cookie possono essere impostati attraverso il nostro sito dai nostri partner pubblicitari. Possono essere utilizzati da queste aziende per profilare i vostri interessi e visualizzare annunci pertinenti su altri siti. Non memorizzano direttamente le informazioni personali, ma si basano sull'identificazione univoca del browser e del dispositivo Internet. Se non si consente l'utilizzo di questi cookie, si vedrà una pubblicità meno mirata