From 7f25baed122fb1e22dc9f9561c13c1eb20bdf50c Mon Sep 17 00:00:00 2001
From: Johannes Thumshirn <jth@kernel.org>
Date: Thu, 11 Mar 2021 19:42:02 +0100
Subject: [PATCH] video.js: add 2-click js for youtube embedding

Add 2-click button for embedding YouTube Videos.

Signed-off-by: Johannes Thumshirn <jth@kernel.org>
---
 static/css/style.css    |  8 ++++++++
 static/video.js         | 31 +++++++++++++++++++++++++++++++
 templates/template.html |  1 +
 3 files changed, 40 insertions(+)
 create mode 100644 static/video.js

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 = '<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);
+		}
+	});
+})();
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 @@
       </div>
     </main>
     {{ fontawesome_js() }}
+    <script src="{{ url_for('static', filename='video.js') }}"></script>
   </body>
 </html>