Write README.md and minor changes

Change <h4> to <strong> and public var iframes to video_iframes
a-v-l · May 15, 2018 · dc0bdba · dc0bdba
1 parent ebba10a
commit dc0bdba
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+demo/css
+demo/js
+
diff --git a/README.md b/README.md
@@ -1,2 +1,53 @@
-# dsgvo-video-embed
-Zwei-Klick-Lösung zur DSGVO-konformen Einbettung von YouTube- und Vimeo-Videos
+# DSGVO Video-Embed
+
+Einfache Zwei-Klick-Lösung zur DSGVO-konformen Einbettung von YouTube- und Vimeo-Videos.
+
+![Eingebettetes Video](screenshot.png)
+
+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.
+
+## How-To
+
+Einfach `dgsvo-video-embed.css` und `dgsvo-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!
+
+```html
+<head>
+  …
+  <link rel="stylesheet" href="dgsvo-video-embed.min.css">
+  <script src="dgsvo-video-embed.min.js"></script>
+</head>
+```
+
+## Konfiguration
+
+Am Anfang der Datei `js/dgsvo-video-embed.js` (oder auch `js/dgsvo-video-embed.min.js`) wird der Text definiert, welcher anstatt des Videos angezeigt werden soll:
+
+```javascript
+// Config
+var text = {
+  youtube: "<strong>YouTube-Video</strong>",
+  vimeo: "<strong>Vimeo-Video</strong>"
+}
+```
+
+Natürlich kann dieser Text beliebig ausgetauscht werden (wie das CSS auch). Wenn man jedoch nur inhaltliche Änderungen vornehmen will, kann man sich an das vorhandene HTML-Gerüst halten:
+
+```html
+<strong>Titel</strong>
+<div>
+    <p><b>Hinweis:</b> Text</p>
+</div>
+<a class="video-link" href="https://youtu.be/%id%">Link</a>
+<button>Video abspielen</button>
+```
+
+Der Platzhalter `%id%` wird durch die Video-ID ersetzt.
+
+## Rechtlicher Hinweis / Disclaimer
+
+Der Autor dieses Skripts ist kein Jurist und bietet das Skript frei von jeder Haftung an. Wer Videos einbettet, wird hierzu auf jeden Fall einen eigenen Abschnitt in die Datenschutzerklärung der eigenen Website aufnehmen müssen. Ob der Einsatz dieses Skriptes vollkommen rechtssicher ist, kann nicht garantiert werden.
+
+*Der Gebrauch erfolgt auf eigenes Risiko!*
diff --git a/css/dgsvo-video-embed.css b/css/dgsvo-video-embed.css
@@ -14,7 +14,7 @@ iframe {
   border: 1.5em solid #ccc;
   padding: 1em;
 }
-.video-wall h4 {
+.video-wall strong {
   display: block;
   text-align: center;
   font-size: 1.1em;

diff --git a/demo/index.html b/demo/index.html
@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>GDPR Compliant Video Embed – DSGVO-konforme Video-Einbettung</title>
-  <link rel="stylesheet" href="../css/dgsvo-video-embed.css">
-  <script src="../js/dgsvo-video-embed.js" charset="utf-8"></script>
+  <title>DSGVO-konforme Video-Einbettung – GDPR Compliant Video Embed</title>
+  <link rel="stylesheet" href="css/dgsvo-video-embed.css">
+  <script src="js/dgsvo-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>

diff --git a/dist/dgsvo-video-embed.min.css b/dist/dgsvo-video-embed.min.css
diff --git a/dist/dgsvo-video-embed.min.js b/dist/dgsvo-video-embed.min.js