Kontaktiere uns jetzt

Youtube Videos DSGVO konform in Wordpress einbinden ohne Plugin

Youtube Videos DSGVO konform in WordPress einbinden ohne Plugin

So kannst du ohne Plugin Youtube Videos DSGVO konform in WordPress einbinden

Dabei kannst du noch den Fokus auf der visuellen Leistung der Website haben. Die Seite wird optisch genau wie mit der klassischen Methode gerändert, aber bis zu 224x schneller.

Wenn Du YouTube-Videos auf deiner Website einbindest, solltest du wissen, dass YouTube Tracking-Cookies setzt, wenn die Seite  aufgerufen wird. Du kannst deine Videos allerdings  so einbetten, dass beim Aufruf der Seite keine Cookies gesetzt werden, sondern erst beim Abspielen des YouTube-Videos.

Somit gibst du dem Benutzer auch die Möglichkeit, bewusst dem Tracking zuzustimmen, oder eben auch nicht. Nach dem EuGH Urteil aus Oktober 2019 reicht ein einfacher Cookie Hinweis nicht mehr aus.

Dazu hast du noch den Vorteil, dass deine Seite um ein Vielfaches schneller gerendert wird, da keine Drittanbieter-Skripte von YouTube geladen werden.

Anleitung

Binde die Dateien lite-yt-embed.css und lite-yt-embed.js vom GitHub Projekt lite-youtube-embed in dein Webprojekt ein.

Das könnte in deinem Projekt so aussehen:

<link rel="stylesheet" href="css/lite-yt-embed.css" />

<script src="js/lite-yt-embed.js"></script>

<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

Ich habe für unser Beispiel noch einen Datenschutz-Hinweis  <span class="ytds">...</span> eingesetzt und das Stylesheet erweitert.

HTML
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');" params="controls=1&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1">
  <button type="button" class="lty-playbtn">
    <span class="ytds">Mit dem Abspielen des Videos akzeptieren sie die Datenschutzbestimmungen von Youtube https://www.google.de/intl/de/policies/privacy/</span>
  </button>
</lite-youtube>

Diesen HTML-Code kannst du dir als Vorlage speichern, wenn du beispielsweise einen Editor wie WPBakery Page Builder benutzt.

Oder du kopierst jedes mal den HTML-Codeblock und änderst meist nur die Video-id videoid="ogfYd705cRs" und die Id des Vorschaubildes url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg') . Hier jeweils immer ogfYd705cRs . Willst du DSGVO sicher gehen, lädst du das Vorschaubild von deinem eigenen Server. Das ist die schnellste Variante.

Über die Parameter kannst du Werte übergeben, wie Startzeit, Endzeit, Kontrollelemente etc.

params="controls=1&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"

Eine ausführliche Beschreibung zu den Parametern findest du hier:
https://developers.google.com/youtube/player_parameters#Parameters

CSS
lite-youtube > .lty-playbtn {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5em;
}

lite-youtube > button > .ytds {
    width: 100%;
    position: absolute;
    transform: translate3d(-50%, 0, 0);
    bottom: 0;
    left: 50%;
    z-index: 1;
    background-color: #00000082;
    border: none;
    display: block;
    color: white;
    padding: 0.3em;
    font-size:small;
}
Ergebnis
Deine Meinung

ist mir wichtig. Hat dir dieser Artikel geholfen? Wie findest du diesen Lösungsansatz? Ich freue mich über deinen Kommentar!

Hinterlasse eine Antwort

Deine Email-Adresse wird nicht veröffentlicht.Erforderliche Felder sind markiert *