YouTube Video Responsive ohne Plugin einbinden

Leider ist es nicht so leicht YouTube Videos responsive auf einer Webseite einzubinden. Mit dem Code, der von YouTube zum Einbetten eines Videos bereitgestellt wird, kann ein Video allerdings nicht responsive eingebunden werden.

Inhaltsverzeichnis

• Vorbereitung: TinyMCE-Editor erlauben, dass iFrames verwendet werden dürfen
• Vorbereitung: Template-CSS erweitern
• Einbettungscode für YouTube-Video generieren
• iFrame Code-Snippet anpssen und in Beitrag einfügen
• Das Endergebnis

Vorbereitung: TinyMCE-Editor erlauben, dass iFrames verwendet werden dürfen

Damit Sie in weiterer Folge einen <iframe> in Ihren Beitrag einfügen können, müssen zuerst im Editor-PLugin (Standard-Editor = TinyMCE) das Element "iFrame" von der Liste der verbotenen Elemente entfernen.

Das können Sie tun, indem Sie "Erweiterungen / Plugins" aufrufen und anschließend in das Suchfeld "TinyMCE" eingeben und auf den Suchbutton klicken. Das filtert die Plugins nach dem benötigten Editor "Editor - TinyMCE". Mit eine Klick auf den Titel des Plugins werden die Einstellungen dafür geöffnet.

Ist das Editor Plugin geöffnet, sieht man, dass in der Standardkonfiguration 3 Editor-Profile angelegt sind: "Voreinstellung 0", "Voreinstellung 1" & "Voreinstellung 2". Jede dieser Voreinstellungen ist einer oder mehrerer Benutzergruppen zugewiesen.

Damit Sie ein Video in einen Beitrag einfügen können, müssen Sie für jedes Profil, mit denen Benutzer Beiträge bearbeiten können, folgende Anpassungen machen:

Relativ weit unten in den Profil-Einstellungen findet sich eine Zeile mit dem Titel "Verbotene Elemente: script,applet,iframe". Löschen Sie hier ",iframe" von aus dem Eingabefeld. Das Eingabefeld soll also nur die Elemente "script,applet" beinhalten.

Vorbereitung: Template-CSS erweitern

Damit Ihr YouTube Video responsive dargestellt werden kann, muss folgendes kleines CSS-Codeschnipsel in das verwendete Template eingefügt werden. Die meisten Templates bieten hierfür in den Template-Einstellungen eine Funktion für "Custom-CSS" an. In diesen Bereich fügen Sie das folgende kleine CSS-Snippet ein:

.video-container {
    position: relative;
    padding-bottom: 56.25%; padding-top: 30px;
    height: 0;
    overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%; }

Dieser Code ermöglicht eine responsive Darstellung Ihres Videos mit 100% Breite und automatisch angepasster Höhe. Der Wert "padding-bottom: 56.25%;" steht für ein Seitenverhältnis con 16:9 (9/16*100 =56,25%).

Einbettungscode für YouTube-Video generieren

• Öffnen Sie das Video auf YouTube, das Sie einbetten möchten. In unserem Beispiel das Video https://www.youtube.com/watch?v=pAL6sGxOWEs.
• Unter dem Video finden Sie rechts einen "Teilen"-Button. Nach einem Klick auf diesen Button öffnet sich ein "Teilen"-Fenster (siehe Screenshot links).
• Mit einem Klick auf den runden Button "Einbetten" ganz links öffnet sich der Einbettungscode für dieses YouTube Video (siehe Screenshot rechts).
  Achten Sie darauf, das Häkchen bei "Erweiterten Datenschutzmodus aktivieren", damit Ihr eingebettetes Video nicht automatisch Daten an beim Seitenaufruf an Google sendet.
• Anschließend kann man diesen generierten Code in die Zwischenablage kopieren.

iFrame Code-Snippet anpssen und in Beitrag einfügen

Der kopierte Code sieht unbearbeitete folgendermaßen aus:

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

Damit sich das Video responsive anpasst, müssen aus diesem Code die fixen Weiten- & Höhenangaben entfernt werden. Löschen Sie in diesem Fall also einfach "width="560" height="315"" aus dem Code. 

Vor den iFrame Code muss nun folgender Code eingefügt werden: "<div class="video-container">". Nach dem iFrame Code muss folgender Code eingefügt werden: "</div>".

Der fertige Code lautet nun:

<div class="video-container"><iframe src="https://www.youtube-nocookie.com/embed/pAL6sGxOWEs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>

Nun schalten Sie bitte den Editor über das Feld "Editor an/aus" und fügen diesen Code ein. Nach dem Speichern wird das Youtube-Video korrekt im Beitrag angezeigt.

Das Endergebnis