Wie Sie in WordPress Youtube Videos einbinden

von

am

|

geschätzte Lesezeit:

6 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

und dabei die Video Privatsphäre Ihrer Nutzer respektieren

Bis vor einem Jahr haben sich die meisten von uns wahrscheinlich kaum Gedanken darüber gemacht, was eigentlich genau beim Einbinden von Youtube Videos in WordPress passiert. Privatsphäre war ein Begriff, der dann doch meist mehr mit Schlafzimmern denn mit dem Anschauen von Videos zu tun hatte. Das galt zumindest bei den meisten Videos… Doch dann kam die DSGVO. Seither gilt: Wenn Sie in WordPress Youtube Videos einbinden wollen, braucht es mehr Sorgfalt. Für das passende Vorgehen gibt es Helferlein in Form von Plugins. Einem solchen Plugin, das es in seiner aktuellen Version nicht im WordPress Plugins Verzeichnis gibt, gilt dieser Beitrag.

WP Embed Video Privacy – oder auch: Video Privatsphäre

Das Plugin WP Embed Video Privacy (Video Privatsphäre) stammt von Michael Zangl und ist seiner aktuellen Version über github zu beziehen. Unter dem Namen Embed videos and respect privacy lässt es sich auch über das WordPress Plugins Verzeichnis installieren. Dann allerdings bringt es keinerlei Einstellungsoption mit. Diese sind zwar in der erweiterten Version nicht nur gut versteckt, sondern vor allem auch sehr überschaubar. Zumindest aber lässt sich hier der Text ändern und festlegen, wie mit dem Vorschaubild zu verfahren ist.

Alles Folgende bezieht sich auf die WP Embed Video Privacy (Video Privatsphäre) Variante.

Das Plugin installieren

Nach dem Download des zip-Archives bei github können Sie WP Embed Video Privacy entweder entpackt via FTP in Ihr Plugins-Verzeichnis hochladen. Oder Sie erledigen diesen Job über die WordPress Funktion Plugins > Installieren (Plugins hinzufügen) > Plugin hochladen. Diese Funktion übernimmt dann auch das Entpacken.

Nach der Installation erscheint das Plugin in der Liste Ihrer installierten Plugins unter dem Namen Video Privatsphäre. Hier weist es auch einen Einstellungen-Link auf.

Was macht das Plugin?

Das Plugin sorgt dafür, dass die für das Abspielen des eingebundenen Videos auf Ihrer Website notwendige Verbindung zu Youtube erst nach dem Klick stattfindet. Ohne das Plugin findet diese Verbindung schon vorher statt, sodass Daten Ihrer Nutzer übertragen werden, ohne dass diese überhaupt ein Video angeschaut haben. Video Privatsphäre bedeutet hier also, dass Datenübertragung erst stattfindet, wenn Ihre Nutzer dies durch Abspielen eines Videos wissentlich auslösen.

Das Ganze hat dann zudem mit dem erweiterten Datenschutzmodus zu tun, den Youtube für das Einbinden anbietet. Nach dem Klick, der die Verbindung zu Youtube überhaupt erst aufbaut, greift das Video Privatsphäre Plugin also auf den Server youtube-nocookie.com zu – und nicht auf youtube.com.

WordPress Youtube Videos einbinden

Es gibt zwei Möglichkeiten, wie Sie in WordPress Youtube Video einbinden können. Der eine Weg führt über den Quellcode, den Youtube zur Verfügung stellt. Sie finden ihn, wenn Sie unterhalb eines Videos auf Teilen und dann auf den Button mit den spitzen Klammern (Einbinden) klicken.

Diesen Code können Sie dann in einen Gutenberg HTML-Block kopieren. Oder Sie kopieren ihn in die Text Ansicht des Classic Editors, wenn Sie (noch) nicht mit Gutenberg arbeiten. Dieser Code jedenfalls öffnet mittels iframe-tag ein Fenster für das Video, das von den Youtube Servern kommt.

Mittels WordPress embed-Funktion

Die alternative Variante ist noch viel einfacher. WordPress hat nämlich selbst eine embed-Funktion und erkennt Youtube Videos an ihrem Teilen-Link. Diesen finden Sie, wenn Sie unterhalb eines Youtube Videos auf Teilen klicken.

Diesen Link müssen Sie in Gutenberg noch nicht einmal in einen Youtube-Block einfügen. Es reicht, ihn in einen neuen Block zu kopieren, schon entsteht der Youtube-Block von selbst. Im klassischen Editor funktioniert es über den Button Dateien hinzufügen und dort von URL einfügen. Hier fügen Sie den Teilen-Link des Videos ein und bestätigen, schon ist das Video da.

Allerdings fehlt diesem Vorgehen die Möglichkeit, die Größe des Videos selbst zu bestimmen. Zum Bestimmen der Ausgabegröße des Videos braucht es einen Shortcode. Dazu gibt es bei Gutenberg den Shortcode-Block. In diesem Block umfasst nun der Shortcode den Teilen-Link des Videos.

Beispiel:

[embed width="1024px" height="576px"] https://youtu.be/123456789 [/embed]

Beim Classic Editor schalten Sie hierfür wieder um auf den Textmodus und können so den bereits vorhandenen embed-tag entsprechend bearbeiten.

Wann greift WP Video Embed Privacy?

Das Plugin funktioniert eigentlich immer – es sei denn, Sie nutzen den Quellcode von Youtube. Das gilt übrigens auch für bereits eingebundene Videos: Haben Sie Ihre Videos als iframe, also mit dem Youtube-Quellcode eingebunden, greift die Video Privatsphäre leider nicht. In diesem Fall bleibt Ihnen nichts anderes übrig, als jedes bereits vorhandene Video neu einzubinden. Diesmal mit dem Teilen-Link.

Dabei spielt es keine Rolle, ob Sie Ihre Videos nun in Gutenberg einfach per Einfügen des Teilen-Links oder im Classic Editor per Dateien einfügen > von URL einfügen einbinden. Das Wesentliche ist dabei der embed-tag, den WordPress für Sie produziert. Ob Sie den noch mit weiteren Attributen wie Angabe von Breite und Höhe bestücken oder nicht, ist dem Plugin egal.

Das Vorschaubild

Youtube liefert für jedes Video ein Vorschaubild aus. Irgendwas muss ja zu sehen sein, bevor Nutzer das Video abspielen. Das Plugin bietet zwei Optionen, wie mit diesem Vorschaubild zu verfahren ist: Mit Speicherung auf dem eigenen Server oder ohne. Die Voreinstellung des Plugins ist jedenfalls ohne Speicherung. Und das hat auch einen guten Grund: Schließlich könnte das urheberrechtliche Probleme mit sich bringen. Immerhin haben Sie nicht das Nutzungsrecht an diesem Bild.

Aber auch ohne Speicherung auf dem eigenen Server wird das Bild über Ihren Server ausgeliefert. Wie genau das funktioniert? Nun ja, Michael Zangl sagt dazu auf seiner Wiki-Seite Folgendes:

»Das Vorschaubild wird von deinem Server ausgeliefert (er fordert das von Youtube an und leitet es an deine Nutzer weiter). Eine spezielle Hash-Technik verhindert es, dass diese Möglichkeit missbraucht wird um fremde Vorschaubilder zu laden – der Server macht das nur für Videos die du eingebunden hast.«

(abgerufen am 03.04.2019)

Der Hinweis auf den Datenschutz

Auf der Einstellungsseite des Plugins haben Sie ferner die Möglichkeit, den Text zu ändern, den das Plugin über jedes eingebundene Video legt. Voreingestellt lautet dieser:

Video abspielen
Das Video wird von Youtube eingebettet. Es gelten die Datenschutzerklärungen von Google.

Der Text erscheint unter einem Playbutton-Bild. Zudem ist die Datenschutzerklärung von Google verlinkt.

Das Vertrackte an diesem Text nun ist nicht der Wortlaut. Es ist die Ausgabe. Die ist nämlich dergestalt, dass sie – je nach Vorschaubild des Videos – kaum leserlich ist. Noch nicht einmal für Menschen, die wie ich nur durchschnittlich sehgestört sind. Mein sehbehinderter Kunde, dem ich das Plugin für sein Projekt empfohlen hatte, konnte jedenfalls gar keinen Text erkennen.

Deshalb hier nun ein wenig CSS, das dafür sorgt, dass wirklich jeder den Hinweis lesen können sollte:

/* Anpassung Video Privacy */ 
/* Anpassung der Größe */
.video-wrapped.video-wrapped-video.video-wrapped-yt {width: 100% !important; min-height: 400px !important; height: auto; }

/* Anpassung Hintergrundfarbe und Innenabstand des Textes */
.video-wrapped .video-wrapped-play span {background-color: #000; padding: 7px; }

/* Anpassung Hintergrundfarbe des Playbuttons */
.format-link .entry-content a:before {color:#b90000;}

/* Anpassung Textgröße und -farbe des Links, incl. Unterstrich */
.video-wrapped .video-wrapped-play .small span a {font-size: 150%; color: #fff; text-decoration: underline; }

/* Anpassung für Mobilgeräte */
@media (max-width:768px) {
/* Anpassung der Größe */
.video-wrapped.video-wrapped-video.video-wrapped-yt {min-height: 300px !important; }
}

Hinzu kommt in der aktuellen WordPress Version, dass der Youtube-Block zurzeit einen gigantischen Vorabstand hat. Das lässt sich aber auch mit etwas CSS lösen:

/* Anpassung des Bugs in Gutenberg, der für viel zu viel padding-top sorgt */ 
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before
{padding-top: 5%;}

Das Ganze sieht nun wie folgt aus:

WordPress Youtube Videos einbinden mit Video Privatsphäre
Dieser Screenshot dient nur der Illustration der CSS-Anpassung – und ist kein eingebundenes Video!

Fazit

Mit dem Plugin WP Embed Video Privacy können Sie viel für die Privatsphäre Ihrer Nutzer tun, wenn Sie in WordPress Youtube Videos einbinden. Inwieweit das Ganze den Ansprüchen von Datenschutz und Urheberrechten vollends entspricht, kann ich nicht abschließend beurteilen. Mich überzeugt das Vorgehen aber immerhin so sehr, dass ich das Plugin selbst nutze, sofern ich denn auch mal Videos auf einer meiner WordPress Websites einbinde.


Beitragsbild: Britta Kretschmer

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert