Jalara Studio

veröffentlicht am

YouTube-Videos datenschutzkonform in WordPress einbinden

# #


WordPress bindet ein Video von YouTube ein, wenn die URL zum Video in den TinyMCE am Anfang einer Zeile ohne Leerraum eingefügt wird.

YouTube speichert mit dieser Einbettungsmetode jedoch Informationen über die Besucher deiner Website, noch bevor sie sich das Video angesehen haben. Daher sollten die Videos von YouTube aus datenschutzrechtlichen Gründen mit dem erweitertem Daten­schutz­modus eingebettet werden.

Erweiterter Datenschutzmodus

Unterhalb des Videos auf YouTube (TeilenEinbettenErweiterten Datenschutzmodus aktivieren) kann der Einbettungs­code für die Text-Ansicht des TinyMCEs generiert werden:

Der generierte Code kann anschließend in die Text-Ansicht im TinyMCE eingefügt werden:

Erweiterten Datenschutzmodus standardmäßig integrieren

Damit die URL des YouTube-Videos weiter in der Ansicht Visuell im TinyMCE zum automatischen Einbetten des Videos eingefügt werden kann, kannst du folgenden Codeschnipsel in die Datei functions.php im Child Theme oder in ein seitenspezifisches Plugin einfügen. Dieser überschreibt die Domain youtube.com mit youtube-nocookie.com in dem vom WordPress generierten oEmbed-Code:

function change_embed_oembed_html_cache( $cache, $url, $attr, $post_ID ) {
    return str_replace( 'www.youtube.com', 'www.youtube-nocookie.com', $cache );
}
add_filter( 'embed_oembed_html', 'change_embed_oembed_html_cache', 10, 4 );

YouTube-Vorschaubild lokal zwischen speichern

Das Vorschaubild im YouTube-Video wird allerdings weiterhin vom YouTube-Server geladen. Um auch dieses zu verhindern, kann das Plugin Video-Privatsphäre1 von Michael Zangl eingesetzt werden.

Hinweis: Mit dem Plugin werden die YouTube-Videos mit der Domain youtube-nocookie.com bzw. dem erweiterten Datenschutzmodus eingebunden.

In den Einstellungen des Plugins (https://WEBSITE.EXAMPLE/wp-admin/options.php?page=video-embed-privacy) lässt sich der Text der Abspielschaltfläche und das HTML unterhalb dieser Schaltfläche der YouTube- und Vimeo-Videos anpassen:

Ansicht des Vorschaubild formatieren

Mit CSS, eingefügt in die Datei style.css im Child Theme oder innerhalb des Panels Zusätzliches CSS im Customizer (DesignCustomizer) kannst du das im Div-Container eingebundene Vorschaubild, den angezeigten Text und das iFrame mit dem YouTube-Video nach deinen Wünschen formatieren.

So lässt sich beispielsweise der Text Video abspielen, unterhalb des Play-Buttons, mit folgendem CSS-Befehl entfernen:

.video-wrapped-play > span {
    display: none;
}

Den Text zur Datenschutzerklärung von YouTube erhält mit folgenden CSS mehr Abstand :

.video-wrapped-play > .small {
    padding: 2em;
}

Sollte dein Theme, das über das Plugin aktivierbare iFrame mit dem YouTube-Video nicht responsive einbinden, könntest du dem Selektor .video-wrapped-clicked iframe die hierfür nötigen CSS-Befehle2 mitgeben:

video-wrapped-clicked iframe {
    max-width: 100%;
}

Links

Anzeige | Affiliate-Link*