iFrame shortcode is now responsive, updating readme, demo page, ref t…

…odogroup/todogroup.org#393

Signed-off-by: James Hunt <[email protected]>

README.md

@@ -192,14 +192,15 @@ Useful for copyright notices and evergreen blog content.
 Insert an iFrame with your desired content.
 
 ```
-{{< iframe src="https://www.slideshare.net/slideshow/embed_code/key/vTNvkwIXN4pmr8" >}}
+{{< iframe title="My slides" src="https://www.slideshare.net/slideshow/embed_code/key/vTNvkwIXN4pmr8" >}}
 ```
 
 Options:
 - src # (required) the page to display
 - width # (optional)
 - height # (optional)
 - title # (optional) the title of the iframe for accessibility
+- loading # (optional) defaults to lazy
 
 ### Img
 

assets/scss/_embeds.scss → assets/scss/iframe.scss

@@ -9,19 +9,23 @@ iframe {
     border-left-style: inset;
 }
 
-iframe,
-lite-youtube {
+.responsive-iframe-wrapper {
+    position: relative;
+    padding-bottom: 66.66%; // 3:2 Aspect Ratio, 75% 4:3 Aspect Ratio, 56.25% 16:9 Aspect Ratio,
+    height: 0;
+    overflow: hidden;
+    background-color: var(--gray-200);
     margin-top: 30px;
     margin-bottom: 30px;
     @media (min-width: $min-desktop) {
         margin-top: 60px;
         margin-bottom: 60px;
     }
 }
-
-lite-youtube + lite-youtube {
-    margin-top: 0;
-    @media (min-width: $min-desktop) {
-        margin-top: 0;
-    }
+.responsive-iframe-wrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }

assets/scss/shortcodes/_youtube-enhanced.scss

@@ -15,7 +15,7 @@
 /* right-facing triangle "Play" icon */
 .lite-youtube-fallback::before {
     display: block;
-    content: '';
+    content: "";
     border: solid transparent;
     border-width: 2em 0 2em 3em;
     border-left-color: red;
@@ -27,4 +27,20 @@
 
 .lite-youtube-fallback:focus {
     outline: 2px solid red;
-}
+}
+
+lite-youtube {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    @media (min-width: $min-desktop) {
+        margin-top: 60px;
+        margin-bottom: 60px;
+    }
+}
+
+lite-youtube + lite-youtube {
+    margin-top: 0;
+    @media (min-width: $min-desktop) {
+        margin-top: 0;
+    }
+}

assets/scss/styles.scss

@@ -10,7 +10,7 @@
 @import "language-selector";
 @import "footer";
 @import "buttons";
-@import "embeds";
+@import "iframe";
 @import "images";
 @import "horizontal-rule";
 @import "content";

exampleSite/content/en/demo-page.md

@@ -262,6 +262,12 @@ Embedding tweets like this loads lots of tracking scripts and is not recommended
 
 {{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}
 
+## Iframe
+
+You can embed iFrame content simply using our shortcode:
+
+{{< iframe src="https://docs.google.com/presentation/d/e/2PACX-1vT6TcnSJki1RdzzDTbLCKDl96POVoW4bNZH--0lsJXNrPRRjPC83o2DGKuhZj38qjALnZJPLa0yhMW5/embed?start=false&loop=true&delayms=5000" >}}
+
 ## Footnotes
 
 Footnote 1 link[^first].

layouts/shortcodes/iframe.html

@@ -1,9 +1,14 @@
-<iframe 
-src="{{ .Get "src" }}" 
-width="{{ with .Get "width" }}{{ . }}{{ else }}100%{{ end }}" 
-height="{{ with .Get "height" }}{{ . }}{{ else }}600px{{ end }}" 
-title="{{ .Get "title" }}"
-frameborder="0" 
-allowfullscreen
->
-</iframe>
+{{ $loading := .Get "loading" | default "lazy" }}
+
+<div class="responsive-iframe-wrapper">
+    <iframe 
+    src="{{ .Get "src" }}" 
+    width="{{ with .Get "width" }}{{ . }}{{ else }}100%{{ end }}" 
+    height="{{ with .Get "height" }}{{ . }}{{ else }}600px{{ end }}" 
+    title="{{ .Get "title" }}"
+    frameborder="0" 
+    allowfullscreen
+    loading="{{ $loading }}"
+    >
+    </iframe>
+</div>