Video YouTube in HTML
Come incorporare video YouTube con l'elemento <iframe>: URL embed, dimensioni responsive, attributo allow, autoplay, loop e modalità privacy.
Ospitare e distribuire video in proprio è complicato: bisogna codificare più formati affinché ogni browser possa riprodurli, archiviare file di grandi dimensioni e pagare la larghezza di banda. L'approccio più semplice è lasciare che YouTube faccia tutto questo e incorporare il suo player nella pagina con un elemento <iframe>. Il browser carica il player di YouTube all'interno del frame, quindi con poche righe di HTML si ottengono streaming adattivo, sottotitoli e schermo intero gratuitamente.
Questa pagina spiega come costruire l'URL di incorporamento, rendere il player responsive, configurare i permessi con l'attributo allow e passare parametri di riproduzione come autoplay, loop e controlli.
Trovare l'ID del video e l'URL di incorporamento
L'errore più comune è inserire l'URL di visualizzazione nel src. L'indirizzo che si vede nel browser quando si guarda un video su YouTube è un URL di visualizzazione e non può essere incorporato direttamente:
https://www.youtube.com/watch?v=i8n1gSw_o_8La parte dopo v= è il video ID (i8n1gSw_o_8 nell'esempio). Per l'incorporamento occorre l'URL di embed, che usa il percorso /embed/ seguito da quell'ID:
https://www.youtube.com/embed/i8n1gSw_o_8Per trovare l'ID: apri il video su YouTube, copia il valore del parametro di query v dalla barra degli indirizzi (oppure usa l'opzione Condividi → Incorpora, che fornisce l'URL completo /embed/ e il markup <iframe>). Anche i link abbreviati come https://youtu.be/i8n1gSw_o_8 espongono l'ID come ultimo segmento del percorso.
Riprodurre un video YouTube in HTML
Per incorporare un video, punta il src dell'iframe sull'URL di embed e imposta le dimensioni:
- Prendi nota del video ID (vedi sopra).
- Aggiungi un elemento
<iframe>alla tua pagina. - Imposta l'attributo
srcsull'URL di embed:https://www.youtube.com/embed/VIDEO_ID. - Imposta
widtheheight(o dimensionalo con CSS — vedi Embed Responsive). - Aggiungi un attributo
titleche descriva il video per l'accessibilità. - Aggiungi parametri URL per personalizzare la riproduzione (es.
?rel=0per limitare i video consigliati dopo la riproduzione allo stesso canale).
Esempio di riproduzione di un video YouTube in HTML con l'elemento <iframe>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>Modalità privacy avanzata (youtube-nocookie.com)
Un embed YouTube standard può impostare cookie di tracciamento non appena la pagina si carica, prima ancora che il visitatore prema play. Ai sensi del GDPR e normative analoghe ciò può richiedere un consenso esplicito. YouTube offre una modalità privacy avanzata che ritarda l'archiviazione di cookie con dati personali finché il visitatore non inizia effettivamente a guardare. Per utilizzarla, sostituisci l'host con youtube-nocookie.com:
<iframe width="560" height="315" title="YouTube video player"
src="https://www.youtube-nocookie.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>Tutto il resto — il percorso /embed/, il video ID e tutti i parametri URL — funziona esattamente allo stesso modo. Tieni presente che questo riduce, ma non elimina completamente, i dati che il player può inviare, quindi esamina la tua politica sul consenso se hai requisiti stringenti.
L'attributo allow
I browser limitano le funzionalità avanzate tramite la Permissions Policy. Affinché un iframe YouTube possa usare autoplay, schermo intero e altre capacità, la pagina padre deve concederle tramite l'attributo allow dell'iframe. L'attributo accetta un elenco di token di permesso separati da punto e virgola. Il set generato dal dialogo Condividi → Incorpora di YouTube è:
<iframe width="560" height="315" title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>Token comuni e le funzionalità che abilitano:
| Token | Scopo |
|---|---|
accelerometer | Consente al player di leggere il movimento del dispositivo (usato da alcuni video 360°/VR). |
autoplay | Permette al video di avviarsi senza un gesto dell'utente. |
clipboard-write | Consente al player di copiare testo (es. link di condivisione) negli appunti. |
encrypted-media | Abilita la riproduzione protetta da DRM tramite Encrypted Media Extensions. |
gyroscope | Consente al player di leggere l'orientamento del dispositivo (video 360°/VR). |
picture-in-picture | Permette al video di aprirsi in una finestra mobile. |
web-share | Consente al player di aprire la finestra di condivisione nativa. |
L'attributo separato allowfullscreen permette il pulsante schermo intero. Puoi omettere i token di cui non hai bisogno; omettere autoplay, ad esempio, significa semplicemente che l'autoplay verrà bloccato.
Embed YouTube Responsive
Un iframe con width/height fissi non si adatterà agli schermi piccoli e potrebbe uscire dal suo contenitore. Due tecniche affidabili fanno scalare il player al proprio elemento padre mantenendo le proporzioni video 16:9.
Con la proprietà CSS aspect-ratio (browser moderni)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.video {
width: 100%;
max-width: 720px;
}
.video iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
</style>
</head>
<body>
<div class="video">
<iframe title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>
</div>
</body>
</html>Con il trucco del padding-bottom (ampio supporto)
Per i browser più vecchi che non supportano aspect-ratio, avvolgi l'iframe in un contenitore la cui altezza è creata da padding-bottom: 56.25% (ovvero 9 ÷ 16, il rapporto 16:9), poi estendi l'iframe a riempirlo in modo assoluto:
<style>
.video-wrap {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="video-wrap">
<iframe title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>
</div>Personalizzare la riproduzione con i parametri URL
Il player si configura aggiungendo parametri di query all'URL di embed. Il primo parametro è introdotto con ? e ciascun parametro aggiuntivo è collegato con &:
https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0La maggior parte dei parametri accetta un valore di 0 (disattivato) o 1 (attivato). Le sezioni seguenti trattano quelli che si usano più spesso.
Autoplay di YouTube
Per avviare il video automaticamente al caricamento del player, aggiungi autoplay=1 (il valore predefinito, autoplay=0, attende che l'utente prema play).
Importante: i browser bloccano l'autoplay con audio. Un video in autoplay deve anche essere mutato, quindi abbina autoplay=1 a mute=1 — altrimenti il video non si avvierà. All'iframe deve essere concesso anche il permesso autoplay nel suo attributo allow.
Esempio di autoplay YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1&mute=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Controlli di YouTube
Il parametro controls attiva o disattiva la barra dei controlli del player (play/pausa, volume, schermo intero e così via). Usa controls=0 per nasconderla e controls=1 (il valore predefinito) per mostrarla.
Esempio di controlli YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>Loop di YouTube
Usa loop=1 per far ripetere il video all'infinito (il valore predefinito, loop=0, lo riproduce una sola volta). C'è un'eccezione: per un singolo video, il loop funziona solo se si passa anche playlist con lo stesso video ID. YouTube tratta il loop come "torna all'inizio della playlist", quindi senza quella voce nella playlist il video si ferma dopo una riproduzione. L'esempio seguente imposta entrambi:
Esempio di loop YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Legacy: i tag <embed> e <object>
Potresti ancora trovare tutorial più vecchi che incorporano YouTube con gli elementi <embed> o <object>. Non usarli per YouTube — il metodo moderno e supportato è l'<iframe> mostrato sopra. Gli esempi seguenti sono mantenuti solo per riconoscere il pattern legacy:
<!-- Legacy / not recommended -->
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>Argomenti correlati
- Tag HTML
<iframe>— l'elemento usato per ogni embed YouTube. - Tag HTML
<video>— per distribuire i propri file video invece di incorporare YouTube. - Audio e video in HTML5 — il quadro generale dei media nativi in HTML.