From dc57981376b1138196d1fd7fe88017553b7acdcd Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Thu, 2 Jul 2020 04:32:58 -0500 Subject: [PATCH 1/2] Only wrap iframes that don't specify their own height (master version of e183a5406c5b8216553fbf2b2ffd77e39309c6bd) --- Shared/Article Rendering/main.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 9b9535bae..6c79007fd 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -1,6 +1,9 @@ // Here we are making iframes responsive. Particularly useful for inline Youtube videos. function wrapFrames() { document.querySelectorAll("iframe").forEach(element => { + if (element.height > 0 || parseInt(element.style.height) > 0) + return; + var wrapper = document.createElement("div"); wrapper.classList.add("iframeWrap"); element.parentNode.insertBefore(wrapper, element); From 014724e6a79bf2b7c19858240e9c527512ada8bd Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Thu, 2 Jul 2020 04:43:22 -0500 Subject: [PATCH 2/2] Don't force iframe height to auto Prevents truncating of YouTube embeds without needing a wrapper div. (master version of 82f8951c9647b245a956cc1f7a20a1742f60de31). This also sets max-width: 100%; on video instead of width: 100% !important;. --- Shared/Article Rendering/shared.css | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/Shared/Article Rendering/shared.css b/Shared/Article Rendering/shared.css index 3dd1c9997..e487b3112 100644 --- a/Shared/Article Rendering/shared.css +++ b/Shared/Article Rendering/shared.css @@ -171,23 +171,22 @@ code, pre { padding: 0; } -img, figure, iframe, div { +img, figure, video, div { max-width: 100%; height: auto !important; margin: 0 auto; } +iframe { + max-width: 100%; + margin: 0 auto; +} + figure { margin-bottom: 1em; margin-top: 1em; } -video { - width: 100% !important; - height: auto !important; - margin: 0 auto; -} - figcaption { font-size: 14px; line-height: 1.3em;