From 6d7cc4d38671cf381fd2d1e14ba6c06f8a363683 Mon Sep 17 00:00:00 2001
From: Nate Weaver <wevah@derailer.org>
Date: Fri, 20 Nov 2020 11:22:07 -0600
Subject: [PATCH] Constrain the height of iframes that are percent-sized
 relative to the document body to 50% of the viewport width

---
 Shared/Article Rendering/main.js    | 17 +++++++++++++++++
 Shared/Article Rendering/shared.css |  4 ++++
 2 files changed, 21 insertions(+)

diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js
index f0aceebee..db27502e6 100644
--- a/Shared/Article Rendering/main.js	
+++ b/Shared/Article Rendering/main.js	
@@ -25,6 +25,22 @@ function stripStyles() {
 	document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => stripStylesFromElement(element, ["color", "background", "font", "max-width", "max-height", "position"]));
 }
 
+// Constrain the height of iframes whose heights are a percent of the document body to be at most
+// 50% of the viewport width.
+function constrainBodyRelativeIframes() {
+	let iframes = document.getElementsByTagName("iframe");
+
+	for (iframe of iframes) {
+		if (iframe.offsetParent === document.body) {
+			let heightAttribute = iframe.style.height;
+
+			if (/^\d+%$/.test(heightAttribute)) {
+				iframe.classList.add("nnw-constrained");
+			}
+		}
+	}
+}
+
 // Convert all Feedbin proxy images to be used as src, otherwise change image locations to be absolute if not already
 function convertImgSrc() {
 	document.querySelectorAll("img").forEach(element => {
@@ -137,6 +153,7 @@ function processPage() {
 	wrapTables();
 	inlineVideos();
 	stripStyles();
+	constrainBodyRelativeIframes();
 	convertImgSrc();
 	flattenPreElements();
 	styleLocalFootnotes();
diff --git a/Shared/Article Rendering/shared.css b/Shared/Article Rendering/shared.css
index 0c5705eda..fa2a5920d 100644
--- a/Shared/Article Rendering/shared.css	
+++ b/Shared/Article Rendering/shared.css	
@@ -204,6 +204,10 @@ iframe {
 	margin: 0 auto;
 }
 
+iframe.nnw-constrained {
+	max-height: 50vw;
+}
+
 figure {
 	margin-bottom: 1em;
 	margin-top: 1em;