Add support for deactivated js in browser

a-v-l · Nov 9, 2022 · 660684c · 660684c
1 parent 14f6790
commit 660684c
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 24 deletions.
diff --git 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
@@ -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 `<head>` Element einfügen und fertig!
 
 *Hinweis:* Das Skript sollte wirklich in das `<head>` Element eingefügt werden und nicht (wie auch üblich) vor den schließenden `<body>`-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 `<head>` Eleme
 </head>
 ```
 
+### 2. Anpassen der iframes
+Von YouTube bzw. Vimeo wird ein `<iframe>` zum einbetten des Videos angebotenen. Dieser hat ein `src`-Attribut, welches auf die abzuspielende Videodatei auf den Servern der Anbieter verweist. Um sicher zu gehen, dass auch bei deaktiviertem JavaScript keine Verbindung zum Anbieter ohne Zustimmung aufgebaut wird, muss das `src`-Attribut in `data-src` umbenannt werden:
+
+Aus
+```html
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/hZ3w5VMr8gw?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+  <iframe src="https://player.vimeo.com/video/10149605" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+```
+wird
+```html
+  <iframe width="560" height="315" data-src="https://www.youtube.com/embed/hZ3w5VMr8gw?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+  <iframe data-src="https://player.vimeo.com/video/10149605" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+```
+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
@@ -1,7 +1,10 @@
 iframe {
   display: inline-block;
 }
-.video-wall {
+iframe[data-src] {
+  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text text-anchor="middle" alignment-baseline="central" y="50%" font-size="1em" fill="black"><tspan x="50%" dy="-1.5em">Dieses Video kann nur mit</tspan><tspan x="50%" dy="1.5em">aktiviertem JavaScript</tspan><tspan x="50%" dy="1.5em">abgespielt werden</tspan></text></svg>');
+}
+.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
diff --git a/dist/dsgvo-video-embed.min.js b/dist/dsgvo-video-embed.min.js
diff --git a/demo/index.html → index.html b/demo/index.html → index.html
@@ -9,7 +9,7 @@
   <script src="js/dsgvo-video-embed.js" charset="utf-8"></script>
 </head>
 <body>
-  <iframe width="560" height="315" src="https://www.youtube.com/embed/hZ3w5VMr8gw?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
-  <iframe src="https://player.vimeo.com/video/10149605" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+  <iframe width="560" height="315" data-src="https://www.youtube.com/embed/hZ3w5VMr8gw?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+  <iframe data-src="https://player.vimeo.com/video/10149605" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 </body>
 </html>
diff --git 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);