Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Aggiungere video di sfondo

Puoi integrare video di sfondo da YouTube e Vimeo in sezioni di pagina, banner e altre aree, a seconda della versione del tuo sito. I video di sfondo vengono riprodotti in loop senza audio e aggiungono un effetto visivo dinamico al tuo sito. Per una maggiore personalizzazione, puoi applicare filtri stilizzati e colori in sovrapposizione.

Prima di iniziare

Suggerimenti

  • 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 banner a volte non vengono visualizzati su dispositivi mobili, a seconda della versione del browser e della velocità di connessione a disposizione degli utenti. Imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il banner video.
  • Non c'è alcun limite di tempo per i video, anche se i video più brevi potrebbero visualizzare il colore di sfondo più frequentemente durante il loop.
  • I video di sfondo non supportano 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

Suggerimenti di design

I video di sfondo sono ideali per aggiungere elementi visivi ed attrarre i visitatori, ma non dovrebbero distrarre dal contenuto del sito. Ecco alcuni suggerimenti per aggiungere video di sfondo in modo efficace.

Mantenere il file video di dimensioni ridotte

La lunghezza e la risoluzione del vide influiscono sulle dimensioni del file. File video più grandi richiedono più tempo per il caricamento e possono causare l'interruzione della trasmissione del video, in base alla connessione del visitatore.

Sebbene non esista un limite di tempo ufficiale, ti consigliamo di caricare video di sfondo di massimo 40 secondi, se possibile. Per mantenere i video brevi, puoi scegliere contenuto che si ripete senza interruzioni, in modo che il video sembri più lungo ma occupi meno spazio.

Si consiglia di utilizzare video con: 

  • Una frequenza di circa 25 fotogrammi al secondo.
  • Una risoluzione di 720p, ossia 1280 x 720 pixel.

Scegliere contenuto con transizioni graduali

Quando scegli un video, presta attenzione alle transizioni per evitare tagli rapidi ed eccessive interruzioni. Questo tipi di video catturano l'attenzione, ma possono risultare fastidiosi per i visitatori.

Creare contrasto con il testo

Il video di sfondo deve essere in linea con lo stile del sito, in particolare con il colore del testo. Assicurati che i visitatori possano leggere il testo per tutta la durata del video.

Se il contrasto non è sufficiente, puoi:

Step 1 - Trova l'URL del video

Per aggiungere un video di sfondo, caricalo su Youtube o Vimeo e cerca l'URL di condivisione. Non è possibile caricare un video direttamente in Squarespace o integrare video di altri servizi.

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

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 Anyone (Chiunque) e abilita l'integrazione Anywhere (Ovunque), oppure Hide this video from Vimeo.com (Nascondi questo video da Vimeo.com) e abilita l'integrazione Only on sites I choose (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 tuo 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.

Sfondi di sezione

Puoi aggiungere video di sfondo a qualsiasi sezione ad eccezione di blog, eventi e sezioni negozio. Per aggiungere un video di sfondo:

  1. Nel Menu principale, clicca su Pages (Pagine).
  2. Clicca sulla pagina in cui desideri aggiungere il video, quindi clicca su Modifica.
  3. Passa il mouse sulla sezione e clicca sull'icona della matita.
  4. Clicca su Sfondo, quindi su Video.
  5. Incolla l'URL del tuo video nel campo Video.
  6. Scorri verso il basso per personalizzare altre impostazioni del video.
  7. Passa il mouse su Fatto e clicca su Salva.

Banner di pagina

In alcuni modelli, puoi aggiungere un video di sfondo a un banner di pagina del sito Web. Otterrai un elemento di grande impatto visivo, se utilizzato con un testo in sovrapposizione.

  1. Nel Menu principale, clicca su Pages (Pagine).
  2. Passa il mouse sul titolo della pagina nel pannello sinistro e clicca su “the.
  3. Clicca sulla scheda Media.
  4. Nella scheda Media, clicca su Video.
  5. Incolla l'URL del video nel campo Video URL (URL video).

Template supportati

Puoi aggiungere video banner sui tipi di pagina elencati per le seguenti famiglie di modelli:

  • Adirondack - Pagina di layout, dei prodotti, album, eventi, blog
  • Bedford - Pagina di layout, dei prodotti, album, eventi, blog
  • Brine - Pagina di layout, album, eventi, blog
  • Five - Pagina di layout, album, eventi, blog
  • Montauk - Layout, Eventi, Blog, Indice (deve avere un'immagine di fallback su dispositivi mobili)
  • Pacific - Pagina di layout, dei prodotti, album, eventi, blog
  • Tremont - Pagina di layout, dei prodotti, album, eventi, blog
  • York - Layout, Prodotti, Album, Eventi, Blog, Progetto, Indice

Banner video sulle pagine di un Indice

Puoi aggiungere banner video alle pagine interne all'Indice nelle seguenti famiglie di modelli:

  • Bedford
  • Brine
  • Montauk
  • Pacific
  • York

Per aggiungere il video:

  1. Apri le impostazioni della pagina secondaria.
  2. Clicca su Media, quindi su Video.
  3. Segui gli step sopra elencati per aggiungere l'URL del video.

Sfondo della Pagina di Copertina

Per aggiungere il video ad una Pagina di Copertina:

  1. Apri una Pagina di copertina esistente o aggiungine una nuova.
  2. Clicca su Media.
  3. Nel pannello Media, clicca sulla scheda Video.
  4. Incolla l'URL di condivisione del video nel campo Video URL (URL video).

Layout supportati

Nella maggior parte dei layout di Pagina di Copertina, i video vengono riprodotti in uno sfondo a schermo intero dietro il contenuto della Pagina di Copertina, estendendolo sui bordi del browser.

con un paio di eccezioni:

  • Visualizzazione in un pannello laterale - Backstory, Flash, Spotlight, Session, Vignette
  • Visualizzazione in un'area circolare - Focus, Monocle
  • Video non supportati - Flagship, Harbor

Schermata di blocco

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

Per aggiungere un video a una schermata di blocco:

  1. Nel Menu principale, clicca su Design.
  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).

Step 3 - Aggiungi 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.

Step 4 - Modifica la velocità di riproduzione (solo YouTube)

Se stai utilizzando l'URL di un video di YouTube, puoi selezionare Playback Speed per modificare la velocità di riproduzione del video. La velocità predefinita è 1x, con cui il video viene riprodotto a velocità normale.

Step 5 - Aggiungi un'immagine di riserva per 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 per 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:

  1. Clicca su Modifica nella pagina, quindi clicca sull'icona della matita nella sezione con lo sfondo video.
  2. Clicca su Sfondo, quindi su Video
  3. In Immagine di fallback su dispositivi mobili, clicca su Aggiungi un'immagine per caricare un'immagine oppure clicca su Cerca immagini per riutilizzare un'immagine o aggiungere un'immagine stock.
  4. Passa il mouse su Fatto e clicca su Salva.

L'immagine di fallback su dispositivi mobili viene visualizzata anche durante il caricamento del video.

Se non aggiungi un'immagine di fallback su dispositivi mobili, si visualizzerà invece un colore di sfondo. Questo colore dipende dai colori della sezione

  1. Nella scheda Video del pannello Media, scorri verso il basso fino a Immagine di fallback su dispositivi mobili.
  2. Clicca su Carica un'immagineCerca immagine per riutilizzare un'immagineaggiungere un'immagine stock.
  3. Clicca su Save (Salva).

Se non aggiungi un'immagine di fallback su dispositivi mobili, visualizzerai invece un colore di sfondo. Puoi scegliere questo colore nelle seguenti famiglie di modelli:

  • Adirondack - tweak Colore di sfondo del contenuto
  • Bedford -tweak Colore di sovrapposizione del banner
  • Brine tweak Colore di sovrapposizione
  • Five -tweak Colore di sovrapposizione del banner e Sfondo intestazione
  • Montauk - tweak Sfondo dell'area contenuti
  • Pacific - tweak Colore di sovrapposizione
  • Tremont - tweak Colore di sfondo del sito
  • York - tweak Colore di sfondo

Per le Pagine di copertina, utilizza il tweak Sfondo: colore.

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

Disabilita il video di sfondo

Per disabilitare il video di sfondo, aggiungi un'immagine di sfondo. L'immagine sostituirà il video di sfondo.

  1. Clicca su Modifica nella pagina, quindi clicca sull'icona della matita nella sezione con il video. 
  2. Clicca su Sfondo, quindi su Immagine.
  3. Fai clic su Salva.
  1. Nel pannello Pagine, passa il mouse sul titolo della pagina nel pannello sinistro e clicca su “the.
  2. Clicca su Media, quindi su Immagine.
  3. Fai clic su Salva.

Se stai utilizzando una Pagina di copertina, puoi anche scegliere Nessuna per sostituire il video con un colore di sfondo

Guarda un video

Questo video si applica a Squarespace versione 7.0.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 173 su 350
Aggiungere video di sfondo