Un video YouTube incorporato in WordPress carica normalmente un iframe, script, immagini e richieste di rete già all’apertura della pagina. Una soluzione più leggera consiste nel mostrare soltanto un’anteprima cliccabile e creare l’iframe con JavaScript dopo l’interazione dell’utente. In questo modo il contenuto di YouTube viene richiesto solo quando il visitatore decide di riprodurlo. Il metodo riduce il lavoro iniziale del browser, limita le connessioni verso YouTube e può migliorare il caricamento delle pagine con più video.

Perché ritardare il caricamento dei video YouTube

Il codice standard fornito da YouTube usa un elemento <iframe> simile a questo:

<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/ID_VIDEO"
title="Video YouTube"
frameborder="0"
allowfullscreen>
</iframe>

L’iframe viene caricato immediatamente, anche se il visitatore non preme il pulsante di riproduzione. Una pagina WordPress con più video può quindi generare diverse richieste di rete, caricare risorse esterne e aumentare il lavoro necessario per visualizzare rapidamente il contenuto principale.

Con il metodo “facade”, l’iframe viene sostituito inizialmente da un’immagine e da un pulsante. Il video YouTube WordPress con caricamento JavaScript viene creato soltanto dopo il clic, quando l’intento dell’utente è esplicito.

I principali vantaggi sono:

meno richieste iniziali verso i server di YouTube;
migliore comportamento delle pagine con più video incorporati;
caricamento differito degli script collegati al lettore;
controllo più chiaro sull’avvio della riproduzione;
possibilità di usare il dominio youtube-nocookie.com per ridurre i cookie associati all’incorporamento.

L’anteprima non elimina ogni richiesta esterna se l’immagine viene caricata da YouTube. Per ottenere un caricamento iniziale privo di richieste verso i server esterni, è necessario salvare l’immagine di anteprima nella libreria media di WordPress e usare un URL locale.

Come preparare l’anteprima HTML in WordPress

Recupera l’ID del video dall’URL di YouTube. Nell’indirizzo https://www.youtube.com/watch?v=dQw4w9WgXcQ, per esempio, l’ID è dQw4w9WgXcQ. Gli ID standard dei video YouTube hanno 11 caratteri.

Nel pannello di WordPress apri l’articolo o la pagina, aggiungi un blocco HTML personalizzato e inserisci questo codice:

<div class="yt-lazy" data-video-id="dQw4w9WgXcQ">
<button
class="yt-lazy__button"
type="button"
aria-label="Riproduci il video YouTube"
>
<img
class="yt-lazy__image"
src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg"
width="480"
height="360"
loading="lazy"
alt="Anteprima del video YouTube"
>
<span class="yt-lazy__play" aria-hidden="true">▶</span>
</button>
</div>

Sostituisci entrambe le occorrenze di dQw4w9WgXcQ con l’ID del video desiderato. L’immagine hqdefault.jpg viene generata da YouTube, ma potrebbe non essere disponibile per video privati, rimossi o con restrizioni particolari.

Per più video nella stessa pagina, copia il blocco cambiando il valore di data-video-id e l’indirizzo dell’immagine. Il JavaScript potrà gestire tutti gli elementi .yt-lazy senza duplicare lo script.

Aggiungere lo stile dell’anteprima

Inserisci il CSS in Aspetto > Personalizza > CSS aggiuntivo, se il tema offre questa voce, oppure nel foglio di stile del tema child:

.yt-lazy {
position: relative;
width: 100%;
max-width: 560px;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #111;
}

.yt-lazy__button {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
cursor: pointer;
background: #111;
}

.yt-lazy__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.yt-lazy__play {
position: absolute;
top: 50%;
left: 50%;
display: grid;
width: 64px;
height: 46px;
place-items: center;
transform: translate(-50%, -50%);
border-radius: 12px;
color: #fff;
background: #f00;
font-size: 24px;
}

.yt-lazy__button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}

La proprietà aspect-ratio mantiene proporzioni coerenti e riduce il rischio di spostamenti del layout durante il caricamento. Se il tema WordPress usa già regole per immagini o pulsanti, le classi con prefisso .yt-lazy limitano i conflitti con gli altri componenti.

Come creare l’iframe con JavaScript dopo il clic

Il codice seguente verifica l’ID, costruisce l’URL di incorporamento e sostituisce l’anteprima con un iframe. L’uso di youtube-nocookie.com abilita la modalità con cookie limitati, anche se l’incorporamento può comunque comportare richieste verso servizi esterni quando il video viene avviato.

document.querySelectorAll('.yt-lazy').forEach(function (card) {
const button = card.querySelector('.yt-lazy__button');

if (!button) {
return;
}

button.addEventListener('click', function () {
const videoId = card.dataset.videoId;

if (!videoId || !/^[A-Za-z0-9_-]{11}$/.test(videoId)) {
return;
}

const iframe = document.createElement('iframe');

iframe.src =
'https://www.youtube-nocookie.com/embed/' +
encodeURIComponent(videoId) +
'?autoplay=1';

iframe.title = 'Video YouTube';
iframe.loading = 'lazy';
iframe.width = '560';
iframe.height = '315';
iframe.allow =
'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
iframe.allowFullscreen = true;

card.replaceChildren(iframe);
});
});

Il controllo con espressione regolare impedisce di usare valori non conformi al formato previsto per un ID YouTube. La funzione replaceChildren() rimuove il pulsante e l’immagine, evitando che l’anteprima resti nel documento insieme al lettore.

Per rendere l’iframe responsive, aggiungi queste regole al CSS:

.yt-lazy iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}

Il parametro autoplay=1 funziona perché la riproduzione viene richiesta subito dopo un clic dell’utente. L’autoplay non richiesto, invece, può essere bloccato dai browser, soprattutto quando include l’audio.

Dove inserire JavaScript senza errori in WordPress

WordPress può rimuovere il tag <script> dal blocco HTML personalizzato per gli utenti privi del permesso unfiltered_html. Anche quando il codice viene conservato, inserire script direttamente nell’editor non è la soluzione più ordinata per un sito gestito da più persone.

Le opzioni più affidabili sono:

inserire il codice in un file JavaScript del tema child;
caricare lo script tramite il tema o un piccolo plugin personalizzato;
usare un plugin per gli snippet solo se consente il caricamento nel piè di pagina;
aggiungere lo script tramite una funzione WordPress con wp_enqueue_script().

Nel tema child, salva il codice in assets/js/youtube-lazy.js e caricalo dal file functions.php:

add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'youtube-lazy',
get_stylesheet_directory_uri() . '/assets/js/youtube-lazy.js',
array(),
'1.0',
true
);
});

Se il tema child non è attivo, get_stylesheet_directory_uri() potrebbe puntare alla directory del tema principale o non riflettere la struttura desiderata. In un tema principale può essere più appropriato usare get_template_directory_uri().

Dopo l’inserimento, svuota la cache di WordPress, del plugin di ottimizzazione e della rete di distribuzione dei contenuti, se presente. Verifica poi la pagina in una finestra privata e controlla negli strumenti per sviluppatori che la richiesta all’iframe YouTube compaia soltanto dopo il clic.

Il video YouTube WordPress con caricamento JavaScript è efficace quando l’anteprima resta accessibile, il pulsante è raggiungibile da tastiera e l’iframe viene creato solo al momento dell’interazione.

Per approfondire, consulta la documentazione ufficiale.

Potrebbe interessarti anche:

FAQ

Sì. È sufficiente usare più elementi .yt-lazy, ognuno con un diverso valore data-video-id. Lo script aggiunge un gestore separato a ogni anteprima.

Sì. Sostituisci l’URL di i.ytimg.com con l’indirizzo dell’immagine caricata in WordPress. Questa scelta evita la richiesta iniziale all’immagine ospitata da YouTube.

Il blocco HTML personalizzato può filtrare i tag `

Riduce le richieste iniziali verso YouTube e consente di usare youtube-nocookie.com, ma non elimina le comunicazioni esterne quando il video viene caricato e riprodotto.

Sì, se il contenitore usa aspect-ratio e l’iframe ha width: 100% e height: 100%. Queste regole adattano il lettore alla larghezza disponibile.

Altri articoli di questa serie: