Merge pull request #32 from morbidrsa/yt-links

YouTube link 2-click...

pages/growl-workshop.md

@@ -0,0 +1,38 @@
+title: Growl Workshop
+date: 01.07.2019
+author: Michael
+description: Am Freitag, 04.10.2019 und am Samstag, 05.10.2019 findet jeweils ein dreistündiger Anfängerkurs Growlen, Shouten, Screamen mit der Critical Mess Frontfrau Britta Görtz statt.
+
+Am Freitag, 04.10.2019 und am Samstag, 05.10.2019 findet jeweils ein
+dreistündiger **Anfängerkurs Growlen, Shouten, Screamen** mit der Critical Mess
+Frontfrau Britta Görtz statt. Location wird ein Proberaum der music & groove
+Musikschule in Veitsbronn sein. Wer von euch bereits am Kuttennähworkshop
+teilgenommen hat, kennt die Musikschule ja bereits.
+
+<iframe width="560" height="315"
+src="https://www.youtube-nocookie.com/embed/RU3nz5YuvjQ" frameborder="0"
+allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
+picture-in-picture" allowfullscreen></iframe>
+
+Freitag geht´s um 18 Uhr los, Ende um 21 Uhr.<br>Samstag geht´s von 11 Uhr bis
+14 Uhr.
+
+Der Workshop kostet pro Teilnehmer und Tag **55 €**. 
+
+Als Vereinsmitglieder habt ihr für volle zwei Wochen ein Vorverkaufsrecht! Die
+Teilnehmerzahl ist pro Kurs auf 12 Personen beschränkt.
+
+Nutzt die Chance und meldet euch bei Britta per Paypal an: _[https://paypal.me/elchq](https://paypal.me/elchq)_
+
+Schreibt ihr Kursdatum, Name und Emailadresse dazu, so dass sie euch eine
+Bestätigung schicken kann.
+
+Alternativ könnt ihr auch überweisen:
+
+Britta Görtz IBAN: DE27 2505 0180 0139 0074 05 
+
+
+Bitte gebt eure Daten auch bei der Überweisung (Datum, Name, Emailadresse) im
+Verwendungszweck an.
+
+Wir wünschen frohes Growlen!

pages/kuttennaehworkshop.md

@@ -0,0 +1,34 @@
+title: Kuttennähworkshop
+date: 19.03.2019
+author: Michael
+description: In familiärer Atmosphäre zelebrieren wir die kreative Vereinigung dessen, was zusammen gehört, der Patch muss auf die Kutte.
+
+In familiärer Atmosphäre zelebrieren wir die kreative Vereinigung dessen, was
+zusammen gehört:
+Der Patch muss auf die Kutte.
+ 
+<iframe width="560" height="315"
+src="https://www.youtube-nocookie.com/embed/-1gW_VJ4inU" frameborder="0"
+allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
+picture-in-picture" allowfullscreen></iframe>
+
+Du bist es leid, dir die Finger beim Aufnähen deiner Lieblingsbands am
+hartnäckigen Jeansstoff aufzuschinden? Aber schon unter deinem Blick geht die
+Nähmaschine in Flammen auf?  Vielleicht hast du auch schon erste Näherfahrung,
+weißt aber nicht, wo du mit deiner Kutte anfangen, oder wie du die Patches auf
+die Taschen bekommen sollst. Hier ist unsere Lösung für dich:
+
+- Erfahrene Kuttenträger zeigen dir Wege zu deiner individuellen Kuttengestaltung 
+- Zum Frustabbau steht uns eine Professionelle mit Rat und Tat zur Seite (ähm, also eine Schneiderin) 
+- Nicht die passenden Patches? Vielleicht wirst du auf unserer Patchbörse fündig. Bring gerne auch deine mit, die du loswerden möchtest. 
+- Für Verpflegung ist gesorgt. Im Ticketpreis ist ein Gedeck Essen und ein Getränk enthalten. 
+- Die passende musikalische Untermalung versteht sich von selbst! 
+
+
+Tickets gibt's für 8€ - schreib einfach eine E-Mail an
+machsdirselbst@fdgl.rocks und wir schicken Dir die Bankdaten.  Wir freuen uns
+auf dich!
+
+Update: Alle Tickets wurden verkauft! Danke für Euer Interesse!  Wir sehen uns
+am Samstag!
+

static/css/style.css

@@ -270,3 +270,11 @@ img[src $= "#illustration"] {
         padding: 1rem
     }
 }
+
+.btn {
+    background-color: #c11012;
+    color: white;
+    padding: 2px 8px;
+    font-size: 48px;
+    border: none;
+}

static/video.js

@@ -0,0 +1,31 @@
+(function() {
+	window.iframes = [];
+	document.addEventListener("DOMContentLoaded", function() {
+		var frame, wall, src;
+		for (var i=0, max = window.frames.length - 1; i <= max; i+=1) {
+			frame = document.getElementsByTagName('iframe')[0];
+			src = frame.src;
+			if (src.match(/youtube/) == null) {
+				continue;
+			}
+			iframes.push(frame);
+			wall = document.createElement('article');
+			if (typeof (window.frames[0].stop) === 'undefined') {
+				setTimeout(function() { window.frames[0].execCommand('Stop'); },1000);
+			} else {
+				setTimeout(function() { window.frames[0].stop(); },1000);
+			}
+			wall.setAttribute('class', 'video-wall');
+			wall.setAttribute('data-index', i);
+			wall.innerHTML = '<strong>Click f&uuml;r YouTube Video</strong><br><button class="btn"><i class="fab fa-youtube-square" aria-hidden="true"></i></button>';
+			frame.parentNode.replaceChild(wall, frame);
+			document.querySelectorAll('.video-wall button')[i].addEventListener('click', function() {
+				var frame = this.parentNode;
+				index = frame.getAttribute('data-index');
+
+				iframes[index].src = iframes[index].src.replace(/www\.youtube\.com/, 'www.youtube-nocookie.com');
+				frame.parentNode.replaceChild(iframes[index], frame);
+			}, false);
+		}
+	});
+})();

templates/template.html

@@ -48,5 +48,6 @@
       </div>
     </main>
     {{ fontawesome_js() }}
+    <script src="{{ url_for('static', filename='video.js') }}"></script>
   </body>
 </html>