YouTube-Einbettungen
Bette YouTube-Videos und Shorts in deine Dokumentation ein. Lazy-Loading-Player, benutzerdefinierte Startzeiten und vertikale 9:16-Shorts.
Die Komponente <YouTube> bettet Videos mit Lazy Loading, abgerundeten Ecken und ohne störende verwandte Videos ein. Beim Laden der Seite wird eine Vorschau mit Play-Schaltfläche angezeigt. Der vollständige YouTube-Player wird erst beim Klick geladen.
YouTube-Video einbetten
Übergib die Video-ID als id-Prop:
<YouTube id="dQw4w9WgXcQ" />Bis der Betrachter auf Play klickt, wird kein iframe geladen. Die Komponente verwendet lite-youtube-embed: ein Vorschaubild und wenige Kilobyte CSS anstelle des über 800 KB großen iframe-Pakets von YouTube.
Props
| Prop | Typ | Standard | Beschreibung |
|---|---|---|---|
id | string | keiner | Erforderlich. Die YouTube-Video-ID. |
title | string | "Play" / "YouTube Short" | Barrierefreiheits-Label für die Einbettung. Screenreader verwenden diesen Text. |
start | number | 0 | Wiedergabe um so viele Sekunden ins Video verschoben starten. |
short | boolean | false | Als vertikalen 9:16-YouTube-Short statt als 16:9-Video rendern. |
Zu einer bestimmten Zeit starten
Das start-Prop springt beim Beginn der Wiedergabe zu einem Zeitpunkt (in Sekunden):
<YouTube id="dQw4w9WgXcQ" start={60} />Die Wiedergabe beginnt bei der 1-Minuten-Marke. Dezimalwerte werden auf ganze Sekunden abgerundet.
Video-ID finden
Die Video-ID ist die Zeichenfolge nach v= in einer YouTube-URL.
youtube.com/watch?v=dQw4w9WgXcQ→ ID istdQw4w9WgXcQyoutu.be/dQw4w9WgXcQ→ ID istdQw4w9WgXcQ
Kopiere die ID, nicht die vollständige URL.
YouTube Shorts
YouTube Shorts sind vertikale Videos mit einem Seitenverhältnis von 9:16. Bettet man einen Short in einen standardmäßigen 16:9-Player ein, entstehen auf beiden Seiten breite schwarze Balken.
Das short-Prop behebt dies. Es rendert die Einbettung im Format 9:16, zentriert auf der Seite mit 360px Breite und abgerundeten Ecken. Das Ergebnis entspricht der Darstellung von Shorts auf dem Smartphone.
Short einbetten
<YouTube id="_6HzLIJPH2A" short />Short-ID finden
Die Short-ID ist das Pfadsegment nach /shorts/ in der URL:
youtube.com/shorts/_6HzLIJPH2A→ ID ist_6HzLIJPH2A
Diese IDs folgen demselben 11-Zeichen-Format wie reguläre YouTube-Videos. Ohne short rendert die Komponente <YouTube> einen Short im 16:9-Format mit schwarzen Balken.
Rendering-Details
| Detail | So wird es dargestellt |
|---|---|
| Breite | Auf 360px begrenzt und zentriert (entspricht der Breite des mobilen Shorts-Players von YouTube) |
| Seitenverhältnis | 9:16 über CSS aspect-ratio, sodass der Container auf kleineren Bildschirmen sauber skaliert |
| Ecken | Abgerundet mit border-radius, um konsistent zu anderen Jamdesk-Medieneinbettungen zu bleiben |
| Verwandte Videos | Deaktiviert über rel=0, wie bei Standard-Einbettungen |
Leistungsunterschied
Standard-YouTube-Einbettungen verwenden lite-youtube-embed. Dabei wird vorab kein YouTube-JavaScript geladen. Die Seite zeigt ein Vorschaubild. Das vollständige Player-iframe wird erst geladen, wenn ein Betrachter auf Play klickt.
lite-youtube-embed kann keine vertikalen Seitenverhältnisse darstellen. Shorts verwenden stattdessen ein direktes <iframe> mit loading="lazy". Der Browser verschiebt das Laden, bis das iframe nahe an den sichtbaren Bereich scrollt. Der vollständige YouTube-Player (Skripte, Styles und alles Weitere) wird initialisiert, sobald das iframe sichtbar wird.
Ein oder zwei Shorts auf einer Seite machen einen vernachlässigbaren Unterschied. Viele Shorts erhöhen das Gewicht durch die zusätzlichen iframes. Verlinke sie oder platziere sie hinter einem Tab, wenn eine Seite mehr als drei oder vier Shorts enthält. So bleibt das initiale Laden schlank.
iFrames direkt verwenden
Verwende ein rohes iframe für volle Kontrolle über die Einbettungsparameter:
<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
/>Die Komponente <YouTube> ist die bessere Standardwahl. Sie lädt den Player verzögert, blendet verwandte Videos aus und rendert Shorts im Format 9:16. Verwende rohe iframes nur, wenn du Einbettungsparameter benötigst, die die Komponente nicht bereitstellt.