├── .gitignore ├── LICENSE ├── README.md ├── css └── dsgvo-video-embed.css ├── dist ├── dsgvo-video-embed.min.css └── dsgvo-video-embed.min.js ├── index.html ├── js └── dsgvo-video-embed.js └── screenshot.png /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Arndt von Lucadou 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DSGVO Video-Embed 2 | 3 | Einfache Zwei-Klick-Lösung zur DSGVO-konformen Einbettung von YouTube- und Vimeo-Videos. 4 | 5 | ![Eingebettetes Video](screenshot.png) 6 | 7 | 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. 8 | Normal eingebettete YouTube-Videos werden durch solche mit „erweitertem Datenschutzmodus“ ersetzt. 9 | 10 | **Wichtig:** 11 | 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. 12 | 13 | ## How-To 14 | 15 | ### 1. Einbinden des Scripts 16 | Die beiden Scripts `dsgvo-video-embed.css` und `dsgvo-video-embed.js` in das `` Element einfügen. 17 | 18 | *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! 19 | 20 | ```html 21 | 22 | … 23 | 24 | 25 | 26 | ``` 27 | 28 | ### 2. Anpassen der iframes 29 | Von YouTube bzw. Vimeo wird ein ` 35 | 36 | 37 | ``` 38 | wird 39 | ```html 40 | 41 | 42 | 43 | 44 | ``` 45 | Lediglich `src` wird zu `data-src`, sonst bleibt alles unverändert. 46 | 47 | Dieser zweite Schritt ist optional, wird aber dringend empfohlen. Es gab wohl schon Abmahnungen wegen einem Verbindungsaufbau zu Google-Fonts ohne Einwilligung. 48 | 49 | ## Konfiguration 50 | 51 | Das Skript ist jeweils mit einem Standard-Text für YouTube und Vimeo ausgestattet. Wer damit zufrieden ist, muss nichts weiter ändern! 52 | 53 | 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`): 54 | 55 | ```javascript 56 | // Config 57 | var text = { 58 | youtube: "YouTube-Video", 59 | vimeo: "Vimeo-Video" 60 | } 61 | ``` 62 | 63 | Natürlich kann dieser Text beliebig verändert werden (wie das CSS auch). Wenn man jedoch nur inhaltliche Anpassungen vornehmen will, kann man sich an das vorhandene HTML-Gerüst halten: 64 | 65 | ```html 66 | Titel 67 |
68 |

Hinweis: Text

69 |
70 | Link 71 | 72 | ``` 73 | 74 | Der Platzhalter `%id%` wird durch die Video-ID ersetzt. 75 | Das Element `', 12 | 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%' 13 | }; 14 | window.video_iframes = []; 15 | document.addEventListener("DOMContentLoaded", function () { 16 | var video_frame, wall, video_platform, video_src, video_id, video_w, video_h; 17 | for (var i = 0, max = window.frames.length - 1; i <= max; i += 1) { 18 | video_frame = document.getElementsByTagName('iframe')[0]; 19 | video_src = video_frame.src || video_frame.dataset.src; 20 | // Only process video iframes [youtube|vimeo] 21 | if (video_src.match(/youtube|vimeo/) == null) { 22 | continue; 23 | } 24 | 25 | video_iframes.push(video_frame); 26 | video_w = video_frame.getAttribute('width'); 27 | video_h = video_frame.getAttribute('height'); 28 | wall = document.createElement('article'); 29 | 30 | // Prevent iframes from loading remote content 31 | if (!!video_frame.src) { 32 | if (typeof (window.frames[0].stop) === 'undefined') { 33 | setTimeout(function () { 34 | window.frames[0].execCommand('Stop'); 35 | }, 1000); 36 | } else { 37 | setTimeout(function () { 38 | window.frames[0].stop(); 39 | }, 1000); 40 | } 41 | } 42 | video_platform = video_src.match(/vimeo/) == null ? 'youtube' : 'vimeo'; 43 | video_id = video_src.match(/(embed|video)\/([^?\s]*)/)[2]; 44 | wall.setAttribute('class', 'video-wall'); 45 | wall.setAttribute('data-index', i); 46 | if (video_w && video_h) { 47 | wall.setAttribute('style', 'width:' + video_w + 'px;height:' + video_h + 'px'); 48 | } 49 | wall.innerHTML = text[video_platform].replace(/\%id\%/g, video_id); 50 | video_frame.parentNode.replaceChild(wall, video_frame); 51 | document.querySelectorAll('.video-wall button')[i].addEventListener('click', function () { 52 | var video_frame = this.parentNode, 53 | index = video_frame.dataset.index; 54 | if (!!video_iframes[index].dataset.src) { 55 | video_iframes[index].src = video_iframes[index].dataset.src; 56 | video_iframes[index].removeAttribute('data-src'); 57 | } 58 | video_iframes[index].src = video_iframes[index].src.replace(/www\.youtube\.com/, 'www.youtube-nocookie.com'); 59 | video_frame.parentNode.replaceChild(video_iframes[index], video_frame); 60 | }, false); 61 | } 62 | }); 63 | })(); -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a-v-l/dsgvo-video-embed/d5ef1a6e9557fa7037ce6189503cb5253991d8de/screenshot.png --------------------------------------------------------------------------------