Incorporamento di YouTube
Incorpora video e Shorts di YouTube nella documentazione. Player a caricamento differito, orari di inizio personalizzati e Shorts verticali 9:16.
Il componente <YouTube> incorpora video con caricamento differito, angoli arrotondati e senza video correlati invadenti. Al caricamento della pagina mostra una miniatura e un pulsante di riproduzione. Il player completo di YouTube viene caricato al clic.
Incorporare un video YouTube
Passa l'ID del video come prop id:
<YouTube id="dQw4w9WgXcQ" />Nessun iframe viene caricato finché il visitatore non clicca su play. Il componente utilizza lite-youtube-embed: un'immagine in miniatura e alcuni kilobyte di CSS invece del bundle iframe di YouTube da oltre 800KB.
Props
| Prop | Tipo | Predefinito | Descrizione |
|---|---|---|---|
id | string | nessuno | Obbligatorio. L'ID del video di YouTube. |
title | string | "Play" / "YouTube Short" | Etichetta di accessibilità per l'incorporamento. Gli screen reader usano questo testo. |
start | number | 0 | Avvia la riproduzione dopo questo numero di secondi dall'inizio del video. |
short | boolean | false | Visualizza come YouTube Short verticale 9:16 invece di un video 16:9. |
Iniziare da un momento specifico
La prop start salta a un timestamp (in secondi) all'avvio della riproduzione:
<YouTube id="dQw4w9WgXcQ" start={60} />La riproduzione inizia al minuto 1. I valori decimali vengono arrotondati per difetto ai secondi interi.
Trovare l'ID del video
L'ID del video è la stringa che segue v= in un URL di YouTube.
youtube.com/watch?v=dQw4w9WgXcQ→ l'ID èdQw4w9WgXcQyoutu.be/dQw4w9WgXcQ→ l'ID èdQw4w9WgXcQ
Copia l'ID, non l'URL completo.
YouTube Shorts
Gli YouTube Shorts sono video verticali con rapporto d'aspetto 9:16. Incorporare uno Short in un player standard 16:9 aggiunge bande nere spesse su entrambi i lati.
La prop short risolve il problema. Visualizza l'incorporamento a 9:16, centrato nella pagina con una larghezza di 360px e angoli arrotondati. Il risultato corrisponde all'aspetto degli Shorts su mobile.
Come incorporare uno Short
<YouTube id="_6HzLIJPH2A" short />Trovare l'ID dello Short
L'ID dello Short è il segmento di percorso che segue /shorts/ nell'URL:
youtube.com/shorts/_6HzLIJPH2A→ l'ID è_6HzLIJPH2A
Questi ID seguono lo stesso formato di 11 caratteri dei video YouTube standard. Senza short, il componente <YouTube> visualizza uno Short in 16:9 con bande nere.
Dettagli del rendering
| Dettaglio | Come viene visualizzato |
|---|---|
| Larghezza | Limitata a 360px e centrata (corrisponde alla larghezza del player mobile di YouTube per gli Shorts) |
| Rapporto d'aspetto | 9:16 tramite CSS aspect-ratio, quindi il contenitore si adatta correttamente agli schermi più piccoli |
| Angoli | Arrotondati con border-radius per restare coerenti con gli altri incorporamenti multimediali di Jamdesk |
| Video correlati | Disattivati tramite rel=0, come negli incorporamenti standard |
Differenze di prestazioni
Gli incorporamenti standard di YouTube usano lite-youtube-embed. Non caricano JavaScript di YouTube in anticipo. La pagina mostra un'immagine in miniatura. L'iframe del player completo viene caricato solo quando il visitatore clicca su play.
lite-youtube-embed non può visualizzare rapporti d'aspetto verticali. Gli Shorts usano invece un <iframe> diretto con loading="lazy". Il browser rinvia il caricamento finché l'iframe non si avvicina alla parte visibile dello schermo. Il player completo di YouTube (script, stili e tutto il resto) si inizializza quando l'iframe diventa visibile.
Uno o due Shorts in una pagina fanno una differenza trascurabile. Molti Shorts aumentano il peso per via degli iframe aggiuntivi. Collegali o inseriscili in una scheda quando una pagina ne contiene più di tre o quattro. In questo modo il caricamento iniziale resta leggero.
Utilizzare direttamente gli iFrame
Usa un iframe grezzo per il controllo completo dei parametri di incorporamento:
<iframe
className="w-full aspect-video rounded-xl"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>Il componente <YouTube> è l'impostazione predefinita migliore. Carica il player in modo differito, elimina i video correlati e visualizza gli Shorts a 9:16. Usa gli iframe grezzi solo quando ti servono parametri di incorporamento che il componente non espone.