Interaktion mit YouTube Player iFrame per JavaScript

Wenn ein Youtube-Youtube per iFrame in die Webseite eingebunden wird, muss der Benutzer normalerweise erst auf das Video klicken um dieses zu starten, oder das Video startet direkt mit dem Aufruf der Website (Autoplay). In vielen Fällen reichen diese Möglichkeiten aus, aber eben nicht in allen. Es ist aber per JavaScript und Events möglich, die Verhalten des Videoplayer bzw. die Wiedergabe von außen zu steuern.
Wie das genau geht, möchte ich in diesem Beitrag zeigen.

Unser Szenario ist dabei relativ simpel. Wir wollen das Youtube-Video in einer Lightbox (oder auch Modalbox genannt) einbinden. So lange das Modal geschlossen ist, soll das Video nicht abgespielt werden. Sobald jedoch das Modal ausgelöst wird, soll auch das Video starten. Natürlich soll die Ausgabe auch wieder automatisch beendet werden (das Video wird pausiert), wenn der Benutzer das Overlay vorab schließen sollte.

Voraussetzungen

Damit der Player über JavaScript gesteuert werden kann, müssen zwei Voraussetzungen erfüllt sein:

  1. Das Video muss mittels ?enablejsapi=1 eingebunden sein,
  2. zudem muss "autoplay" erlaubt sein, damit ein Video via Javascript Event gestartet werden kann.

Der Code

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/[VIDEO ID]?enablejsapi=1"
  class="youtube-player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen
></iframe>

Das Javascript ist relativ simpel:

const player = document.querySelector('iframe.youtube-player');

// Auf das Event reagieren, wenn das Modal geöffnet wird
// (in diesem Beispiel ist es das Bootstrap 5 Modal Event).
document.addEventListener('shown.bs.modal', function() {
  callPlayer(player, 'playVideo');
});

// Das gleiche für das Event wenn das Modal geschlossen wird.
document.addEventListener('hide.bs.modal', function() {
  callPlayer(player, 'pauseVideo');
});

// Die eigentliche Funktion für die Steuerung des Youtube-Players.
function callPlayer(iframe, func, args) {
  if ( iframe.src.indexOf('youtube.com/embed') !== -1) {
    iframe.contentWindow.postMessage( JSON.stringify({
      'event': 'command',
      'func': func,
      'args': args || []
      }
    ), '*');
  }
}

Über die callPlayer() Funktion kann das Video über das entsprechende Kommando gesteuert werden. Eine Übersicht der Kommandos und Möglichkeiten gibt es in der offiziellen Dokumentation von Youtube.

Wenn das playVideo Event das Video nicht startet

Damit das playVideo Event funktioniert, muss zwingend "autoplay" aktiviert sein. Selbst dann, wenn man nicht möchte, dass das Video automatisch startet. Ohne diese Aktivierung hat das playVideo Event keine Funktion, solange es keine Interaktion vom Benutzer gab (weil dieser z.B. einen Button gedrückt hat). Wenn also das Video aufgrund einer anderen Interaktion (z.B. durch das Öffnen des Modals) abgespielt werden soll, muss "autoplay" gesetzt sein.

Ich schreibe das hier so explizit, da dies in der YouTube Dokumentation nicht so deutlich erwähnt wird.

Profile picture for user cbeier
Autor

Christian Beier

Hi, ich bin Christian! Ich unterstütze Unternehmen dabei ihre Geschäftsanwendungen und Prozesse zu digitalisieren. Hier blogge ich über Drupal, Webentwicklung, Digitalisierung, Projektmanagement und andere Themen, die mich interessieren. Per RSS abonnieren. Schreibe mir eine Mail an [email protected] oder folge mir auf LinkedIn oder Mastodon.