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); 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;