Aggiungere video di sfondo

Aggiungi effetti visivi interessanti con video riprodotti automaticamente dietro i contenuti del tuo sito.

Usa i video di sfondo per aggiungere effetti visivi dinamici al tuo sito. Ad esempio, puoi aggiungere testo e immagini ai video di sfondo per donare più dimensioni e contenuti dinamici alle tue pagine. Questi video vengono riprodotti in loop e non hanno audio. Per i video di sfondo, è possibile:

• Utilizzare i video di YouTube e Vimeo in sezioni di pagina, banner e altre aree, a seconda della versione del sito.
• Caricare video di tua proprietà negli sfondi delle sezioni nella versione 7.1.

Per una maggiore personalizzazione, puoi anche applicare filtri stilizzati e colori in sovrapposizione.

Suggerimento: puoi anche aggiungere sfondi animati con effetti immagine e sfondi Scenographik esclusivi. Per maggiori informazioni, visita Immagini di sfondo di sezione e Sfondi Scenographik di sezione.

Guarda un video

Prima di iniziare

Suggerimenti

• Il tuo servizio di hosting video è responsabile della qualità e della risoluzione dei video trasmessi in streaming. La qualità dello streaming è al di fuori dal controllo di Squarespace. Se i tuoi video sembrano di bassa qualità, assicurati di seguire i nostri suggerimenti di progettazione.
• I video caricati su Squarespace si possono visualizzare a 1080p o 360p a seconda del dispositivo, del browser e della connessione Internet. Non è possibile selezionare manualmente la risoluzione da visualizzare.
• Mentre i banner video che seguono i nostri suggerimenti di design dovrebbero apparire sui computer, i video potrebbero non essere sempre visualizzati sui dispositivi mobili, a seconda della velocità di connessione e della versione del browser a disposizione degli utenti. Imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il banner video.
• Durante il buffering del video verrà visualizzato il colore di sfondo della pagina o del banner. Se il caricamento del video richiede qualche secondo, potrebbe essere visualizzata l'immagine di fallback su dispositivi mobili. Il tempo di caricamento dipende dalla tua connessione Internet.
• I video di sfondo supportano gli URL YouTube e Vimeo, ma non supportano l'aggiunta di codice da incorporare.

YouTube

• Disabilita gli annunci overlay o questi verranno visualizzati sul video di sfondo.
• I visitatori potrebbero visualizzare brevemente un logo YouTube, il titolo del video, l'icona di un orologio o un'icona di condivisione durante il caricamento del video, a seconda del layout e del dispositivo.
• Gli Annunci video che vengono riprodotti prima del video stesso, anche conosciuti come annunci pre-roll, non verranno riprodotti nel video di sfondo.

Vimeo

• Per aggiungere un video di sfondo da Vimeo, devi disporre di un piano Vimeo a pagamento.
• Non è possibile aggiungere video HD Vimeo a Pagine di copertina o banner.

Suggerimenti di design

I video di sfondo sono ideali per aggiungere elementi visivi e attrarre i visitatori, ma non dovrebbero distrarre dal contenuto del sito. Ecco alcune procedure consigliate per aggiungere video di sfondo in modo efficace. Se stai caricando un video di sfondo, scopri i nostri requisiti per i video.

Per la scelta dei video da utilizzare in uno sfondo, segui questi suggerimenti:

Suggerimento	Note
Mantenere il file video di dimensioni ridotte	Per i video incorporati, non c'è alcun limite di durata. Per i video caricati, la lunghezza massima è di 60 secondi. La lunghezza e la risoluzione del video influiscono sulle dimensioni del file. File video più grandi richiedono più tempo per il caricamento e possono causare l'interruzione della trasmissione dei video, in base alla connessione del visitatore. Ricorda: Una frequenza di fotogrammi ideale è di circa 60 fotogrammi al secondo, soprattutto se il video viene visualizzato al rallentatore. Se il tuo video appare sfocato sui dispositivi mobili, prova ad aumentare la frequenza dei fotogrammi a più di 60 fotogrammi al secondo, quindi carica nuovamente il video. Mantieni la durata del video inferiore a 40 secondi. I video più brevi potrebbero visualizzare il colore di sfondo più frequentemente durante il loop. Utilizza una risoluzione di 1080p e un bitrate di almeno 3 Mbps. Durante le riprese video, limita il movimento dell'inquadratura o degli oggetti inquadrati. Meno movimento si traduce spesso in video di sfondo più fluidi.
Usa un rapporto dimensionale ampio	Gli sfondi delle sezioni vengono ridimensionati automaticamente in base al contenuto e alle dimensioni della finestra del browser del visitatore. Per ridurre il ritaglio, utilizza video con proporzioni orizzontali o in modalità panorama, ad esempio 16:9. Prova a cercare o registrare video in cui il soggetto è centrato e ha dello spazio intorno che può essere tagliato via in modo sicuro.
Limitare il numero di video di sfondo per pagina	Aggiungi al massimo due video di sfondo per pagina. In questo modo, ridurrai le dimensioni della pagina, con tempi di caricamento più rapidi.
Scegliere video con transizioni graduali	Per mantenere accessibili i tuoi video, evita contenuti che lampeggiano tre o più volte al secondo. Presta attenzione alle transizioni ed evita tagli rapidi o un eccessivo effetto panning. I video che sembrano "saltare" da un punto all'altro risultano fastidiosi per i visitatori.
Creare contrasto con il testo	Cambia il colore del tipo di carattere. Ad esempio, se il video è per lo più scuro, scegli un colore del tipo di carattere più chiaro per il testo in sovrapposizione. Cambia la luminosità del video con i filtri. Per maggiori informazioni sul contrasto di colore, visita Rendere più accessibile il tuo sito Squarespace.

Step 1 - Prepara il file video o l'URL

Per aggiungere un video di sfondo, puoi caricare il file video su uno sfondo di sezione nella versione 7.1. Puoi anche caricare il tuo video su YouTube o Vimeo e trovare l'URL di condivisione.

Nota: assicurati che l'URL non includa una marca temporale per una sezione specifica del video, in quanto ciò impedirà il caricamento.

Carica il tuo video

Per preparare il file video da caricare, assicurati che il video soddisfi i nostri requisiti di caricamento video. Tieni presente che il limite di durata per i video di sfondo caricati è di 60 secondi.

YouTube

1. Crea o accedi ad un account YouTube.
2. Carica un video o cercane uno già caricato in precedenza.
3. Assicurati che il video sia impostato su Non in lista o Pubblico e consenta l'integrazione.
4. Copia l'URL di condivisione del video.

Vimeo

1. Crea o accedi a un account Vimeo.
2. Carica un video o cercane uno già caricato in precedenza.
3. Assicurati che le impostazioni di privacy del video siano configurate su Chiunque e abilita l'integrazione Ovunque, oppure Nascondi questo video da Vimeo.com e abilita l'integrazione Solo sui siti scelti da me.
4. Copia l'URL di condivisione del video.

Step 2 - Aggiungi il video

Gli step per aggiungere un video dipendono dalla versione del sito e da dove desideri aggiungere il video.

Suggerimento: fino a quando non aggiungerai l'URL, visualizzerai il breve video di un oceano come contenuto dimostrativo.

Schermata di blocco

Puoi aggiungere un video alla tua schermata di blocco al posto di un'immagine o uno slideshow. Le schermate di blocco sono supportate su tutti i nostri i siti.

Per aggiungere un video a una schermata di blocco:

1. Apri il pannello della Schermata di blocco.
2. Clicca su Lock Screen (schermata di blocco).
3. Clicca su Media.
4. Clicca sulla scheda Video.
5. Incolla l'URL del video nel campo Video URL (URL video).

Passaggio 3 - Selezionare la larghezza dello sfondo

I video di sfondo si possono visualizzare in smarginatura completa o come inset nei bordi della sezione.

• L'opzione Full Bleed estende le dimensioni dell'immagine da un margine della finestra del browser all'altro, per l'intera larghezza del tuo sito.
• Inset indenta leggermente l'immagine e crea un bordo attorno ad essa.

Quando l'immagine è impostata su Inset, è possibile modificarne il colore del bordo.

Passaggio 3 - Aggiungere un filtro

I filtri cambiano l'aspetto del video conferendogli un effetto stilizzato. I filtri vengono applicati anche all'Immagine di sfondo per dispositivi mobili del video. L'effetto di un filtro dipende dal colore e dalle immagini del video, per questo motivo ti consigliamo di sperimentare fino a trovare l'effetto desiderato.

Per aggiungere un filtro, clicca sul menu a discesa Filtro nella scheda Video. Per tutti i filtri, tranne Inverti, puoi regolare l'intensità utilizzando il cursore. I filtri potrebbero avere un effetto diverso a seconda del browser utilizzato.

Passaggio 4 - Modificare la velocità di riproduzione

Se stai utilizzando un link URL YouTube o Vimeo, puoi modificare l'impostazione in Velocità di riproduzione per aumentare o diminuire la velocità del video. La velocità predefinita è 1x, con cui il video viene riprodotto a velocità normale.

Passaggio 5 - Aggiungere un'immagine di fallback su dispositivi mobili

I browser per dispositivi mobili supportano i video di sfondo ma a seconda della velocità di connessione e dalla versione del browser potrebbero non caricarsi sempre. Imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il banner video. I filtri vengono applicati anche all'immagine di fallback su dispositivi mobili. Per risultati ottimali, formatta l'immagine per la visualizzazione web prima di caricarla.

Il modo per aggiungere un'immagine di fallback su dispositivi mobili dipende dalla versione del tuo sito. Per aggiungere un'immagine di fallback su dispositivi mobili:

Suggerimento: aggiungi una .gif animata come immagine di fallback su dispositivi mobili per creare un effetto simile al video.

Disabilitare o eliminare gli sfondi video

Per rimuovere un video di sfondo esistente, puoi disabilitarlo o eliminarlo. Per disabilitare i video di sfondo, passa a un'immagine di sfondo. In questo modo, l'immagine impostata sostituisce il video di sfondo. È possibile eliminare i video di sfondo solo nei siti della versione 7.1. Se elimini un video, si libererà spazio di archiviazione video sul tuo sito.

Guarda un video (versione 7.0)

Questo video si applica a Squarespace versione 7.0.