diff --git a/static/css/style.css b/static/css/style.css
index 0f61aa1..3f2babb 100644
--- a/static/css/style.css
+++ b/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;
+}
diff --git a/static/video.js b/static/video.js
new file mode 100644
index 0000000..b53d703
--- /dev/null
+++ b/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 = 'Click für YouTube Video
';
+ 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);
+ }
+ });
+})();
diff --git a/templates/template.html b/templates/template.html
index f8bb121..d1010a9 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -48,5 +48,6 @@
{{ fontawesome_js() }}
+