From 8f2a87e5ed5c4d30aedf4896558e206aab204721 Mon Sep 17 00:00:00 2001
From: rubenwardy <rw@rubenwardy.com>
Date: Tue, 25 Jan 2022 21:52:46 +0000
Subject: [PATCH] Harden video_embed.js, store URL in data-src

---
 app/public/static/video_embed.js | 44 +++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/app/public/static/video_embed.js b/app/public/static/video_embed.js
index b32c356..9ff2e06 100644
--- a/app/public/static/video_embed.js
+++ b/app/public/static/video_embed.js
@@ -1,24 +1,32 @@
 document.querySelectorAll(".video-embed").forEach(ele => {
-	const url = new URL(ele.getAttribute("href"));
+	try {
+		const href = ele.getAttribute("href");
+		const url = new URL(href);
 
-	if (url.host == "www.youtube.com") {
-		ele.addEventListener("click", () => {
-			ele.parentNode.classList.add("d-block");
-			ele.classList.add("embed-responsive");
-			ele.classList.add("embed-responsive-16by9");
-			ele.innerHTML = `
-				<iframe title="YouTube video player" frameborder="0"
-						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-						allowfullscreen>
-				</iframe>`;
+		if (url.host == "www.youtube.com") {
+			ele.addEventListener("click", () => {
+				ele.parentNode.classList.add("d-block");
+				ele.classList.add("embed-responsive");
+				ele.classList.add("embed-responsive-16by9");
+				ele.innerHTML = `
+					<iframe title="YouTube video player" frameborder="0"
+							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+							allowfullscreen>
+					</iframe>`;
 
-			const embedURL = new URL("https://www.youtube.com/");
-			embedURL.pathname = "/embed/" + url.searchParams.get("v");
-			embedURL.searchParams.set("autoplay", "1");
+				const embedURL = new URL("https://www.youtube.com/");
+				embedURL.pathname = "/embed/" + url.searchParams.get("v");
+				embedURL.searchParams.set("autoplay", "1");
 
-			const iframe = ele.children[0];
-			iframe.setAttribute("src", embedURL);
-		});
-		ele.removeAttribute("href");
+				const iframe = ele.children[0];
+				iframe.setAttribute("src", embedURL);
+			});
+
+			ele.setAttribute("data-src", href);
+			ele.removeAttribute("href");
+		}
+	} catch (e) {
+		console.error(url);
+		return;
 	}
 });