Incorporare un video YouTube sembra semplice: copi un link, incolli del codice, fatto. Ma c’è una differenza reale tra un embed che funziona e basta e uno che è veloce, responsive, rispettoso della privacy e correttamente dimensionato su ogni dispositivo. Questa guida copre tutto in un unico posto.
Cosa significa davvero “incorporare”
Incorporare un video significa mostrarlo direttamente sulla propria pagina web tramite un <iframe>, invece di limitarsi a rimandare a YouTube con un link. YouTube genera un URL speciale per l’embed di ogni video (nella forma youtube.com/embed/VIDEO_ID), ed è questo URL che va inserito nell’attributo src dell’iframe. La pagina visibile di YouTube.com in sé, quella con i commenti e i video consigliati, non può essere incorniciata in questo modo: solo l’URL dedicato all’embed è pensato per questo scopo.
L’anatomia di un codice embed
Un embed di base è così:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>Ogni parte conta. Width e height impostano una dimensione fissa in pixel, che funziona ma non si adatta a schermi diversi. L’URL in src determina quale video viene riprodotto e quale dominio lo gestisce (un dettaglio che conta per la privacy, come vedremo più avanti). L’attributo title non è decorativo: gli screen reader lo annunciano, quindi un titolo generico o assente è una vera lacuna di accessibilità. allowfullscreen permette al visitatore di espandere il player, cosa che la maggior parte degli utenti si aspetta da qualsiasi video incorporato.
Renderlo responsive
Dimensioni fisse in pixel sembrano perfette sullo schermo su cui hai fatto i test e si rompono su qualsiasi altro schermo. Un embed responsive invece racchiude l’iframe in un contenitore che mantiene il rapporto d’aspetto corretto a qualsiasi larghezza:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>La cifra 56,25% è semplicemente il rapporto altezza/larghezza di un video 16:9 espresso in percentuale (9 ÷ 16 = 0,5625). Per un video verticale in stile Shorts con rapporto 9:16, la cifra equivalente è 177,78% (16 ÷ 9). Questo “trucco del padding-bottom” funziona in modo affidabile su tutti i browser da oltre un decennio, motivo per cui resta l’approccio più diffuso, anche se la proprietà CSS moderna aspect-ratio è un’alternativa valida e più semplice sui browser che la supportano.
Privacy: youtube.com contro youtube-nocookie.com
YouTube offre due domini per incorporare i video. Il dominio standard youtube.com si comporta come il resto di YouTube e può impostare cookie di tracciamento non appena la pagina si carica. Il dominio youtube-nocookie.com è funzionalmente identico ma evita di impostare quei cookie finché il visitatore non interagisce effettivamente con il player, motivo per cui è l’opzione consigliata di default per i siti attenti al GDPR. Passare da uno all’altro è semplice come cambiare il dominio nell’URL dell’embed; tutto il resto rimane invariato.
Controllare la riproduzione
L’URL dell’embed accetta una serie di parametri nella query string che modificano il comportamento del player:
- start e end (in secondi) limitano la riproduzione a un intervallo specifico.
- autoplay=1 avvia il video immediatamente, anche se i browser in genere richiedono anche mute=1, altrimenti l’autoplay viene bloccato.
- loop=1, combinato con un parametro playlist impostato sullo stesso ID video, fa ripartire il video in continuazione.
- controls=0 nasconde la barra dei controlli del player, utile per video usati come sfondo.
- rel=0 limita i video correlati mostrati a fine riproduzione a quelli dello stesso canale.
Per l’elenco completo con esempi, consulta la nostra guida di riferimento ai parametri dell’iframe.
Prestazioni: non lasciare che gli embed rallentino la pagina
Un iframe di YouTube è un elemento relativamente pesante da caricare: recupera gli script del player e una miniatura di anteprima ancora prima che qualcuno prema play. In una pagina con più embed, caricarli tutti immediatamente può rallentare visibilmente il caricamento iniziale della pagina. Due soluzioni funzionano bene. Primo, aggiungere l’attributo nativo loading="lazy" all’iframe, così i browser rimandano il caricamento finché non si avvicina alla parte visibile dello schermo. Secondo, per pagine con molti video, considera uno schema “click-to-load”: mostra prima un’immagine miniatura leggera e inserisci l’iframe vero e proprio solo quando un visitatore ci clicca sopra.
Formati speciali: Shorts e playlist
Gli Shorts si incorporano esattamente come i video normali dal punto di vista tecnico, ma richiedono un contenitore responsive 9:16 anziché 16:9 per evitare bande nere attorno al fotogramma verticale. Le playlist usano invece un percorso di embed completamente diverso, /embed/videoseries, combinato con un parametro list impostato sull’ID della playlist, e mostrano controlli avanti/indietro per scorrere ogni video della playlist.
Dove inserire effettivamente il codice
Una volta ottenuto il codice embed, va inserito in un punto dell’HTML del sito direttamente modificabile: un blocco HTML personalizzato nell’editor a blocchi di WordPress, una sezione di testo avanzato o liquid personalizzata su Shopify, un widget di embed su Wix, oppure direttamente nel markup di un sito realizzato a mano. Trovi i passaggi esatti per le piattaforme più comuni nelle guide dedicate a WordPress, Shopify e Wix.
Crearlo senza scrivere codice
Tutto quanto sopra (contenitore responsive, dominio rispettoso della privacy, orari di inizio e fine, autoplay, loop, controlli nascosti, dimensionamento per gli Shorts e modalità playlist) è gestito automaticamente dal nostro generatore gratuito di codice embed. Incolla un link, attiva le opzioni che ti servono e copia il codice finito. Funziona interamente nel browser, quindi nulla riguardo al video che stai incorporando viene inviato o memorizzato sui nostri server.
Errori comuni da evitare
- Incollare l’URL di visualizzazione (youtube.com/watch?v=…) direttamente nel src di un iframe invece di convertirlo prima nel formato /embed/.
- Impostare autoplay=1 senza mute=1, cosa che la maggior parte dei browser ignorerà semplicemente.
- Dimenticare un attributo title descrittivo, il che danneggia l’accessibilità.
- Usare width e height fissi su una pagina che deve funzionare bene anche su mobile.
- Caricare molti embed contemporaneamente su una sola pagina senza lazy loading, rallentando la velocità della pagina.
Con queste basi coperte, hai tutto il necessario per incorporare i video YouTube correttamente: veloce, responsive, accessibile e attento alla privacy, sia che tu costruisca il codice a mano sia che lo generi in pochi clic.