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 nelle Pagine di copertina e nei banner di alcuni modelli. I video di sfondo vengono riprodotti senza interruzioni e senza audio, aggiungendo un effetto visivo dinamico al tuo sito.

Puoi mostrare video di sfondo utilizzando gli URL di condivisione Vimeo o YouTube. Per una maggiore personalizzazione, puoi applicare filtri o colori in sovrapposizione.

Guarda un video

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 riserva mobile. 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 embed.

YouTube

  • Imposta il video come Pubblico/Non in elenco e abilita l'incorporazione. I video privati di YouTube non verranno visualizzati come video di sfondo.
  • Disabilita gli Annunci overlay. Se il video ha questa opzione abilitata, gli annunci saranno visualizzati nel video di sfondo.
  • In base al layout scelto e al dispositivo utilizzato dai tuoi visitatori, è possibile che venga visualizzato brevemente il logo YouTube nell'angolo inferiore destro del video. Puoi renderlo meno evidente applicando il filtro Blur (Sfocatura) al tuo video. 
  • 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 Plus o superiore.
  • Modifica le tue impostazioni di privacy Vimeo per essere certo che i tuoi video vengano integrati. Configura il video come Anyone (Chiunque) e abilita l'integrazione Anywhere (Ovunque). I video di Vimeo privati non vengono visualizzati come video di sfondo.
  • Puoi anche impostare il video su Hide this video from Vimeo.com (Nascondi video da Vimeo.com) e consentire l'integrazione Only on sites I choose (Solo sui siti scelti da me).

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

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 Pubblico/Non incluso nella lista e abilita 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 il video sia impostato su Anyone (Chiunque) e abilita l'integrazione.
  4. Copia l'URL di condivisione del video.

Step 2 - Aggiungi il video

Gli step per aggiungere il video sono diversi per le Pagine di Copertina e per i banner. Segui gli step a seconda di dove desideri aggiungere il video.

Nota: Fino a quando non aggiungi l'URL, visualizzerai un breve video dell'oceano come contenuto dimostrativo.

Sfondo della Pagina di Copertina

Per aggiungere il video ad una Pagina di Copertina:

  1. Apri una Pagina di Copertina esistente o creane una nuova:
  • Per siti Copertina a pagina unica: nel Menu principale, clicca su Media.
  • Per Pagine di Copertina aggiunte a siti web o negozi online: nel Menu principale clicca su Pages (Pagine).
  • Clicca su Media.
  • Nel pannello Media, clicca sulla scheda Video .
  • 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.

    Tuttavia, questi layout mostrano video in modo diverso:

    • Flash - Viene visualizzato nel pannello laterale
    • Spotlight - Viene visualizzato nel pannello laterale
    • Vignette - Viene visualizzato nel pannello laterale
    • Backstory - Viene visualizzato nel pannello laterale
    • Session - Viene visualizzato nel pannello laterale
    • Focus - Viene visualizzato in un'area circolare
    • Monocle - Viene visualizzato in un'area circolare
    • Flagship - Non supporta video
    • Harbor - Non supporta video

    Banner di pagina

    In alcuni template, puoi aggiungere un video di sfondo come banner al posto di un'immagine statica. Questo crea un elemento di grande impatto visivo se utilizzato con un overlay di testo.

    Per aggiungere il video ad un banner di pagina:

    1. Nel Menu principale, clicca su Pages (Pagine).
    2. Passa il mouse sul titolo della pagina sul pannello sinistro e clicca sull'icona .
    3. Clicca sulla scheda Media
    4. Una volta sulla 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 - Pagine di layout, prodotti, album, eventi, blog, progetto, indice

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

    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 Filter (Filtro) nella scheda Video  e scegli tra:

    • Blur (Sfocatura)
    • Brightness (Luminosità)
    • Contrast (Contrasto)
    • Invert (Inverti)
    • Opacity (Opacità)
    • Saturate (Saturazione)
    • Sepia (Seppia)

    Per tutti i filtri, tranne Invert, puoi regolare l'intensità utilizzando il cursore.

    Nota: 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. Scegli tra quattro diverse velocità:

    • 0,5x (lento)
    • 1x (normale)
    • 1.5x (rapido)
    • 2x (più rapido)

    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.

    Per impostare un'immagine di riserva per dispositivi mobili:

    1. Nel pannello Media, clicca sulla scheda Video.
    2. Scorri verso il basso e trascina l'immagine nell'apposito strumento di caricamento. Puoi anche utilizzare un'immagine di archivio.
    3. Clicca su Save (Salva).
    Suggerimento: Aggiungi una .gif animata come immagine di sfondo per dispositivi mobili per creare un effetto simile.

    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

    In Pagine di copertina, utilizza il tweak Sfondo: colore.

    Step 6 - Aggiungi un colore di overlay (solo per Pagine di Copertina)

    Gli overlay aggiungono un tocco di colore ai video di sfondo nelle Copertine. Per impostazione predefinita, il colore del sito è in una tonalità di grigio abbinata al video. Dal momento che l'effetto di queste impostazioni dipenderà dal video stesso e dall'utilizzo di un eventuale filtro, consigliamo di provare vari colori per trovare la combinazione più adatta al tuo video.

    Per modificare il colore di overlay:

    1. Nel pannello Pagina di Copertina o nel Menu principale clicca su Style(Stile).
    2. Scorri verso il basso fino a Video Background (Video di Sfondo).
    3. Clicca su Custom Overlay Color (Colore di overlay personalizzato).
    4. Scegli un nuovo colore dalla tavolozza.
    5. Puoi anche selezionare Overlay Color Blend Mode (Modalità di miscelatura del colore di overlay) dal menu a discesa per modificare l'aspetto del colore.
    Per banner di pagine web: se supportati dal template, overlay di testo o un colore di overlay vengono visualizzati sul video del banner. Gli overlay di banner del sito web non offrono una modalità di miscelazione del colore di overlay.

    Disabilita il video di sfondo

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

    Nella scheda o nel pannello Media, clicca su Image(Immagine), quindi su Save (Salva). L'immagine sostituirà il video di sfondo.

    Se stai utilizzando una Pagina di Copertina, puoi anche scegliere None (Nessuna) per sostituire il video con un colore di sfondo. 

    Banner video in 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, apri le impostazioni della pagina secondaria e clicca su Media, quindi, su Video. Completa gli step precedenti per aggiungere l'URL video.

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