make videos more responsive

resolves #27
AprilSylph · Nov 14, 2022 · c8991f8 · c8991f8
1 parent 4082eb9
commit c8991f8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/lib/npf.js b/src/lib/npf.js
@@ -155,8 +155,21 @@ const blockRenderers = {
     return figure;
   },
 
-  video ({ url, media, embedHtml, embed_html = embedHtml, poster, attribution }) {
+  video ({
+    url,
+    media,
+    embedHtml,
+    embed_html = embedHtml,
+    embedIframe,
+    embed_iframe = embedIframe,
+    poster,
+    attribution
+  }) {
     const figure = document.createElement('figure');
+    if (embed_iframe) {
+      const { width, height } = embed_iframe;
+      if (width && height) figure.style.setProperty('--aspect-ratio', `calc(${height} / ${width})`);
+    }
 
     if (embed_html) {
       Object.assign(figure, { innerHTML: embed_html });

diff --git a/src/outbox.css b/src/outbox.css
@@ -438,8 +438,9 @@ article footer button {
   text-transform: uppercase;
 }
 
-[data-block="video"] iframe[id="youtube_iframe"] {
-  height: calc(540px * (9/16));
+[data-block="video"] iframe {
+  --post-width: min(540px, 100vw);
+  height: calc(var(--post-width) * var(--aspect-ratio, calc(9 / 16)));
 }
 
 [data-attribution="post"],