search

friends-of-contao / contao-privacy

This extension provides some privacy features to Contao 3.5.x and 4.4.x (4.5.x). If you have some ideas which we should add or change in the mentioned Contao versions, feel free to create an issue.
22 stars 5 forks source link

Zwei-Klick-Lösung zur DSGVO-konformen Einbettung von YouTube- und Vimeo-Videos. #28

Closed Sascha07 closed 6 years ago

Sascha07 commented 6 years ago

Einfache Zwei-Klick-Lösung zur DSGVO-konformen Einbettung von YouTube- und Vimeo-Videos.

Dieses Skript ersetzt alle eingebetteten Videos von YouTube und Vimeo durch den Hinweis, dass es sich um eingebettete Videos handelt, welche beim Abspielen Daten an den Video-Betreiber senden. Es wird ein externer Link zum Video auf der Betreiberseite angezeigt sowie ein Button, mit dem das Video trotzdem eingebettet abgespielt werden kann. Normal eingebettete YouTube-Videos werden durch solche mit „erweitertem Datenschutzmodus“ ersetzt.

https://github.com/a-v-l/dsgvo-video-embed

fritzmg commented 6 years ago

Eine bessere Lösung wurde bereits implementiert.

Sascha07 commented 6 years ago

Ich glaube das kann man unterschiedlich bewerten. Optisch sicherlich schöner aufgrund des Vorschaubildes. Allerdings ist kein vorgeschalteter Datenschutzhinweis möglich wie bei der Lösung oben. Ob das rechtlich notwendig ist, kann wohl keiner so recht sagen, aber wer nach dem Vorsichtigkeitsprinzip agieren will, der ist mit oberer Lösung m.M.n. noch besser dran. Zudem gibt es hier eine zusätzliche Verlinkung zu Youtube (ohne das Video läuft)

Christian geht mit seiner googlemaps-Erweiterung übrigens einen ähnlichen Weg -> https://community.contao.org/de/showthread.php?70678-Update-quot-dlh_googlemaps-amp-DSGVO-quot-L%C3%B6sung

Man könnte ja beides kombinieren und die bisherige Lösung noch um die Möglichkeit eines vorgeschalteten Datenschutzhinweises erweitern -> Vorschaubild + überlagerter Datenschutzhinweis (optional)

fritzmg commented 6 years ago

Allerdings ist kein vorgeschalteter Datenschutzhinweis möglich wie bei der Lösung oben.

Warum nicht? Einfach das Template nach den eigenen Bedürfnissen anpassen.

Ob das rechtlich notwendig ist, kann wohl keiner so recht sagen, aber wer nach dem Vorsichtigkeitsprinzip agieren will, der ist mit oberer Lösung m.M.n. noch besser dran.

Sicher nicht, denn wenn JavaScript deaktiviert ist, wird die Verbindung zu bspw. YouTube trotzdem aufgebaut.

Zudem gibt es hier eine zusätzliche Verlinkung zu Youtube (ohne das Video läuft)

Das kannst du mit einer Template Anpassung auch selbst machen (unabhängig von der contao-privacy Extension).

Christian geht mit seiner googlemaps-Erweiterung übrigens einen ähnlichen Weg -> https://community.contao.org/de/showthread.php?70678-Update-quot-dlh_googlemaps-amp-DSGVO-quot-L%C3%B6sung

Christian geht den selben Weg wie die Lösung hier. Google Maps wird erst eingebunden, wenn du das bestätigt hast. Es wird nicht durch JavaScript unterbunden.

Aybee commented 6 years ago 
 iframe.allowfullscreen = '';

Das funktioniert bei mir nicht. Bei mir funktioniert

  iframe.setAttribute('allowfullscreen', '');

https://github.com/friends-of-contao/contao-privacy/blob/master/src/Resources/contao/templates/ce_youtube.html5#L16

fritzmg commented 6 years ago

Welcher Browser? Die anderen Attribute werden aber gesetzt?

Aybee commented 6 years ago

Hatte glaube ich in FF und Chrome probiert. Das Problem scheint aber bekannt zu sein. https://stackoverflow.com/questions/11034473/set-iframe-allowfullscreen-with-javascript Width und Height hatte ich bei mir im Template entfernt, von daher weiß ich dies nicht. Habe es jetzt aber mal in den Devtools probiert und da funktioniert width.

Die Eigenschaft allowfullscreen wurde im DOM zwar auf true gesetzt, aber Vollbild geht nur, wenn das Attribut auch im Tag steht.

Aybee commented 6 years ago

Hatte glaube ich in FF und Chrome probiert. Das Problem scheint aber bekannt zu sein. https://stackoverflow.com/questions/11034473/set-iframe-allowfullscreen-with-javascript Width und Height hatte ich bei mir im Template entfernt, von daher weiß ich dies nicht. Habe es jetzt aber mal in den Devtools probiert und da funktioniert width.

Die Eigenschaft allowfullscreen wurde im DOM zwar auf true gesetzt, aber Vollbild geht nur, wenn das Attribut auch im Tag steht.

Aybee commented 6 years ago

Habe jetzt nochmal in FF56, FF60.0.1 und Chrome67 probiert. Mit:

iframe.allowfullscreen = ''|true|1|'allowfullscreen';

Nichts davon geht.

Was ich oben gesagt hatte stimmt nicht ganz. allowfullscreen wird im DOM auf true gesetzt, wenn man als Wert true übergibt. Aber wie gesagt geht es dann trotzdem nicht.

Oben hatte ich zuerst in camelCase geschrieben, aber das braucht man nicht. Einfach nur:

  iframe.setAttribute('allowfullscreen', '');
Sascha07 commented 6 years ago

Okay im Kern ging es mir nicht so sehr um die genannte Lösung, sondern vor allem um -> „Man könnte ja beides kombinieren und die bisherige Lösung noch um die Möglichkeit eines vorgeschalteten Datenschutzhinweises erweitern -> Vorschaubild + überlagerter Datenschutzhinweis (optional)“

Hierbei finde ich eine Umsetzung des Datenschutzhinweises mittels Text-Editor besser als über eine Anpassung im Template. Diesen Weg geht auch Christian mit seiner Erweiterung (das meinte ich - nicht den genauen Einbau mit oder ohne Javascript).

Vorteile:

  1. Möglicherweise reicht ein Vorschaubild allein nicht aus, damit der Einbau eines Youtube- oder Vimeo-Videos DSGVO-konform ist.

  2. Einige User denken das aber sicherlich, wenn eine Möglichkeit des vorgeschalteten Datenschutzhinweises fehlt.

  3. Der Text wäre für den Redakteur jederzeit editierbar (ein Link direkt zum Video auf Youtube oder Vimeo kann auch einfach gesetzt werden)

  4. Insgesamt benutzerfreundlicher - viele Contao-User können das Template sicher nicht so einfach anpassen (da keine PHP-Kenntnisse, keine Contao-Entwickler)

Zudem: Das Vorschaubild muss man ja auch nicht über das Template einbauen. Warum also hier eine andere Logik?

Aybee commented 6 years ago

Um ein Feld in tl_content zu sparen würde ich vorschlage einen Sprachbaustein für den Hinweis zu erstellen, welcher dann im Template ausgegeben wird. So wäre es on board und man könnte ihn im Template entfernen, oder die Sprachvariable ändern. Einfach ein <p> indem der Hinweis dann ausgegeben wird. Formatierung (überlagern) ist dann Sache des CSS Entwicklers.

Aybee commented 6 years ago

Übrigens kann man sich die Vorschaubilder direkt von Youtube holen mit so einer URL https://img.youtube.com/vi/[youtubeVideoId]/0.jpg Beispiel: https://img.youtube.com/vi/wFeH9Ng3yxI/0.jpg

Ich würde mir wünschen, wenn diese Vorschaubilder beim ersten Aufruf automatisch geholt würden und in einem Ordner in files/ abgelegt würden. D.h. die Vorschaubilder sollten aus diesem Ordner in files/ ausgeliefert werden und nur wenn eines nicht existiert das fehlende Bild automatisch von Youtube geholt und dort abgelegt werden.

fritzmg commented 6 years ago

Ja, das wären die weiteren, möglichen Ausbaustufen. Initial haben wir (ich) mal die aktuelle "minimal" Variante umgestzt.

Das mit den Vorschaubildern ist nicht ganz so trivial - denn idealerweise sollte ja eines in der "passendsten" Auflösung geholt werden. Außerdem haben diese Vorschaubilder oft schwarze Balken und sind daher nur bedingt einsetzbar.

Aybee commented 6 years ago

Ja, ich weiß, es gibt verschiedene Vorschaubilder. Siehe hier https://gist.github.com/protrolium/8831763 https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

Das 0.jpg war für mich erstmal genau das, was ich brauchte.

Vielleicht könnte man auch das maxresdefault.jpg holen und es dann mit ner Contao Bildgröße wunschgemäß anpassen.

Das mit den schwarzen Balken scheint mir in Ordnung zu sein, wenn es in einem 16/9 Container ist und vertikal und horizontal zentriert ist.

Aber wahrscheinlich meinst du auch, dass man sich auf diese URLs nicht unbedingt verlassen kann und diese Bilder eigentlich mit der API holen sollte. https://groups.google.com/forum/#!topic/youtube-api-gdata/QyaUkAoTSpA

fritzmg commented 6 years ago

Ja, besser wäre sicher die API Lösung - ist natürlich um einiges komplizierter umzusetzen.

Das mit den Balken finde ich schon störend und würde ich so nie auf einer produktiven Website verwenden.

Aybee commented 6 years ago

Hier mal ne Umsetzung. Die Balken sind also nicht sichbar, obwohl die Bilder (0.jpg) Balken oben und unten haben. https://www.engadin-art-talks.ch/de/e-a-tube.html

fritzmg commented 6 years ago

iframe.allowfullscreen = '';

Das funktioniert bei mir nicht. Bei mir funktioniert

iframe.setAttribute('allowfullscreen', '');

https://github.com/friends-of-contao/contao-privacy/blob/master/src/Resources/contao/templates/ce_youtube.html5#L16

Fixed in beta6

Aybee commented 5 years ago

Das mit dem Hinweis Overlay ist irgendwie aus dem Blickfeld geraten. IMHO ein Muss, so wie bei dlh_googlemaps. Wäre gut, wenn dazu ein eigenes Ticket erstellt würde.

@fritzmg Vielleicht kannst du ja die entsprechenden Wünsche hier und aus https://github.com/friends-of-contao/contao-privacy/issues/8 rausziehen in ein eigenes Ticket. Ansonsten würde ich ein neues Ticket dafür erstellen.