Zum Inhalt springen

YouTube-Video einbetten

YouTube-Video responsiv einbetten, mit schlankem Klick-Player und Datenschutzmodus.

Seitenverhältnis

Lädt zuerst nur ein Vorschaubild und den YouTube-Player erst beim Klick – deutlich schnellere Seiten.

Optionen
px
Code-Stil
Erweitert

Nur für sehr alte Browser oder CMS, die den aspect-ratio-Style entfernen.

Vorschau
YouTube-Link einfügen, um die Vorschau zu sehen

Die Vorschau wird von YouTube geladen. Wenn die Vorschau „Video unavailable“ anzeigt, hat der Inhaber das Einbetten möglicherweise deaktiviert.

Code

    

Läuft im Browser – Ihre Daten werden nicht hochgeladen.

So funktioniert’s

  1. Fügen Sie einen YouTube-Link oder eine Video-ID ins Eingabefeld ein.
  2. Wählen Sie unter „Seitenverhältnis“ das passende Format.
  3. Tragen Sie bei Bedarf unter „Maximale Breite“ einen Wert zwischen 100 und 4000 Pixeln ein.
  4. Klicken Sie auf „Code kopieren“ und fügen Sie den erstellten Code in Ihre Website ein.

Beispiele

Musikvideo ab Sekunde 42 im Blog

Eingabe
https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=42
Ausgabe
<style>.yt-embed{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;max-width:800px;margin:0 auto}</style>
<iframe class="yt-embed" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=42&amp;rel=0&amp;playsinline=1" srcdoc="&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}img{height:100%;object-fit:cover}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:#fff;text-shadow:0 0 .5em #000}&lt;/style&gt;&lt;a href='https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=42&amp;amp;autoplay=1&amp;amp;rel=0&amp;amp;playsinline=1' aria-label='Play: YouTube video player'&gt;&lt;img src='https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg' alt='YouTube video player' loading='lazy'&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;" title="YouTube video player" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Alten Einbettungscode für ein älteres CMS anpassen

Eingabe
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
Ausgabe
<div style="position:relative;width:100%;padding-bottom:75%;height:0;overflow:hidden;"><iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0&amp;playsinline=1" title="YouTube video player" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe></div>

Playlist auf einer Kursseite in Endlosschleife

Eingabe
https://www.youtube.com/playlist?list=PL8dPuuaLjXtNppY8zhTUKFRrZ7N1fYv4-
Ausgabe
<iframe src="https://www.youtube-nocookie.com/embed/videoseries?list=PL8dPuuaLjXtNppY8zhTUKFRrZ7N1fYv4-&amp;loop=1&amp;rel=0&amp;playsinline=1" title="YouTube video player" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;"></iframe>

Häufige Fragen

Was bewirkt der Datenschutzmodus beim Einbetten?

„Erweiterter Datenschutzmodus (youtube-nocookie.com)“ bindet den Player über die Domain youtube-nocookie.com statt youtube.com ein. Mit „Erst bei Klick laden (leichtgewichtig)“ lädt der Browser Ihrer Besucher beim Seitenaufruf nur das Vorschaubild von i.ytimg.com, den YouTube-Player erst nach einem Klick. Die Code-Erstellung erfolgt im Browser; Ihre Eingabe wird nicht an den Server dieser Website gesendet.

Wie kann ich ein YouTube-Video automatisch abspielen lassen?

Deaktivieren Sie „Erst bei Klick laden (leichtgewichtig)“ und aktivieren Sie „Autoplay beim Laden der Seite“. Das Tool schaltet dabei „Stummschalten“ automatisch ein.

Kann ich ein eingebettetes Video zu einer bestimmten Zeit stoppen?

Tragen Sie im Feld „Endzeit“ eine Zeit in Sekunden oder im Format Minuten:Sekunden ein, etwa 90 oder 1:30. Sie muss nach der „Startzeit“ liegen; andernfalls wird sie nicht in den Code übernommen.