Wie man YouTube-Videos in eine Website einbindet

So machst du deine Webseite interaktiver mit eingebetteten Videos

YouTube-Videos auf der eigenen Website einzubinden, kann den Inhalt aufwerten und die Nutzerbindung erhöhen. In diesem Artikel zeige ich dir verschiedene Ansätze – von der klassischen iFrame-Einbettung über die Nutzung der YouTube IFrame API bis hin zu Lösungen für WordPress und eine datenschutzfreundliche Variante.

1. Die einfache iFrame-Einbettung

Der schnellste Weg, ein YouTube-Video einzubinden, ist die Verwendung eines iFrame-Elements. YouTube stellt dafür einen fertigen Code bereit.

So geht’s:

1. Gehe auf YouTube, wähle dein Video aus und klicke auf „Teilen“ → „Einbetten“.
2. Kopiere den angezeigten HTML-Code und füge ihn in den Quelltext deiner Website ein.

Ein Beispiel-Code sieht folgendermaßen aus:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO-ID" 
  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Ersetze VIDEO-ID mit der individuellen ID deines Videos – und schon ist es eingebunden. Die YouTube-Video-ID ist der Teil nach ?v= in der URL.

2. Mehr Kontrolle mit der YouTube IFrame API

Möchtest du das Video per JavaScript steuern, z. B. für Autoplay, individuelle Buttons oder andere Interaktionen, ist die YouTube IFrame API genau das Richtige.

Schritt 1: Binde das API-Skript ein:

<script src="https://www.youtube.com/iframe_api"></script>

Schritt 2: Erstelle einen Container und ein Steuerungsskript:

<div id="player"></div>

<script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '315',
      width: '560',
      videoId: 'VIDEO-ID',
      playerVars: { 'autoplay': 1, 'controls': 1 },
      events: { 'onReady': onPlayerReady }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }
</script>

Mit diesem Setup hast du die Möglichkeit, das Video individuell per JavaScript zu steuern.

3. YouTube-Videos in WordPress einfügen

Nutzt du WordPress, ist die Einbindung von YouTube-Videos noch einfacher – du musst gar keinen HTML-Code schreiben.

Option 1: Direktlink einfügen

Füge einfach die URL des YouTube-Videos in eine neue Zeile im WordPress-Editor ein:

https://www.youtube.com/watch?v=VIDEO-ID

WordPress erkennt die URL automatisch und wandelt sie in einen eingebetteten Player um.

Option 2: Gutenberg-Block „YouTube“ nutzen

1. Klicke im WordPress-Editor auf das „+“-Symbol, um einen neuen Block hinzuzufügen.
2. Wähle den „YouTube“-Block aus der Liste der verfügbaren Blöcke.
3. Füge die YouTube-URL ein und klicke auf „Einbetten“.

So wird das Video automatisch korrekt auf deiner Seite dargestellt.

4. Datenschutzfreundliche Einbindung

Möchtest du die DSGVO-Anforderungen erfüllen und das Tracking durch YouTube minimieren, kannst du die „nocookie“-Variante nutzen. Dadurch werden weniger Cookies gesetzt und die Privatsphäre der Nutzer besser geschützt.

Verwende dazu folgenden Code:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VIDEO-ID" 
  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

5. Responsives Einbinden des Videos

Damit dein YouTube-Video auf allen Geräten optimal dargestellt wird – egal ob auf dem Desktop oder dem Handy – solltest du es responsiv einbinden. Dafür packst du das Video in einen Container, der das gewünschte Seitenverhältnis (meistens 16:9) beibehält.

So kannst du es umsetzen:

.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Seitenverhältnis */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Anschließend bindest du das Video folgendermaßen ein:

<div class="responsive-video">
  <iframe src="https://www.youtube.com/embed/VIDEO-ID" 
    title="YouTube video player" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</div>

Ersetze VIDEO-ID durch die tatsächliche ID deines Videos. So passt sich das Video immer an die Breite des Bildschirms an und behält das richtige Seitenverhältnis.

Fazit

Es gibt verschiedene Wege, ein YouTube-Video in eine Website einzubinden. Die klassische iFrame-Methode ist schnell und unkompliziert, während die IFrame API dir mehr Interaktionsmöglichkeiten bietet. Für WordPress-Nutzer gibt es sogar Lösungen, die ohne HTML-Kenntnisse auskommen – und mit der „nocookie“-Variante handelst du zudem datenschutzfreundlich. Je nach Einsatzzweck kannst du die für dich passende Methode wählen und deine Webseite um ansprechende Videos erweitern. Viel Spaß beim Ausprobieren!