How To: Videos datenschutzkonform einbetten
Die Wiedergabe und Einbettung von YouTube- und Vimeo-Videos auf Websites ist mittlerweile eine gängige Praxis geworden, die von vielen Unternehmen genutzt wird, um ihren Besuchern ein ansprechendes User-Erlebnis zu bieten. Allerdings sollte sichergestellt sein, dass die User der Website informiert werden, was mit ihren Daten bei der Interaktion eines Videos geschieht. Denn jedes Mal, wenn ein Nutzer eine Seite aufruft, auf der ein Video eingebettet ist, werden dessen Daten an YouTube bzw. Vimeo weitergegeben – nicht gerade optimal im Hinblick auf den Datenschutz.
2-Klick Video-Lösung - Zustimmung des Users einholen
Wir haben dafür eine visuell ansprechende Lösung entwickelt und zeigen in diesem Blogbeitrag am Beispiel unseres Kunden Senec - an Screenshots, Codeschnipseln und Live-Beispiele - wie wir dies umgesetzt haben. Eine solche Lösung wird auch als 2-Klick Video-Lösung bezeichnet.
Unser Kunde Senec agiert in einem wettbewerbsstarken Umfeld und muss schnell auf sich ändernde Anforderungen an die DSGVO reagieren. Zugleich darf das Nutzererlebnis nicht durch Vorschriften beeinträchtigt werden. So bat uns Senec Anfang des Jahres einen zweistufigen Prozess, für die Wiedergabe von YouTube/Vimeo Videos, zu entwickeln.
Umsetzung
Beim Laden einer Seite, die ein Video enthält, wird eine Vorschau des Videos mit einem benutzerdefiniertem Bild und einem Play-Button zum abspielen des Videos angezeigt.
Wenn sich der User nun entscheidet, auf den Play-Button für die Videowiedergabe zu klicken, wird eine Information eingeblendet, wie im Bild unten angezeigt.
Erst nachdem der User auf 'Play video' klickt, wird die Anfrage an YouTube oder Vimeo gestellt und der Inhalt wird abgerufen und wiedergegeben.
Auf diese Weise wird dem User ein ansprechendes visuelles Erlebnis ermöglicht und schützt gleichzeitig seine Privatsphäre, bis er seine Zustimmung ausdrücklich erteilt.
Implementierungsschritte
Was die Implementierung betrifft, so erforderte sie keinen großen Aufwand und wurde mit nur wenigen Zeilen JavaScript, etwas HTML und CSS realisiert. Da die Lösung mit Drupal umgesetzt wurde, werden wir die verwendeten Twig Templates und den Javascript-Code aufzeigen. Der erste Schritt besteht darin, das HTML Informations-Overlay mit dem Video-Wiedergabeelement einzubinden.
<div class="picture--fill">
{{ media_remote_video_image }}
<div class="consent-message">
<p>{{ consent_message }}</p>
{% include '@atoms/_button.twig' with {
button_element: 'a',
button_link: '#',
button_color: 'primary',
button_size: 'lg',
button_text: 'Play video'|t,
button_other_classes: 'play-video',
}%}
</div>
</div>Im Folgenden ist die SCSS-Datei dargestellt aus der das CSS generiert wird. Der CSS Code für die 2-Klick Video-Lösung kann auf der unten verlinkten Webseite kopiert werden.
.media-remote-video__content {
padding-bottom: 52.5%;
padding-top: 1.5rem;
height: 0;
@include media-breakpoint-up(lg) {
padding-bottom: 50%;
}
@include media-breakpoint-up(xl) {
padding-bottom: 52.5%;
}
.consent-message {
display: none;
}
.svg-icon-gradient {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
z-index: 1;
cursor: pointer;
&:hover {
// stylelint-disable max-nesting-depth, selector-max-specificity
// stylelint-disable declaration-no-important
.svg--fill-transparent {
stroke: $color-orange !important;
}
}
}
&.consent {
.field--name-field-video-thumbnail {
display: none;
}
.consent-message {
background-color: $color-blue-cloud;
color: $white;
height: 100%;
padding: 0 15%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@include media-breakpoint-down(sm) {
font-size: $font-size-sm;
padding: 0 4%;
}
.btn {
margin-top: map-get($spacers, 3);
}
}
.svg-icon-gradient {
display: none;
}
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}Dann geht es nur noch darum, die JavaScript-Funktion zu implementieren, die für die Anzeige der Nachricht und das Laden des eigentlichen Videos verantwortlich ist, wenn der Benutzer auf die Schaltfläche 'Play video' klickt.
export function enable($context) {
const $videoThumbnail = $('.media-remote-video__thumbnail', $context);
$videoThumbnail.each(function videoThumbnailFn() {
const $thisThumbnail = $(this);
const $videoThumbnailIcon = $thisThumbnail.find('.svg-icon-gradient');
const $videoPlay = $thisThumbnail.find('.play-video');
$videoThumbnailIcon.click(function showConsent() {
$thisThumbnail.addClass('consent');
});
$videoPlay.click(function showVideo(e) {
e.preventDefault();
const $video = $thisThumbnail.data('video');
$thisThumbnail.html($video);
$thisThumbnail.removeClass('media-remote-video__thumbnail');
});
});
}Fertig ist es!!!
Auf der Senec-Website können Sie die Funktion live erleben.
Die Website von Senec wurde mit Drupal erstellt und gewann die International Splash Awards 2019.