diff --git a/LICENSE b/LICENSE index f5ba7c7..27f32bc 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018 Arndt von Lucadou +Copyright (c) Arndt von Lucadou Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 6691cc3..80b8348 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,12 @@ Einfache Zwei-Klick-Lösung zur DSGVO-konformen Einbettung von YouTube- und Vime 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. +**Wichtig:** +Das Script funktioniert ohne weitere Anpassungen der iframes nur, wenn im Browser des Seitenbesuchers JavaScript aktiviert ist. Sollte JavaScript deaktiviert sein, wird eine Verbindung zu YouTube/Vimeo hergestellt. Das Video kann dann zwar nicht abgespielt werden, es werden aber Daten übertragen und u.a. auch Google-Fonts geladen. *Um dieses Problem zu umgehen, müssen die eingebundenen iframes angepasst werden!* (siehe nächster Abschnitt) Bei deaktiviertem JavaScript wird ein Hinweis angezeigt, dass das Video nur mit aktiviertem JavaScript abgesipielt werden kann. + ## How-To +### 1. Einbinden des Scripts Einfach `dsgvo-video-embed.css` und `dsgvo-video-embed.js` in das `` Element einfügen und fertig! *Hinweis:* Das Skript sollte wirklich in das `` Element eingefügt werden und nicht (wie auch üblich) vor den schließenden ``-Tag, da die `iframes` sonst nicht rechtzeitig vom Verbindungsaufbau zu YouTube bzw. Vimeo abgehalten werden können! @@ -21,11 +25,28 @@ Einfach `dsgvo-video-embed.css` und `dsgvo-video-embed.js` in das `` Eleme ``` +### 2. Anpassen der iframes +Von YouTube bzw. Vimeo wird ein ` + +``` +wird +```html + + +``` +Lediglich `src` wird zu `data-src`, sonst bleibt alles unverändert. + +Dieser zweite Schritt ist optional, wird aber dringend empfohlen. Es gab wohl schon Abmahnungen wegen einem Verbindungsaufbau zu Google-Fonts ohne Einwilligung. + ## Konfiguration -Das Skript ist jeweils mit einem Standard-Text für YouTube und Vimeo ausgestattet. Wer damit zufrieden ist, muss gar nichts ändern! +Das Skript ist jeweils mit einem Standard-Text für YouTube und Vimeo ausgestattet. Wer damit zufrieden ist, muss nichts weiter ändern! -Wer den Text jedoch ändern will, findet ihn am Anfang der Datei `js/dsgvo-video-embed.js` (oder auch `js/dsgvo-video-embed.min.js`): +Wer den Text jedoch anpassen will, findet ihn am Anfang der Datei `js/dsgvo-video-embed.js` (oder auch `js/dsgvo-video-embed.min.js`): ```javascript // Config diff --git a/css/dsgvo-video-embed.css b/css/dsgvo-video-embed.css index 2a70360..e11c42b 100644 --- a/css/dsgvo-video-embed.css +++ b/css/dsgvo-video-embed.css @@ -1,7 +1,10 @@ iframe { display: inline-block; } -.video-wall { +iframe[data-src] { + background:url('data:image/svg+xml;utf8,Dieses Video kann nur mitaktiviertem JavaScriptabgespielt werden'); +} +.video-wall, iframe[data-src] { position: relative; font: 400 1em/1.46 Helvetica, Arial, sans-serif; color: #333; diff --git a/dist/dsgvo-video-embed.min.css b/dist/dsgvo-video-embed.min.css index 57a5817..e0de886 100644 --- a/dist/dsgvo-video-embed.min.css +++ b/dist/dsgvo-video-embed.min.css @@ -1 +1 @@ -iframe{display:inline-block}.video-wall{position:relative;font:400 1em/1.46 Helvetica,Arial,sans-serif;color:#333;display:inline-block;min-height:18em;min-width:28em;margin:0;background-color:#eee;box-sizing:border-box;border:1.5em solid #ccc;padding:1em}.video-wall strong{display:block;text-align:center;font-size:1.1em;margin:0}.video-wall div{position:absolute;width:calc(100% - 2em);top:3em;bottom:7em;overflow-y:auto}.video-wall p{font-size:.8em;margin:0 0 1em}.video-wall a{color:inherit}.video-wall .video-link{display:block;white-space:nowrap;font-size:.8em;margin:0;position:absolute;left:50%;bottom:6em;transform:translateX(-50%)}.video-wall button{-webkit-appearance:none;cursor:pointer;color:#eee;font:700 .8em/1.2 Helvetica,Arial,sans-serif;display:block;width:11.5em;height:4.25em;border:0 none;border-radius:.75em;padding:0 0 0 5.5em;text-align:left;margin:0;position:absolute;left:50%;bottom:1em;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23eee' d='M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1em center #666;background-size:3.5em;transition:background-color .3s}.video-wall button:hover{background-color:#444} +iframe{display:inline-block}iframe[data-src]{background:url('data:image/svg+xml;utf8,Dieses Video kann nur mitaktiviertem JavaScriptabgespielt werden')}.video-wall,iframe[data-src]{position:relative;font:400 1em/1.46 Helvetica,Arial,sans-serif;color:#333;display:inline-block;min-height:18em;min-width:28em;margin:0;background-color:#eee;box-sizing:border-box;border:1.5em solid #ccc;padding:1em}.video-wall strong{display:block;text-align:center;font-size:1.1em;margin:0}.video-wall div{position:absolute;width:calc(100% - 2em);top:3em;bottom:7em;overflow-y:auto}.video-wall p{font-size:.8em;margin:0 0 1em}.video-wall a{color:inherit}.video-wall .video-link{display:block;white-space:nowrap;font-size:.8em;margin:0;position:absolute;left:50%;bottom:6em;transform:translateX(-50%)}.video-wall button{-webkit-appearance:none;cursor:pointer;color:#eee;font:700 .8em/1.2 Helvetica,Arial,sans-serif;display:block;width:11.5em;height:4.25em;border:0 none;border-radius:.75em;padding:0 0 0 5.5em;text-align:left;margin:0;position:absolute;left:50%;bottom:1em;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23eee' d='M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1em center #666;background-size:3.5em;transition:background-color .3s}.video-wall button:hover{background-color:#444} \ No newline at end of file diff --git a/dist/dsgvo-video-embed.min.js b/dist/dsgvo-video-embed.min.js index defed15..c253b61 100644 --- a/dist/dsgvo-video-embed.min.js +++ b/dist/dsgvo-video-embed.min.js @@ -1,16 +1,15 @@ /** - * DSGVO Video Embed, v1.0.3 + * DSGVO Video Embed, v1.1.0 * (c) 2021 Arndt von Lucadou * MIT License * https://github.com/a-v-l/dsgvo-video-embed */ - (function() { - // Config - var text = { - youtube: 'Eingebettetes YouTube-Video

Hinweis: Dieses eingebettete Video wird von YouTube, LLC, 901 Cherry Ave., San Bruno, CA 94066, USA bereitgestellt.
Beim Abspielen wird eine Verbindung zu den Servern von Youtube hergestellt. Dabei wird Youtube mitgeteilt, welche Seiten Sie besuchen. Wenn Sie in Ihrem Youtube-Account eingeloggt sind, kann Youtube Ihr Surfverhalten Ihnen persönlich zuzuordnen. Dies verhindern Sie, indem Sie sich vorher aus Ihrem Youtube-Account ausloggen.

Wird ein Youtube-Video gestartet, setzt der Anbieter Cookies ein, die Hinweise über das Nutzerverhalten sammeln.

Wer das Speichern von Cookies für das Google-Ad-Programm deaktiviert hat, wird auch beim Anschauen von Youtube-Videos mit keinen solchen Cookies rechnen müssen. Youtube legt aber auch in anderen Cookies nicht-personenbezogene Nutzungsinformationen ab. Möchten Sie dies verhindern, so müssen Sie das Speichern von Cookies im Browser blockieren.

Weitere Informationen zum Datenschutz bei „Youtube“ finden Sie in der Datenschutzerklärung des Anbieters unter: https://www.google.de/intl/de/policies/privacy/

Link zum Video: https://youtu.be/%id%', - vimeo: 'Eingebettetes Vimeo-Video

Hinweis: Dieses eingebettete Video wird von Vimeo, Inc., 555 West 18th Street, New York, New York 10011, USA bereitgestellt.
Beim Abspielen wird eine Verbindung zu den Servern von Vimeo hergestellt. Dabei wird Vimeo mitgeteilt, welche Seiten Sie besuchen. Wenn Sie in Ihrem Vimeo-Account eingeloggt sind, kann Vimeo Ihr Surfverhalten Ihnen persönlich zuzuordnen. Dies verhindern Sie, indem Sie sich vorher aus Ihrem Vimeo-Account ausloggen.

Wird ein Vimeo-Video gestartet, setzt der Anbieter Cookies ein, die Hinweise über das Nutzerverhalten sammeln.

Weitere Informationen zum Datenschutz bei „Vimeo“ finden Sie in der Datenschutzerklärung des Anbieters unter: https://vimeo.com/privacy

Link zum Video: https://vimeo.com/%id%' - }; - window.video_iframes = []; - document.addEventListener("DOMContentLoaded",function(){for(var a,b,k,c,e,f,d=0,l=window.frames.length-1;d<=l;d+=1)a=document.getElementsByTagName("iframe")[0],c=a.src,null!=c.match(/youtube|vimeo/)&&(video_iframes.push(a),e=a.getAttribute("width"),f=a.getAttribute("height"),b=document.createElement("article"),"undefined"===typeof window.frames[0].stop?setTimeout(function(){window.frames[0].execCommand("Stop")},1E3):setTimeout(function(){window.frames[0].stop()},1E3),k=null==c.match(/vimeo/)?"youtube":"vimeo",c=c.match(/(embed|video)\/([^?\s]*)/)[2],b.setAttribute("class","video-wall"),b.setAttribute("data-index",d),e&&f&&b.setAttribute("style","width:"+e+"px;height:"+f+"px"),b.innerHTML=text[k].replace(/%id%/g,c),a.parentNode.replaceChild(b,a),document.querySelectorAll(".video-wall button")[d].addEventListener("click",function(){var g=this.parentNode,h=g.getAttribute("data-index");video_iframes[h].src=video_iframes[h].src.replace(/www\.youtube\.com/,"www.youtube-nocookie.com");g.parentNode.replaceChild(video_iframes[h],g)},!1))}); - })(); +(function() { + // Config + var text = { + youtube: 'Eingebettetes YouTube-Video

Hinweis: Dieses eingebettete Video wird von YouTube, LLC, 901 Cherry Ave., San Bruno, CA 94066, USA bereitgestellt.
Beim Abspielen wird eine Verbindung zu den Servern von YouTube hergestellt. Dabei wird YouTube mitgeteilt, welche Seiten Sie besuchen. Wenn Sie in Ihrem YouTube-Account eingeloggt sind, kann YouTube Ihr Surfverhalten Ihnen persönlich zuzuordnen. Dies verhindern Sie, indem Sie sich vorher aus Ihrem YouTube-Account ausloggen.

Wird ein YouTube-Video gestartet, setzt der Anbieter Cookies ein, die Hinweise über das Nutzerverhalten sammeln.

Wer das Speichern von Cookies für das Google-Ads-Programm deaktiviert hat, wird auch beim Anschauen von YouTube-Videos mit keinen solchen Cookies rechnen müssen. YouTube legt aber auch in anderen Cookies nicht-personenbezogene Nutzungsinformationen ab. Möchten Sie dies verhindern, so müssen Sie das Speichern von Cookies im Browser blockieren.

Weitere Informationen zum Datenschutz bei „YouTube“ finden Sie in der Datenschutzerklärung des Anbieters unter: https://www.google.de/intl/de/policies/privacy/

Link zum Video: https://youtu.be/%id%', + vimeo: 'Eingebettetes Vimeo-Video

Hinweis: Dieses eingebettete Video wird von Vimeo, Inc., 555 West 18th Street, New York, New York 10011, USA bereitgestellt.
Beim Abspielen wird eine Verbindung zu den Servern von Vimeo hergestellt. Dabei wird Vimeo mitgeteilt, welche Seiten Sie besuchen. Wenn Sie in Ihrem Vimeo-Account eingeloggt sind, kann Vimeo Ihr Surfverhalten Ihnen persönlich zuzuordnen. Dies verhindern Sie, indem Sie sich vorher aus Ihrem Vimeo-Account ausloggen.

Wird ein Vimeo-Video gestartet, setzt der Anbieter Cookies ein, die Hinweise über das Nutzerverhalten sammeln.

Weitere Informationen zum Datenschutz bei „Vimeo“ finden Sie in der Datenschutzerklärung des Anbieters unter: https://vimeo.com/privacy

Link zum Video: https://vimeo.com/%id%' + }; + window.video_iframes=[];document.addEventListener("DOMContentLoaded",(function(){for(var video_frame,wall,video_platform,video_src,video_id,video_w,video_h,i=0,max=window.frames.length-1;i<=max;i+=1)video_src=(video_frame=document.getElementsByTagName("iframe")[0]).src||video_frame.dataset.src,console.log(video_src,!!video_frame.src),null!=video_src.match(/youtube|vimeo/)&&(video_iframes.push(video_frame),video_w=video_frame.getAttribute("width"),video_h=video_frame.getAttribute("height"),wall=document.createElement("article"),video_frame.src&&(void 0===window.frames[0].stop?setTimeout((function(){window.frames[0].execCommand("Stop")}),1e3):setTimeout((function(){window.frames[0].stop()}),1e3)),video_platform=null==video_src.match(/vimeo/)?"youtube":"vimeo",video_id=video_src.match(/(embed|video)\/([^?\s]*)/)[2],wall.setAttribute("class","video-wall"),wall.setAttribute("data-index",i),video_w&&video_h&&wall.setAttribute("style","width:"+video_w+"px;height:"+video_h+"px"),wall.innerHTML=text[video_platform].replace(/\%id\%/g,video_id),video_frame.parentNode.replaceChild(wall,video_frame),document.querySelectorAll(".video-wall button")[i].addEventListener("click",(function(){var video_frame=this.parentNode,index=video_frame.dataset.index;video_iframes[index].dataset.src&&(video_iframes[index].src=video_iframes[index].dataset.src,video_iframes[index].removeAttribute("data-src")),video_iframes[index].src=video_iframes[index].src.replace(/www\.youtube\.com/,"www.youtube-nocookie.com"),video_frame.parentNode.replaceChild(video_iframes[index],video_frame)}),!1))})) +})(); \ No newline at end of file diff --git a/demo/index.html b/index.html similarity index 55% rename from demo/index.html rename to index.html index 84d094b..f0e692b 100644 --- a/demo/index.html +++ b/index.html @@ -9,7 +9,7 @@ - - + + diff --git a/js/dsgvo-video-embed.js b/js/dsgvo-video-embed.js index e48b827..e1797e0 100644 --- a/js/dsgvo-video-embed.js +++ b/js/dsgvo-video-embed.js @@ -1,5 +1,5 @@ /** - * DSGVO Video Embed, v1.0.3 + * DSGVO Video Embed, v1.1.0 * (c) 2021 Arndt von Lucadou * MIT License * https://github.com/a-v-l/dsgvo-video-embed @@ -16,7 +16,7 @@ var video_frame, wall, video_platform, video_src, video_id, video_w, video_h; for (var i=0, max = window.frames.length - 1; i <= max; i+=1) { video_frame = document.getElementsByTagName('iframe')[0]; - video_src = video_frame.src; + video_src = video_frame.src || video_frame.dataset.src; // Only process video iframes [youtube|vimeo] if (video_src.match(/youtube|vimeo/) == null) { continue; @@ -29,10 +29,12 @@ // Prevent iframes from loading remote content - if (typeof (window.frames[0].stop) === 'undefined'){ - setTimeout(function() {window.frames[0].execCommand('Stop');},1000); - }else{ - setTimeout(function() {window.frames[0].stop();},1000); + if (!!video_frame.src) { + if (typeof (window.frames[0].stop) === 'undefined'){ + setTimeout(function() {window.frames[0].execCommand('Stop');},1000); + }else{ + setTimeout(function() {window.frames[0].stop();},1000); + } } video_platform = video_src.match(/vimeo/) == null ? 'youtube' : 'vimeo'; video_id = video_src.match(/(embed|video)\/([^?\s]*)/)[2]; @@ -45,7 +47,11 @@ video_frame.parentNode.replaceChild(wall, video_frame); document.querySelectorAll('.video-wall button')[i].addEventListener('click', function() { var video_frame = this.parentNode, - index = video_frame.getAttribute('data-index'); + index = video_frame.dataset.index; + if (!!video_iframes[index].dataset.src) { + video_iframes[index].src = video_iframes[index].dataset.src; + video_iframes[index].removeAttribute('data-src'); + } video_iframes[index].src = video_iframes[index].src.replace(/www\.youtube\.com/, 'www.youtube-nocookie.com'); video_frame.parentNode.replaceChild(video_iframes[index], video_frame); }, false);