Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

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

Se usati correttamente, i video di sfondo possono catturare immediatamente l’attenzione di un visitatore e trattenerlo sul vostro sito web. Per questo i video sono un’ottima scelta per le landing page e le pagine di vendita.

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

How to add YouTube video as fullscreen background in 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.

How to add a fullscreen video to a WordPress blog post or page

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.

Getting the URL for a YouTube video

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.

How to customize a YouTube background video in WordPress

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

Showing a YouTube background on mobile devices

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

How to add a YouTube background video to a website

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.

Changing the opacity settings for a YouTube video

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.

Adding an overlay to a video background

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

Adding blocks to a YouTube background video

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.

An example of a YouTube video background in WordPress

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.

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

Clicking Edit with Thrive Architect on a page

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.

Adding a Background section in Thrive Architect

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.

Selecting a video background style in Thrive Architect

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:

Getting the URL for a YouTube video

Quindi, incollare l’URL nella sezione appropriata.

A questo punto si dovrebbe vedere lo sfondo sullo schermo.

Pasting video background URL in Thrive Architect

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

Adjusting the video background height and width in Thrive Architect

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

Changing the color overlay opacity in Thrive Architect

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.

Adjusting the scroll behavior of the video background in Thrive Architect

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.

Adjusting the responsiveness behavior of the video background in Thrive Architect

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.

Video background example made with Thrive Architect

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.

The particle background's advanced settings in SeedProd

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.

Embedding a YouTube playlist using Smash Balloon

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

Creating a YouTube feed using the Smash Balloon social media plugin

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

14 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed says

    This is very simple yet powerful idea to grab the visitors attention by playing something in the background.
    I have used it with page builders and never knew that simple method directly from Gutenberg is also available to use.
    it is specially helpful for landing and sales pages which makes intuitive on visitors part to engage with call to action button.
    Thank for illustrating the simple steps.

  3. THANKGOD JONATHAN says

    I have an uploaded video on my WordPress library and I have been thinking of making it like a background video on my blog.
    Please how do I do it properler so that it does not affect my website speed? Or must I upload it on youtube and then embed it on my site?

  4. Ralph says

    I want to use it as a background for my portfolio/business contact page, but does it slow down the website itself, or does it load it straight from YouTube and doesn’t slow down the website itself?

    Previous comments are old but still concerning.

    • WPBeginner Support says

      The videos should load as an embed from YouTube which shouldn’t cause a slowdown on your site.

      Admin

    • Jiří Vaněk says

      I shouldn’t worry about the slowdown of the website itself. The issue here lies mainly in slow connectivity and data on these devices. The first problem arises with mobiles that don’t have strong connectivity. It will lag, appear unprofessional, and perhaps lead the user to leave. The second issue is that if someone has a limited data plan, they’ll complain about how much data such a page consumes. Personally, I’d probably avoid this.

  5. Jiří Vaněk says

    I can learn something new again with Gutenberg. I’ve always known how to do this only in Elementor, where adding a video background is really simple. Now I know how to do it outside of Elementor as well.

  6. T_Lind says

    Great article!

    But I cannot add the video background to a single page, like you describe. I’m only able to add a youtube video to my homepage, which limits the extend to which the app can be used.

    Ideas?

  7. Tobi says

    Hi, this plugin was a disaster to my website.

    It consumed all the resources and for hours I was on the phone with my hosting company trying to battle why I was getting the errors on this screenshots below:

    After hours, we finally traced them to the plugin i recently installed.

    We had to remove it from the file manager and everything is back to normal now.

    It takes up a lot of resources unless you have a super hosting account, i don’t advise.

    • WPBeginner Support says

      Hi Tobi,

      The plugin shouldn’t consume too many resources because it loads video from YouTube not from your website. The first screenshot you shared points to a database connection error. We hope everything works fine for you now, however, if you still see issues on your website then it is most likely a hosting issue.

      Admin

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.