Entwickler

YouTube-Video auf der Website einbetten (responsiv)

Bette ein YouTube-Video ein, das auf jeden Bildschirm passt: Teilen-Menü, responsiver Code, Startzeit, erweiterter Datenschutzmodus, WordPress und Tempo-Tipps.

Von Team von Free Thumbnail Downloader 2 Min. Lesezeit
Titelbild des Artikels: YouTube-Video auf der Website einbetten (responsiv)
In diesem Artikel
  1. Der schnelle Weg: YouTubes Teilen-Menü
  2. Der bessere Weg: responsiver Einbettungscode
  3. Nützliche Optionen
  4. Erweiterter Datenschutzmodus
  5. WordPress
  6. Die Seite schnell halten
  7. Die Video-ID finden

Beim Einbetten können Besucher ein YouTube-Video ansehen, ohne deine Seite zu verlassen. Der Code von YouTube funktioniert, hat aber eine feste Größe, die mobile Layouts sprengen kann. So geht es richtig.

Der schnelle Weg: YouTubes Teilen-Menü

  1. Klicke unter dem Video auf Teilen → Einbetten.
  2. Optional Starten bei für eine Startzeit anhaken.
  3. Kopiere den <iframe>-Code und füge ihn ins HTML deiner Seite ein.

Der Standardcode nutzt width="560" height="315" – auf kleinen Bildschirmen kann das überlaufen.

Der bessere Weg: responsiver Einbettungscode

Diese Version füllt immer die Breite ihres Containers und behält 16:9:

<iframe
  style="width:100%;aspect-ratio:16/9;border:0"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="YouTube-Videoplayer"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Unser Einbettungscode-Generator erstellt ihn für jedes Video und ergänzt Optionen per Häkchen.

Nützliche Optionen

ParameterWirkung
start=90Startet bei 1:30
end=150Stoppt bei 2:30
autoplay=1&mute=1Startet automatisch (muss stumm sein)
loop=1&playlist=VIDEO_IDWiederholt das Video
controls=0Blendet die Steuerung aus
cc_load_policy=1Zeigt standardmäßig Untertitel

Hänge sie nach der Video-ID an, beginnend mit ? und getrennt durch &, zum Beispiel .../embed/VIDEO_ID?start=90&mute=1.

Erweiterter Datenschutzmodus

Mit youtube-nocookie.com statt youtube.com speichert YouTube keine Informationen über deine Besucher, bis sie das Video abspielen. Für Blogs und datenschutzbewusste Websites – gerade im EU-Raum – eine sinnvolle Standardwahl.

WordPress

Füge im Block-Editor einen Block Individuelles HTML hinzu und den Code ein. Für ein einfaches Einbetten ohne Optionen genügt auch der Videolink allein in einer eigenen Zeile – WordPress erzeugt den Player automatisch.

Die Seite schnell halten

Jeder eingebettete Player lädt zusätzliche Skripte. Bei mehreren Videos auf einer Seite:

  • Behalte loading="lazy", damit Player erst laden, wenn Besucher in die Nähe scrollen.
  • Zeig statt eines vollständigen Players ein Thumbnail mit Link. Die Thumbnail-URLs erklärt unser Ratgeber zum URL-Format, die Bilder holst du mit dem Thumbnail-Downloader.

Die Video-ID finden

Die ID sind die 11 Zeichen nach v= oder youtu.be/. Bei vielen Links holt das Video-ID-Tool alle auf einmal heraus.

Häufige Fragen

Warum startet mein eingebettetes Video nicht automatisch mit Ton?

Browser blockieren Autoplay mit Ton. Autoplay funktioniert nur stummgeschaltet, also ergänze mute=1 zusammen mit autoplay=1.

Kann ich jedes YouTube-Video einbetten?

Die meisten öffentlichen Videos ja, aber der Uploader kann das Einbetten deaktivieren. Dann zeigt der Player einen Hinweis und einen Link zu YouTube.

Jedes YouTube-Thumbnail in Sekunden

Link einfügen und jede verfügbare Größe herunterladen – bis 1280×720.

Zum Downloader
Team von Free Thumbnail Downloader

Wir entwickeln schnelle, einfache Tools für YouTube-Creator und schreiben Anleitungen auf Basis eigener Tests.

Weiterlesen