Aggiungere video di sfondo

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

Ultimo aggiornamento 16 gennaio 2025

Per creare un effetto visivo dinamico, uno dei tanti modi per dare un tocco di stile allo sfondo del tuo sito consiste nell'utilizzare dei video. Ad esempio, puoi aggiungere testo e immagini sulla parte superiore dei video di sfondo per dare più spessore e aggiungere contenuti dinamici alle tue pagine. Questi video vengono riprodotti in loop e sono silenziosi. Per i video di sfondo, puoi:

  • 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.

Scopri tutte le opzioni per personalizzare lo sfondo in Personalizzare lo sfondo del sito.

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 video di sfondo che seguono i nostri suggerimenti di progettazione 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 video di sfondo.
  • 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.
  • I dispositivi in modalità risparmio energetico non mostrano i video in background. Se aggiungi un'immagine di fallback su dispositivi mobili, questa viene visualizzata. Se non aggiungi un'immagine di fallback, viene visualizzata una miniatura del video e un pulsante di riproduzione non reattivo.

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 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
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. 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 sulla privacy del video siano impostate su Pubblico o Nascondi da Vimeo. Consenti l'incorporamento Ovunque o in Domini specifici. Se scegli di consentire l'incorporamento solo su domini specifici, assicurati di aggiungere il dominio del tuo sito web nel campo di testo visualizzato.
  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 delle sezioni blog, eventi, galleria e negozio. Assicurati che il tuo video rispetti i nostri requisiti video. Per aggiungere un video di sfondo:

  1. Apri il pannello Pagine e clicca sulla pagina con la sezione che vuoi 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 clicca sull'icona +. Scegli una sorgente video dal menu a discesa. Per i passaggi dettagliati, visita la sezione sottostante.
  5. Scorri verso il basso per personalizzare altre impostazioni del video.
  6. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Aggiungere un video

Dopo aver fatto clic sull'icona +, scegli come aggiungere il tuo video:

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. Apri il pannello 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).

Modelli 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 smarginatura completa 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. 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. L'effetto dei filtri potrebbe variare a seconda del browser utilizzato.

Puoi utilizzare il filtro Opacità per aggiungere un colore in sovrimpressione. Clicca sulla scheda Colori per selezionare un tema cromatico per la sovrapposizione e i contenuti aggiunti. Per maggiori informazioni, visita Modificare i colori. Se rimuovi il video, la sovrapposizione diventa il colore di sfondo della sezione.

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:

  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. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

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.

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.

Per disabilitare 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).

Ogni sito dispone di uno spazio di archiviazione per 30 minuti di video. Se raggiungi questo limite, puoi eliminare qualche video per liberare spazio. Per maggiori informazioni, visita Gestire e riutilizzare immagini e video.

  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 (versione 7.0)

Questo video si applica a Squarespace versione 7.0.

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.