Come aggiungere un video di YouTube come sfondo a schermo intero in WordPress

A volte cerchiamo di aggiungere nuovi modi per rendere i nostri siti WordPress più coinvolgenti e visivamente attraenti, e uno di questi è l’aggiunta di un video di YouTube come sfondo a schermo intero.

Se utilizzati correttamente, i video di sfondo possono aumentare significativamente l’engagement dei visitatori e il tempo di permanenza su una pagina, oltre a rappresentare un ottimo modo per catturare immediatamente l’attenzione dei visitatori e creare una prima impressione memorabile.

In questo articolo vi mostreremo come aggiungere un video di YouTube come sfondo a schermo intero sul vostro sito web WordPress.

Perché utilizzare un video di YouTube come sfondo a schermo intero?

Uno sfondo video coinvolgente e accattivante sulla vostra header è un ottimo modo per convincere i visitatori a rimanere sul vostro sito. Quando i visitatori arrivano per la prima volta sul vostro sito WordPress, avete solo pochi secondi per catturare la loro attenzione.

Al giorno d’oggi, molti temi WordPress supportano sfondi video, ma caricare e ospitare contenuti video su WordPress può richiedere molta larghezza di banda.

A seconda del vostro piano di hosting WordPress, potreste anche dover acquistare spazio di archiviazione aggiuntivo.

Noi di WPBeginner consigliamo vivamente di non caricare i video su WordPress.

Invece, potete utilizzare un servizio come YouTube e poi incorpora il video come sfondo del vostro sito web WordPress. In questo modo, potrete distinguervi dai vostri concorrenti senza rallentare il sito web e senza compromettere l’esperienza dell’utente.

Detto questo, vediamo come aggiungere un video di YouTube come sfondo a schermo intero sul vostro sito web WordPress. Vi mostreremo due metodi e potrete utilizzare questi collegamenti rapidi per navigare tra di essi:

Metodo 1: Utilizzare Sfondi avanzati di WordPress per lo sfondo video a schermo intero (gratuito)

Se cercate un modo gratuito e semplice per aggiungere sfondi video, potete usare Advanced WordPress Backgrounds.

Questo plugin gratuito aggiunge un blocco Sfondo che consente di creare uno sfondo a schermo intero utilizzando qualsiasi colore, immagine o video, compresi i video di YouTube.

Per prima cosa, è necessario installare e attivare il plugin nella Bacheca di WordPress. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, è sufficiente dirigersi verso la pagina o la pubblicazione in cui si desidera aggiungere un video di YouTube come sfondo a schermo intero. Nell’editor a blocchi di Gutenberg, fare clic sul pulsante “+” per aggiungere un blocco.

Nel popup che appare, iniziare a digitare “Background AWB”. Quando appare il blocco giusto, fare clic per aggiungerlo alla pagina.

Nel menu di sinistra sono presenti tre schede per i diversi tipi di sfondi a larghezza piena che è possibile creare: Colore, Immagine e Video.

Poiché si desidera aggiungere un video di YouTube, fare clic sulla scheda “Video”. Successivamente, scegliere la scheda“YouTube / Vimeo“.

Ora potete copiare e incollare l’URL del file video di YouTube che volete utilizzare sul vostro blog WordPress.

A questo punto, l’editor di blocchi di WordPress mostrerà un’anteprima dell’aspetto di questo sfondo.

Advanced WordPress Backgrounds modifica le dimensioni del video in base al contenuto che gli aggiungete sopra, quindi non preoccupatevi se al momento il video sembra un po’ piccolo.

Per impostazione predefinita, lo sfondo del video è disattivato sui dispositivi mobili.

Tuttavia, se si desidera mostrare lo sfondo del video sui dispositivi mobili, fare clic per attivare la levetta “Abilita su dispositivi mobili”.

Il blocco riproduce l’intero video di YouTube in autoplay e in loop.

Un’altra opzione è quella di riprodurre una porzione specifica del video digitando gli orari esatti nelle caselle “Ora di inizio” e “Ora di fine”.

È anche possibile interrompere la riproduzione del video in loop disabilitando la levetta “Loop”.

Per impostazione predefinita, il video viene riprodotto solo quando il visitatore può vederlo nel suo browser. Questo aiuta a mantenere le prestazioni del sito web, per cui in genere si consiglia di lasciare disabilitata la levetta “Riproduci sempre”.

Quando si aggiunge il video per la prima volta, questo viene visualizzato con un’opacità del 100%, quindi sembra solido. È possibile trascinare il cursore ‘Opacità immagine’ per rendere più sottile lo sfondo del video di YouTube.

Se si sperimenta con l’opacità, si può anche provare ad aggiungere una sovrapposizione colorata.

È sufficiente fare clic per espandere la sezione ‘Colore sovrapposizione’ e utilizzare le impostazioni per creare sovrapposizioni di colori diversi.

Sentitevi liberi di esplorare altre impostazioni, come l’effetto parallasse e la spaziatura, per far apparire lo sfondo esattamente come lo desiderate.

Quando si è soddisfatti di come è impostato lo sfondo del video di YouTube, è il momento di iniziare ad aggiungere contenuti come link, testi e immagini.

Per iniziare, fare clic sull’icona ‘+’ al centro del blocco Sfondo (AWB).

Il plugin Advanced WordPress Backgrounds funziona con tutti i blocchi standard di WordPress, quindi è possibile aggiungere qualsiasi contenuto.

Se si aggiunge del testo in alto al blocco, assicurarsi di cambiare il colore del testo in modo che si integri bene con lo sfondo del video.

Quando si è soddisfatti dell’aspetto, basta fare clic sul pulsante “Aggiorna” o “Pubblica” per rendere la pagina attiva. Ora, se visitate il vostro sito WordPress, vedrete lo sfondo video in azione.

Metodo 2: Utilizzare Thrive Architect per aggiungere uno sfondo video a schermo intero (consigliato)

Se desiderate personalizzare completamente il vostro video di sfondo a schermo intero o anche progettare facilmente tutte le pagine del vostro sito web, questo metodo fa al caso vostro.

Il modo migliore per aggiungere un video di YouTube come sfondo a schermo intero è con Thrive Architect.

Thrive Architect è un plugin di page builder facile da usare e pensato per i principianti. Oltre a una funzione di sfondo video, ha una funzionalità drag-and-drop che è flessibile da usare, in modo da poter creare il sito web desiderato senza alcun problema.

Inoltre, viene fornito con modelli di landing page intelligenti e ottimizzati per le conversioni, in modo che la vostra landing page sia impostata per il successo fin dall’inizio.

Per maggiori informazioni su Thrive Architect, potete leggere la nostra recensione di Thrive Architect.

Se volete utilizzare questo metodo, acquistate prima un piano Thrive Architect. È disponibile come prodotto indipendente o come parte del pacchetto Thrive Themes.

Quindi, è sufficiente installare il plugin. Per ulteriori informazioni, potete consultare la nostra guida su come installare un plugin di WordPress.

Dopodiché, si può andare su “Pagine” dall’area di amministrazione di WordPress e selezionare una pagina da modificare. Passare il mouse sulla pagina e scegliere “Modifica con Thrive Architect”.

Quindi, fare clic sul pulsante ‘+’ sul lato destro della pagina e individuare l’elemento Sezione di sfondo.

Basta fare clic su di esso per aggiungerlo alla pagina.

A questo punto, è possibile spostarsi sul lato sinistro della pagina e scorrere fino alla sezione Stile di sfondo.

È sufficiente attivare la levetta “Sfondo video” e selezionare “YouTube” come sorgente.

Successivamente, andare al video di YouTube che si desidera utilizzare come sfondo a schermo intero.

È sufficiente copiare l’URL del video di YouTube in questo modo:

Quindi, incollare l’URL nella sezione appropriata.

A questo punto si dovrebbe vedere lo sfondo sullo schermo.

Lo sfondo viene aggiunto, ma non è ancora a schermo intero.

Per assicurarsi che sia a schermo intero, è necessario scorrere fino alla sezione Opzioni principali. Quindi, attivare le opzioni “Il contenuto copre l’intera larghezza dello schermo”, “Adatta l’altezza allo schermo” e “Allunga per adattarsi alla larghezza dello schermo”.

Esploriamo altre opzioni. Per aggiungere contenuti allo sfondo, è sufficiente fare di nuovo clic sul pulsante ‘+’ sul lato destro e trascinare un elemento.

È possibile aggiungere testi, immagini, moduli, pulsanti, testimonianze e altro ancora. Thrive Architect ha decine di elementi incentrati sulla conversione che potete sfruttare per il vostro sito web.

Se si ritiene che il colore di sfondo non sia abbastanza contrastante con il testo, è sufficiente tornare alle impostazioni della sezione Sfondo.

Quindi, scorrere di nuovo verso il basso fino a Stile sfondo e, nell’opzione Aggiungi livello, scegliere una tinta unita. Successivamente, è possibile scegliere un colore da utilizzare come filtro di sfondo e regolare l’opacità a piacere.

Al termine, fare clic su “Applica”.

Un’altra cosa che si può regolare nelle impostazioni della sezione Sfondo è il Comportamento di scorrimento. Si può scegliere se renderlo statico, appiccicoso o in parallasse.

Si consiglia di mantenerlo statico, in modo che lo sfondo non si muova mentre l’utente scorre verso il basso. In caso contrario, il video continuerà a essere riprodotto, rallentando il sito web.

La prossima cosa da fare è andare nella sezione Responsive. Qui si può scegliere se far apparire lo sfondo del video sulle versioni mobile e tablet del sito.

Sta a voi decidere, ma tenete presente che i video richiedono un po’ di tempo per essere caricati. Può essere fastidioso per i visitatori aspettare che vengano caricati quando si trovano su un dispositivo a schermo piccolo.

Una volta soddisfatti dello sfondo del video YouTube a schermo intero, è sufficiente fare clic sul pulsante “Salva lavoro” per salvare le modifiche.

Ecco fatto!

Ora, andate sul vostro sito web WordPress per vedere come appare dal vivo.

Ecco come appare la nostra pagina web di prova.

Alternativa: Aggiungere uno sfondo animato in WordPress

Sebbene gli sfondi video possano essere visivamente attraenti, possono anche rallentare la velocità di caricamento del sito web. Se volete un’opzione alternativa, potete aggiungere uno sfondo animato.

Il modo migliore per farlo è SeedProd, un potente plugin per la creazione di pagine trascina e rilascia per WordPress.

Permette di aggiungere facilmente splendidi sfondi animati al sito web utilizzando particle.js. Particle.js è una libreria JavaScript leggera che crea animazioni interattive con particelle.

Per ulteriori informazioni, potete selezionare la nostra guida su come add-on uno sfondo animato in WordPress.

Suggerimento bonus: Aggiungere un feed video di YouTube in WordPress

Volete aggiungere altri video al vostro sito web? Sebbene WordPress disponga di blocchi incorporati per i video, non sono il modo più accattivante per visualizzarli, soprattutto se ne avete molti.

È qui che entra in gioco Smash Balloon YouTube Feed Pro.

Smash Balloon YouTube Feed Pro è il miglior plugin per la galleria di YouTube sul mercato. Mostra automaticamente tutti gli ultimi video del vostro canale YouTube, in modo che i vostri visitatori vedano sempre i contenuti più recenti.

È sufficiente creare un feed di YouTube utilizzando il semplice editor di Smash Balloon, quindi aggiungerlo a qualsiasi pagina o post utilizzando uno shortcode o il blocco già pronto del plugin.

Potete anche usare Smash Balloon per incorporare playlist, preferiti e live stream di YouTube nel vostro sito WordPress.

La cosa migliore di Smash Balloon è che non rallenta il vostro sito. La funzione di caching di YouTube integrata nel plugin assicura che il sito venga caricato sempre velocemente, il che è ottimo per la SEO.

Per maggiori dettagli, potete consultare la nostra guida passo-passo su come mostrare gli ultimi video di un canale YouTube in WordPress.

Speriamo che questo tutorial vi abbia aiutato a capire come aggiungere un video di YouTube come sfondo in WordPress. Potreste anche voler selezionare la nostra guida su come creare una landing page virale per le liste d’attesa con WordPress e le nostre scelte degli esperti per i migliori builder di temi per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.