oddbird · jamesnw · Jan 12, 2024 · Dec 22, 2023 · Jan 2, 2024 · Jan 2, 2024
diff --git a/content/_includes/embed.macros.njk b/content/_includes/embed.macros.njk
@@ -190,6 +190,8 @@ params:
       {{- iframe(item.iframe, item.width, item.height, item.span) -}}
     {%- elif item.audio -%}
       {{- audio(item.audio, item.span) -}}
+    {%- elif item.youtube -%}
+      {{- youtube(item.youtube, item.span) -}}
     {%- endif -%}
   {%- endfor -%}
 {%- endmacro %}
@@ -450,6 +452,7 @@ params:
   {{- ratio(width, height, span, content) | safe -}}
 {% endmacro %}
 
+
 {# @docs
 label: audio
 category: Embed
@@ -474,6 +477,25 @@ params:
 {%- endmacro %}
 
 
+{# @docs
+label: youtube
+category: Embed
+note: Embed a video from Youtube
+params:
+  id:
+    type: string
+#}
+{% macro youtube(
+  id
+) -%}
+    <is-land on:visible>
+      <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 %}
+
+
 {# @docs
 label: ratio
 category: Layout
@@ -512,6 +534,7 @@ params:
   {%- endif -%}
 {%- endmacro %}
 
+
 {# @docs
 label: codepen
 category: Patterns
@@ -579,6 +602,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/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.

diff --git a/content/blog/2023/components.md b/content/blog/2023/components.md
@@ -638,7 +638,7 @@ walking us through the steps:
 
 {{ embed.figure(
   data=[{
-    iframe: 'https://www.youtube.com/embed/R4Ri4ft7bXY',
+    youtube: 'R4Ri4ft7bXY',
     title: 'The Good, The Bad, and The Web Components',
     span: 'full'
   }],

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/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/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/wingingit/winging-it-01.md b/content/blog/wingingit/winging-it-01.md
@@ -13,7 +13,7 @@ length: 40 mins
 image:
   src: winging-it/winging-it-1.jpg
 media:
-  - iframe: https://www.youtube.com/embed/FwICaSE8iuY
+  - youtube: FwICaSE8iuY
 summary: |
   If you've ever found yourself in a specificity war, you'll understand how
   important having control over style priority can be. During our conversation,

diff --git a/content/blog/wingingit/winging-it-02.md b/content/blog/wingingit/winging-it-02.md
@@ -13,7 +13,7 @@ length: 28 mins
 image:
   src: winging-it/winging-it-2.jpg
 media:
-  - iframe: https://www.youtube.com/embed/q44bvgbpgrY
+  - youtube: q44bvgbpgrY
 summary: |
   During our conversation, we discuss what htmx is, how it improves user
   experience, and walk through some examples of common UI patterns using htmx.

diff --git a/content/blog/wingingit/winging-it-03.md b/content/blog/wingingit/winging-it-03.md
@@ -13,7 +13,7 @@ length: 32 mins
 image:
   src: winging-it/winging-it-3.jpg
 media:
-  - iframe: https://www.youtube.com/embed/wk5tFSqYVzs
+  - youtube: wk5tFSqYVzs
 summary: |
   During our conversation we look at 3 examples of unintuitive web design, and
   learn how to create websites and apps that are more intuitive using

diff --git a/content/blog/wingingit/winging-it-04.md b/content/blog/wingingit/winging-it-04.md
@@ -14,7 +14,7 @@ length: 30 mins
 image:
   src: winging-it/winging-it-4.jpg
 media:
-  - iframe: https://www.youtube.com/embed/vvjfuFhVV1M
+  - youtube: vvjfuFhVV1M
 summary: |
   An object map is a place to document information about objects in your digital
   system, keeping everyone involved on the same page. During our conversation,

diff --git a/content/blog/wingingit/winging-it-05.md b/content/blog/wingingit/winging-it-05.md
@@ -12,7 +12,7 @@ length: 30 mins
 image:
   src: winging-it/winging-it-5.jpg
 media:
-  - iframe: https://www.youtube.com/embed/wk5tFSqYVzs
+  - youtube: wk5tFSqYVzs
 summary: |
   An object map is a place to document information about objects in your digital
   system, keeping everyone involved on the same page. During our conversation,

diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "@11ty/eleventy-img": "^3.1.8",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "@11ty/is-land": "^4.0.0",
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
     "@netlify/plugin-a11y": "^1.0.0-beta.1",
@@ -87,6 +88,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "js-yaml": "^4.1.0",
+    "lite-youtube-embed": "^0.3.0",
     "lodash": "^4.17.21",
     "markdown-it": "^14.0.0",
     "markdown-it-anchor": "^8.6.7",

diff --git a/src/js/index.js b/src/js/index.js
@@ -1,3 +1,6 @@
+import '@11ty/is-land';
+import 'lite-youtube-embed';
+
 import algoliasearchNetlify from '@algolia/algoliasearch-netlify-frontend/dist/algoliasearchNetlify';
 import ccs from 'cascading-color-systems';
 

diff --git a/src/scss/config/_index.scss b/src/scss/config/_index.scss
@@ -19,6 +19,7 @@
 @use 'scale/page-sizes';
 @use 'scale/spacing-sizes';
 @use 'scale/theme-sizes';
+@use '~lite-youtube-embed/src/lite-yt-embed.css';
 @include tools.add-colors(meta.module-variables('brand'));
 @include tools.add-colors(meta.module-variables('background'));
 @include tools.add-colors(meta.module-variables('ccs-defaults'));

diff --git a/src/scss/patterns/_gallery.scss b/src/scss/patterns/_gallery.scss
@@ -40,6 +40,11 @@ figure {
     grid-column: var(--span, initial);
     width: var(--width, 100%);
   }
+
+  // Override vendor max width
+  lite-youtube {
+    max-width: 100%;
+  }
 }
 
 figcaption,

diff --git a/yarn.lock b/yarn.lock
@@ -143,6 +143,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@11ty/is-land@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@11ty/is-land@npm:4.0.0"
+  checksum: f5775359cb20bcb8e2afa11496cbc829691f3eb52619754701ec74f50e2cfab48fba00afd28b32ea21136aaeb911612cd9e1a89b147ff6f06fcf81c214bf590d
+  languageName: node
+  linkType: hard
+
 "@11ty/lodash-custom@npm:^4.17.21":
   version: 4.17.21
   resolution: "@11ty/lodash-custom@npm:4.17.21"
@@ -7972,6 +7979,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lite-youtube-embed@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "lite-youtube-embed@npm:0.3.0"
+  checksum: bbfbdee2c1c0515f107f1ef019be2f2ed67e122eaa88ec1141ef43b1923b6ecf4fc84dc95ab943fec23311b9248144cbae4bd1c67d152cac90744a3abd88ca20
+  languageName: node
+  linkType: hard
+
 "load-json-file@npm:^4.0.0":
   version: 4.0.0
   resolution: "load-json-file@npm:4.0.0"
@@ -9228,6 +9242,7 @@ __metadata:
     "@11ty/eleventy-img": ^3.1.8
     "@11ty/eleventy-plugin-rss": ^1.2.0
     "@11ty/eleventy-plugin-syntaxhighlight": ^5.0.0
+    "@11ty/is-land": ^4.0.0
     "@algolia/algoliasearch-netlify-frontend": ^1.0.15
     "@babel/core": ^7.23.7
     "@babel/preset-env": ^7.23.7
@@ -9261,6 +9276,7 @@ __metadata:
     jest: ^29.7.0
     jest-environment-jsdom: ^29.7.0
     js-yaml: ^4.1.0
+    lite-youtube-embed: ^0.3.0
     lodash: ^4.17.21
     markdown-it: ^14.0.0
     markdown-it-anchor: ^8.6.7