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

Aggiungere video di sfondo

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:

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 Animazioni ed effetti immagine.

Prima di iniziare

Suggerimenti

  • Il tuo servizio di hosting video è responsabile della qualità e della risoluzione dei tuoi video in streaming. La qualità dello streaming non è controllata da Squarespace. Se i tuoi video sono di bassa qualità, assicurati di seguire i nostri suggerimenti di design. Se la qualità non migliora, contatta il tuo servizio di hosting video.
  • 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

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.
  • Utilizza una risoluzione di 1080p e un bitrate di almeno 3 Mbps.
  • La durata del video ideale è inferiore a 40 secondi.
  • Durante le riprese video, limita il movimento dell'inquadratura o degli oggetti inquadrati. Meno movimento si traduce spesso in video di sfondo più fluidi.
  • I video più brevi potrebbero visualizzare il colore di sfondo più frequentemente durante il loop.
Limitare il numero di video di sfondo per pagina
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 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.

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.

Sfondi di sezione

Puoi aggiungere video di sfondo a qualsiasi sezione ad eccezione di blog, eventi e sezioni negozio. Assicurati che il tuo video rispetti i nostri requisiti video. Per aggiungere un video di sfondo:

  1. Nel menu Home, clicca su Pagine, quindi clicca sulla pagina contenente la sezione che desideri modificare.
  2. Nell'angolo in alto a sinistra, fai clic su Modifica.
  3. Clicca sull'icona della matita nella sezione, quindi fai clic su Sfondo.
  4. Clicca su Video, quindi sull'icona +. Scegli Carica file per aggiungere un video dal tuo dispositivo o clicca su Aggiungi da link per aggiungere un URL Vimeo o YouTube. Dopo aver aggiunto un link, clicca su Salva.
  5. Scorri verso il basso per personalizzare altre impostazioni del video.
  6. 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 Home, fai clic su 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 a 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 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. Nel Menu Home, 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

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.

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

  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 di archivio.
  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, visualizzerai 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'immagine o Cerca immagine per riutilizzare un'immagine o aggiungere 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. Clicca su Save (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. Clicca su Save (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: 207 su 471
Aggiungere video di sfondo