Merge pull request #485 from oddbird/lite-youtube

Lite Youtube
oddbird · Jan 12, 2024 · 4268f65 · 4268f65
2 parents 047e029 + 6ae9d6e
commit 4268f65
Show file tree

Hide file tree

Showing 55 changed files with 182 additions and 112 deletions.
diff --git a/content/_includes/embed.macros.njk b/content/_includes/embed.macros.njk
@@ -124,49 +124,74 @@ params:
 
 
 {# @docs
-label: video
+label: _video
 category: Patterns
 note: |
-  Generate a figure for a one-off video
+  Embed a video file. For external videos, use `youtube` for Youtube-hosted
+  videos and `iframe` for everything else.
 params:
   src:
     type: url
-  height:
-    type: number
-    default: none
   width:
     type: number
     default: none
-  caption:
-    type: string
+  height:
+    type: number
     default: none
 #}
-{% macro video(
+{% macro _video(
   src,
-  height=none,
   width=none,
-  caption=none
+  height=none
 ) %}
-  {%- if '://' in src -%}
-    {{ figure(
-      data=[{
-        'iframe': src,
-        'height': height,
-        'width': width
-      }],
-      caption=caption
-    ) }}
-  {%- else -%}
-    {%- set src = '/assets/media/' + src -%}
-    {%- set style = {
-      'height': height,
-      'width': width
-    } -%}
-    <video src="{{ src }}" {{ utility.style_if(style) }} controls="controls">{{ src | mdInline }}</video>
-  {%- endif -%}
+  {%- set src = '/assets/media/' + src -%}
+  {%- set style = {
+    'height': height,
+    'width': width
+  } -%}
+  <video src="{{ src }}" {{ utility.style_if(style) }} controls="controls">{{ src | mdInline }}</video>
 {% endmacro %}
 
 
+{# @docs
+label: _youtube
+category: Embed
+note: Embed a video from Youtube
+params:
+  id:
+    type: string
+  width:
+    type: number
+    default: none
+  height:
+    type: number
+    default: none
+  span:
+    type: number | 'full'
+    default: none
+    note: Span multiple columns of a gallery
+#}
+{% macro _youtube(
+  id,
+  width=none,
+  height=none,
+  span=none
+) -%}
+  {%- set width = width or 560 -%}
+  {%- set height = height or 315 -%}
+  {%- set style = {
+    '--ratio': (width / height),
+    '--width': '100%',
+    '--span': span
+  } -%}
+  <is-land on:visible class="ratio" {{ utility.style_if(style) }} >
+    <lite-youtube videoid="{{ id }}" style="
+      background-image: url('https://v1.opengraph.11ty.dev/https%3A%2F%2Fyoutube.com%2Fwatch%3Fv%3D{{ id }}/auto/jpeg/');
+    "/>
+  </is-land>
+{%- endmacro %}
+
+
 {# Private macro used to generate figure content from data #}
 {% macro _fig_content(
   data
@@ -187,9 +212,13 @@ params:
     {%- elif item.svg -%}
       {{- svg(item.svg, item.alt) | safe -}}
     {%- elif item.iframe -%}
-      {{- iframe(item.iframe, item.width, item.height, item.span) -}}
+      {{- _iframe(item.iframe, item.width, item.height, item.span) -}}
     {%- elif item.audio -%}
       {{- audio(item.audio, item.span) -}}
+    {%- elif item.youtube -%}
+      {{- _youtube(item.youtube, item.width, item.height, item.span) -}}
+    {%- elif item.video -%}
+      {{- _video(item.video, item.width, item.height) -}}
     {%- endif -%}
   {%- endfor -%}
 {%- endmacro %}
@@ -409,7 +438,7 @@ params:
 
 
 {# @docs
-label: iframe
+label: _iframe
 category: Embed
 note: |
   Embed an iframe (most often used for videos).
@@ -429,7 +458,7 @@ params:
     default: none
     note: Span multiple columns of a gallery
 #}
-{% macro iframe(
+{% macro _iframe(
   src,
   width=none,
   height=none,
@@ -450,6 +479,7 @@ params:
   {{- ratio(width, height, span, content) | safe -}}
 {% endmacro %}
 
+
 {# @docs
 label: audio
 category: Embed
@@ -512,6 +542,7 @@ params:
   {%- endif -%}
 {%- endmacro %}
 
+
 {# @docs
 label: codepen
 category: Patterns
@@ -579,6 +610,7 @@ params:
   ) }}.</p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 {%- endmacro %}
 
+
 {# @docs
 label: caniuse
 category: Patterns

diff --git a/content/blog/2016/css-grid-layout.md b/content/blog/2016/css-grid-layout.md
@@ -20,6 +20,11 @@ after:
     title: Posts about CSS Grid Layout
     tag: CSS Grid
     id: css-grid-layout
+media:
+  iframe: 'https://player.vimeo.com/video/160593669'
+  height: 360
+  width: 640
+  caption: Taking Layout to the Next Level, by Christopher Wright
 ---
 
 {% import 'embed.macros.njk' as embed %}
@@ -226,9 +231,7 @@ demonstrating the *how*, *why* and *what* is possible when it comes to
 CSS Grid Layout. If you have any resources to share with us, we'd love
 to hear from you, too!
 
-{{ embed.video(
-  src='https://player.vimeo.com/video/160593669',
-  height=360,
-  width=640,
-  caption='Taking Layout to the Next Level, by Christopher Wright'
+{{ embed.figure(
+  data=[media],
+  caption=media.caption
 ) }}
diff --git a/content/blog/2017/css-day.md b/content/blog/2017/css-day.md
@@ -39,43 +39,43 @@ leading to her recent [SVG Animations] book from O'Reilly.
 
 ## Color Theory for people who code SVG and CSS by [Natalya Shelburne]
 
-{{ embed.video('https://www.youtube.com/embed/aq3u001QMcM') }}
+{{ embed.figure(data=[{ youtube: 'aq3u001QMcM' }]) }}
 
 - [Slides](https://docs.google.com/presentation/d/1ytSMRNpNrD9CWms351X4xelQuJT24tIqKnIzSbe2OQ0/edit?usp=sharing)
 
 [Natalya Shelburne]: https://twitter.com/natalyathree
 
 ## Applying the principles of functional programming to CSS by [Ben Adam]
 
-{{ embed.video('https://www.youtube.com/embed/7g0BHu0kWXo') }}
+{{ embed.figure(data=[{ youtube: '7g0BHu0kWXo' }]) }}
 
 - [Slides](https://css-day.surge.sh/)
 
 [Ben Adam]: https://twitter.com/benadam11
 
 ## Code Patterns for Pattern Making by [Miriam Suzanne]
 
-{{ embed.video('https://www.youtube.com/embed/lK_akjzOUY0') }}
+{{ embed.figure(data=[{ youtube: 'lK_akjzOUY0' }]) }}
 
 [Miriam Suzanne]: https://twitter.com/TerribleMia/
 
 ## The In-Betweeners of Responsive Web Design by [Pralie Dutzel]
 
-{{ embed.video('https://www.youtube.com/embed/WLAVc18Ugoc') }}
+{{ embed.figure(data=[{ youtube: 'WLAVc18Ugoc' }]) }}
 
 - [Slides](http://praliedutzel.com/talks/betweeners-responsive-web-design/)
 
 [Pralie Dutzel]: https://twitter.com/praliedutzel
 
 ## Style Guide-Driven Development: Documentation that Does Work by [Jan Jorgensen]
 
-{{ embed.video('https://www.youtube.com/embed/9Fknadsepd4') }}
+{{ embed.figure(data=[{ youtube: '9Fknadsepd4' }]) }}
 
 [Jan Jorgensen]: https://twitter.com/ramblinjan
 
 ## The Great State of Design by [Stacy Kvernmo]
 
-{{ embed.video('https://www.youtube.com/embed/pnbT4HdcSwM') }}
+{{ embed.figure(data=[{ youtube: 'pnbT4HdcSwM' }]) }}
 
 - [Slides](https://www.slideshare.net/Funstacy/the-great-state-of-design-with-css-grid-layout-and-friends)
 
@@ -94,7 +94,7 @@ jQuery to CSS for web and mobile applications.
 
 ## Solving CSS at scale with your own UI framework by [CJ Cenizal]
 
-{{ embed.video('https://www.youtube.com/embed/CbPYf9FslXw') }}
+{{ embed.figure(data=[{ youtube: 'CbPYf9FslXw' }]) }}
 
 [CJ Cenizal]: https://twitter.com/TheCJCenizal
 

diff --git a/content/blog/2022/shared-elements.md b/content/blog/2022/shared-elements.md
@@ -148,7 +148,7 @@ And earlier this year,
 presented a new proposal & prototype,
 which makes that possible!
 
-{{ embed.video('https://www.youtube.com/embed/JCJUPJ_zDQ4') }}
+{{ embed.figure(data=[{ youtube: 'JCJUPJ_zDQ4' }]) }}
 
 1. We can use the `page-transition-tag` property in CSS
    to give each element a name.
@@ -219,7 +219,7 @@ If you haven't encountered FLIP before,
 [Cassie Evans](https://www.cassie.codes/)
 is a great resource on the topic:
 
-{{ embed.video('https://www.youtube.com/embed/kUDMwy2OaK4') }}
+{{ embed.figure(data=[{ youtube: 'kUDMwy2OaK4' }]) }}
 
 Cassie also gave a brilliant talk at SmashingConf
 about FLIP animations in responsive design.
@@ -391,7 +391,11 @@ Here's the live demo on codepen:
 
 And a video of the animated results:
 
-{{ embed.video('2022/layer-page-transition.mov', height='1244', width='700') }}
+{{ embed.figure(
+  data=[{
+    video:'2022/layer-page-transition.mov'
+  }])
+}}
 
 You might also notice the `clip-path` animation on the list itself
 looks a bit janky.

diff --git a/content/blog/2023/components.md b/content/blog/2023/components.md
@@ -638,8 +638,7 @@ walking us through the steps:
 
 {{ embed.figure(
   data=[{
-    iframe: 'https://www.youtube.com/embed/R4Ri4ft7bXY',
-    title: 'The Good, The Bad, and The Web Components',
+    youtube: 'R4Ri4ft7bXY',
     span: 'full'
   }],
   caption='Hmmm, yeah. He already said it. I bet others have to. Why did I write this?'

diff --git a/content/blog/elsewhere/css-tricks/grids-video.md b/content/blog/elsewhere/css-tricks/grids-video.md
@@ -14,7 +14,7 @@ video:
   caption: |
     Exploring CSS Grids with Geoff Graham
   src:
-    - iframe: https://www.youtube.com/embed/5fkC6AG3XWU
+    - youtube: 5fkC6AG3XWU
 summary: |
   It feels like CSS Grid has been coming for a long time now,
   but it just now seems to be reaching a point

diff --git a/content/blog/elsewhere/design-engineering.md b/content/blog/elsewhere/design-engineering.md
@@ -20,8 +20,8 @@ action:
 image:
   src: blog/2020/inVision.png
 media:
-  - iframe: https://www.youtube.com/embed/B9yph7WJuXE
-  - iframe: https://www.youtube.com/embed/Er1qSLtu3v4
+  - youtube: B9yph7WJuXE
+  - youtube: Er1qSLtu3v4
 summary: |
   Learn how design engineering
   brings together form and function

diff --git a/content/blog/elsewhere/interview/podcast/fe-nerdery-10.md b/content/blog/elsewhere/interview/podcast/fe-nerdery-10.md
@@ -27,7 +27,7 @@ media:
     iframe: https://anchor.fm/frontendnerdery/embed/episodes/10---Miriam-Suzanne-e14kfst
     height: 102px
   - span: full
-    iframe: https://www.youtube.com/embed/vD7vJCckDGM
+    youtube: vD7vJCckDGM
 ---
 
 {% import "embed.macros.njk" as embed %}

diff --git a/content/blog/elsewhere/interview/podcast/js-party-166.md b/content/blog/elsewhere/interview/podcast/js-party-166.md
@@ -20,7 +20,7 @@ summary: |
   Play along while you listen (or watch).
   It’s JS Danger time, y’all!
 media:
-  - iframe: https://youtu.be/qDox5IVw74E
+  - youtube: qDox5IVw74E
 audio: https://cdn.changelog.com/uploads/jsparty/166/js-party-166.mp3
 ---
 

diff --git a/content/blog/elsewhere/interview/podcast/vue/thunder-nerds.md b/content/blog/elsewhere/interview/podcast/vue/thunder-nerds.md
@@ -17,7 +17,7 @@ media:
   - span: full
     audio: https://media.blubrry.com/thundernerds/s/thundernerds.s3.amazonaws.com/vueconf/206-miriam-suzanne-vueconf-us-2019.mp3
   - span: full
-    iframe: https://www.youtube.com/embed/2etlzLoV9xk
+    youtube: 2etlzLoV9xk
 ---
 
 {% import "embed.macros.njk" as embed %}

diff --git a/content/blog/elsewhere/interview/video/jina-ama.md b/content/blog/elsewhere/interview/video/jina-ama.md
@@ -13,7 +13,7 @@ tags:
 summary: |
   Jina and I answer questions about CSS, Sass, Design Systems, and more!
 media:
-  - iframe: https://www.youtube.com/embed/sCJbiOMl2qA
+  - youtube: sCJbiOMl2qA
 ---
 
 {% import "embed.macros.njk" as embed %}

diff --git a/content/blog/elsewhere/interview/video/learn-with-jason-cqs.md b/content/blog/elsewhere/interview/video/learn-with-jason-cqs.md
@@ -19,8 +19,8 @@ summary: |
   to teach and explore Container Queries
   in live code.
 media:
-  - iframe: https://www.youtube.com/embed/KVFU0pOIJLI
-  - iframe: https://www.youtube.com/embed/eTTdl5CZDlo
+  - youtube: KVFU0pOIJLI
+  - youtube: eTTdl5CZDlo
 ---
 
 {% import "embed.macros.njk" as embed %}

diff --git a/content/blog/elsewhere/interview/video/linkedin.md b/content/blog/elsewhere/interview/video/linkedin.md
@@ -20,7 +20,7 @@ summary: |
   and how they will change how we work with
   and think about the cascade in the future.
 media:
-  - iframe: https://www.youtube.com/embed/UmmePVi0TUk
+  - youtube: UmmePVi0TUk
 ---
 
 {% import "embed.macros.njk" as embed %}

diff --git a/content/blog/elsewhere/interview/video/pencilandpaper.md b/content/blog/elsewhere/interview/video/pencilandpaper.md
@@ -25,7 +25,7 @@ summary: |
   collab with their product team,
   and the end-user experience.
 media:
-  - iframe: https://www.youtube.com/embed/d9pa9fYhcjI
+  - youtube: d9pa9fYhcjI
 ---
 
 {% import "embed.macros.njk" as embed %}

diff --git a/content/blog/elsewhere/interview/video/state-of-frameworks.md b/content/blog/elsewhere/interview/video/state-of-frameworks.md
@@ -21,7 +21,7 @@ summary: |
   maintainable CSS in small teams and at scale,
   and what libraries and trends to investigate.
 media:
-  - iframe: https://www.youtube.com/embed/twc-iF40TJY
+  - youtube: twc-iF40TJY
 ---
 
 {% import "embed.macros.njk" as embed %}

diff --git a/content/blog/elsewhere/mozdev/css-is-weird.md b/content/blog/elsewhere/mozdev/css-is-weird.md
@@ -22,7 +22,7 @@ summary: |
   and nothing like the design programs we use for print.
   How did we get here?
 media:
-  - iframe: https://www.youtube.com/embed/aHUtMbJw8iA
+  - youtube: aHUtMbJw8iA
     slug: css-is-weird
 ---
 

diff --git a/content/blog/elsewhere/mozdev/display-multi.md b/content/blog/elsewhere/mozdev/display-multi.md
@@ -16,7 +16,7 @@ summary: |
   Now the `display` syntax is getting an upgrade
   to match it's multiple uses.
 media:
-  - iframe: https://www.youtube.com/embed/4Clyc38U-MA
+  - youtube: 4Clyc38U-MA
 ---
 
 {% import "embed.macros.njk" as embed %}