YouTube Player API Reference for iframe Embeds

Mit der Iframe-Player-API kannst du auf deiner Website einen YouTube-Videoplayer einbetten und den Player mit JavaScript steuern.

Mit den JavaScript-Funktionen der API kannst du Videos zu Wiedergabelisten hinzufügen und diese Videos wiedergeben, pausieren oder anhalten, die Lautstärke des Players einstellen oder Informationen zum wiedergegebenen Video abrufen. Du kannst auch Ereignis-Listener hinzufügen, die als Reaktion auf bestimmte Player-Ereignisse ausgeführt werden, z. B. eine Änderung des Player-Status.

In diesem Leitfaden wird erläutert, wie du die IFrame API verwendest. Dort werden die verschiedenen Ereignistypen aufgeführt, die die API senden kann, und es wird erklärt, wie Sie Ereignis-Listener schreiben, um auf diese Ereignisse zu reagieren. Zudem werden sowohl die verschiedenen JavaScript-Funktionen vorgestellt, die du aufrufen kannst, um den Videoplayer zu steuern, als auch die Player-Parameter, mit denen du den Player noch individueller gestalten kannst.

Voraussetzungen

Der Browser des Nutzers muss die HTML5-Funktion postMessage unterstützen. postMessage wird von den meisten modernen Browsern unterstützt.

Eingebettete Player müssen einen Darstellungsbereich mit mindestens 200 x 200 Pixel haben. Wenn die Steuerung angezeigt wird, muss der Player groß genug sein, um die Steuerelemente vollständig anzuzeigen, ohne dass der Darstellungsbereich dabei die genannte Mindestgröße unterschreitet. Für 16:9-Player empfehlen wir eine Breite von mindestens 480 Pixel und eine Höhe von mindestens 270 Pixel.

Webseiten, die die IFrame API verwenden, müssen auch die folgende JavaScript-Funktion implementieren:

  • onYouTubeIframeAPIReady: Die API ruft diese Funktion auf, wenn das JavaScript für die Player API vollständig heruntergeladen wurde. Anschließend kannst du die API auf deiner Seite verwenden. Diese Funktion kann die Player-Objekte erstellen, die beim Laden der Seite angezeigt werden sollen.

Erste Schritte

Die folgende HTML-Beispielseite erstellt einen eingebetteten Player, der ein Video lädt, dieses sechs Sekunden lang wiedergibt und anschließend die Wiedergabe stoppt. Die nummerierten Kommentare im HTML-Code werden in der Liste unter dem Beispiel erklärt.

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            'playsinline': 1