diff --git a/content/_includes/embed.macros.njk b/content/_includes/embed.macros.njk
index fc026d960..164cb6584 100644
--- 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
index 6cfb99b90..7fe106c8c 100644
--- 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
index f2f4666df..fb3f8c5a4 100644
--- a/content/blog/2017/css-day.md
+++ b/content/blog/2017/css-day.md
@@ -39,7 +39,7 @@ 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)
 
@@ -47,7 +47,7 @@ leading to her recent [SVG Animations] book from O'Reilly.
 
 ## 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/)
 
@@ -55,13 +55,13 @@ leading to her recent [SVG Animations] book from O'Reilly.
 
 ## 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/)
 
@@ -69,13 +69,13 @@ leading to her recent [SVG Animations] book from O'Reilly.
 
 ## 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
index 60cb65a5f..8819b4794 100644
--- 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
index 967e8e199..97e15630b 100644
--- 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
index 5888f42c7..c6ef6fbbf 100644
--- 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
index 8e688e1e6..a5c83d012 100644
--- 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
index b8b4bb09d..52d9be046 100644
--- 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
index 9e77cc23a..e71b9438d 100644
--- 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
index f8375e224..bd85d4590 100644
--- 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
index 9d8b76c86..e86a33f07 100644
--- 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
index 620380fe4..f596d706a 100644
--- 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
index 56b11a2b9..adb4a2bb4 100644
--- 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
index 0d07b9e68..9379f5440 100644
--- 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
index b0148852b..c2ee703a6 100644
--- 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
index fa34177df..a1a6ad17a 100644
--- 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
index f6e5710e5..3bf0fbd41 100644
--- 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 %}
diff --git a/content/blog/elsewhere/mozdev/grids.md b/content/blog/elsewhere/mozdev/grids.md
index 7f54c4095..d6b7e3220 100644
--- a/content/blog/elsewhere/mozdev/grids.md
+++ b/content/blog/elsewhere/mozdev/grids.md
@@ -17,7 +17,7 @@ summary: |
   and you can start using it now,
   with only a few properties and basic concepts.
 media:
-  - iframe: https://www.youtube.com/embed/KOvGeFUHAC0
+  - youtube: KOvGeFUHAC0
     slug: fast-grids
 ---
 
diff --git a/content/blog/elsewhere/mozdev/inactive-css.md b/content/blog/elsewhere/mozdev/inactive-css.md
index 3532912fa..c0afebdca 100644
--- a/content/blog/elsewhere/mozdev/inactive-css.md
+++ b/content/blog/elsewhere/mozdev/inactive-css.md
@@ -16,7 +16,7 @@ summary: |
   Open the developer tools,
   and look for the greyed-out property with an info-box on hover.
 media:
-  - iframe: https://www.youtube.com/embed/O3DAm82vIvU
+  - youtube: O3DAm82vIvU
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/elsewhere/mozdev/list-marker.md b/content/blog/elsewhere/mozdev/list-marker.md
index f0f84d10d..d5ea3fdc3 100644
--- a/content/blog/elsewhere/mozdev/list-marker.md
+++ b/content/blog/elsewhere/mozdev/list-marker.md
@@ -14,7 +14,7 @@ summary: |
   Now CSS gives us the tools to style those list markers,
   and even create our own!
 media:
-  - iframe: https://www.youtube.com/embed/2awepiNoaZI
+  - youtube: 2awepiNoaZI
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/elsewhere/mozdev/mozdev.md b/content/blog/elsewhere/mozdev/mozdev.md
index 0b32f0faf..3751bb0d7 100644
--- a/content/blog/elsewhere/mozdev/mozdev.md
+++ b/content/blog/elsewhere/mozdev/mozdev.md
@@ -16,20 +16,20 @@ darkmode:
     Dark mode is all the rage, with iOS, macOS, Android and others
     all shipping a system-wide dark mode for people's devices.
   media:
-    - iframe: https://www.youtube.com/embed/jmepqJ5UbuM
+  - youtube: jmepqJ5UbuM
 inspector:
   caption: |
     Use that third pane to quickly access
     the Grid or Flexbox Inspectors, the Font Editor,
     the Animations Tools, Tracked Changes, and more.
   media:
-    - iframe: https://www.youtube.com/embed/N6aMLUZ
+  - youtube: N6aMLUZ-v3w
 markers:
   caption: |
     Style list markers,
     and add your own counters!
   media:
-    - iframe: https://www.youtube.com/embed/2awepiNoaZI
+  - youtube: 2awepiNoaZI
 summary: |
   Over the summer, we've been working with Mozilla
   to help create a new resource for web professionals like us --
diff --git a/content/blog/elsewhere/mozdev/overflow-wrap.md b/content/blog/elsewhere/mozdev/overflow-wrap.md
index 5e4bfddc9..d32b8b22d 100644
--- a/content/blog/elsewhere/mozdev/overflow-wrap.md
+++ b/content/blog/elsewhere/mozdev/overflow-wrap.md
@@ -16,7 +16,7 @@ summary: |
   no matter the size of a containing box,
   but it's not our only option.
 media:
-  - iframe: https://www.youtube.com/embed/UOKQ6gw21NA
+  - youtube: UOKQ6gw21NA
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/elsewhere/mozdev/revert.md b/content/blog/elsewhere/mozdev/revert.md
index 51a1c5d74..bd800ca19 100644
--- a/content/blog/elsewhere/mozdev/revert.md
+++ b/content/blog/elsewhere/mozdev/revert.md
@@ -19,7 +19,7 @@ summary: |
   But then Firefox implemented `revert` and I was confused --
   how is this one different from the others?
 media:
-  - iframe: https://www.youtube.com/embed/GAjoVRmipcU
+  - youtube: GAjoVRmipcU
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/elsewhere/mozdev/scroll-snap.md b/content/blog/elsewhere/mozdev/scroll-snap.md
index ed2a648a1..5680c8633 100644
--- a/content/blog/elsewhere/mozdev/scroll-snap.md
+++ b/content/blog/elsewhere/mozdev/scroll-snap.md
@@ -18,7 +18,7 @@ summary: |
   but now we can manage scroll alignment directly in CSS
   with only a few lines of code.
 media:
-  - iframe: https://www.youtube.com/embed/pohyK8iz-SQ
+  - youtube: pohyK8iz-SQ
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/elsewhere/mozdev/shape-editor.md b/content/blog/elsewhere/mozdev/shape-editor.md
index c9df30c05..d54175c9f 100644
--- a/content/blog/elsewhere/mozdev/shape-editor.md
+++ b/content/blog/elsewhere/mozdev/shape-editor.md
@@ -14,7 +14,7 @@ summary: |
   code without a visual reference, but Firefox provides a shape editor to
   make it quick and clear.
 media:
-  - iframe: https://www.youtube.com/embed/u9bDe3Bw0sA
+  - youtube: u9bDe3Bw0sA
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/elsewhere/mozdev/subgrid-cards.md b/content/blog/elsewhere/mozdev/subgrid-cards.md
index fd54e56c0..2a9c4095c 100644
--- a/content/blog/elsewhere/mozdev/subgrid-cards.md
+++ b/content/blog/elsewhere/mozdev/subgrid-cards.md
@@ -15,7 +15,7 @@ summary: |
   but it's still be hard to line-up content inside the cards --
   headers and footers that might need more or less room.
 media:
-  - iframe: https://www.youtube.com/embed/lLnFtK1LNu4
+  - youtube: lLnFtK1LNu4
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/elsewhere/mozdev/subgrid-forms.md b/content/blog/elsewhere/mozdev/subgrid-forms.md
index c56386d84..837a3f312 100644
--- a/content/blog/elsewhere/mozdev/subgrid-forms.md
+++ b/content/blog/elsewhere/mozdev/subgrid-forms.md
@@ -14,7 +14,7 @@ summary: |
   I'll show you how to do it quickly using CSS subgrid,
   with several quick fallbacks.
 media:
-  - iframe: https://www.youtube.com/embed/gmQlK3kRft4
+  - youtube: gmQlK3kRft4
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/elsewhere/mozdev/supports-selector.md b/content/blog/elsewhere/mozdev/supports-selector.md
index a49414c7d..15fa6d0c2 100644
--- a/content/blog/elsewhere/mozdev/supports-selector.md
+++ b/content/blog/elsewhere/mozdev/supports-selector.md
@@ -14,7 +14,7 @@ summary: |
   other browsers are following suit. I'll show you how it works, and how
   to start using this new feature query right away.
 media:
-  - iframe: https://www.youtube.com/embed/WjvJheGhHIQ
+  - youtube: WjvJheGhHIQ
 ---
 
 {% import "embed.macros.njk" as embed %}
diff --git a/content/blog/wingingit/winging-it-01.md b/content/blog/wingingit/winging-it-01.md
index 4b46bdcca..693431504 100644
--- 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
index cf7ff15f0..61f46ab12 100644
--- 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
index 1393d3467..e6770c767 100644
--- 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
index 71763a585..421a8e4dc 100644
--- 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
index ff2eb9e1f..4b75411e0 100644
--- 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/content/talks/11ty-slides.md b/content/talks/11ty-slides.md
index eebd31c11..ffc3a6725 100644
--- a/content/talks/11ty-slides.md
+++ b/content/talks/11ty-slides.md
@@ -18,7 +18,7 @@ events:
     date: 2021-11-11
     video: https://www.youtube.com/video/JKdF8iqEFbg
     media: &jstack
-      iframe: https://www.youtube.com/embed/JKdF8iqEFbg
+      - youtube: JKdF8iqEFbg
 summary: |
   An event featuring works based around the Eleventy framework is back.
   I show how I used Eleventy
diff --git a/content/talks/automated-testing.md b/content/talks/automated-testing.md
index fcd817ab3..e66385937 100644
--- a/content/talks/automated-testing.md
+++ b/content/talks/automated-testing.md
@@ -15,7 +15,7 @@ events:
     adr: Santa Clara, CA
     slides: https://oddbird.github.io/start-testing-preso/
     media: &pycon
-      iframe: https://www.youtube.com/embed/ukm64IUANwE
+      - youtube: ukm64IUANwE
 summary: |
   **The hardest part of testing is getting the ball rolling.** Once you've
   picked your tools and started writing tests, the added confidence you
diff --git a/content/talks/cascade-aligned.md b/content/talks/cascade-aligned.md
index 08e9b7186..ab758929f 100644
--- a/content/talks/cascade-aligned.md
+++ b/content/talks/cascade-aligned.md
@@ -17,7 +17,7 @@ events:
     slides: https://slides.oddbird.net/cascade-aligned/front-range20/
     video: https://www.youtube.com/watch?v=-wlokRJRepY
     media: &frfe
-      iframe: https://www.youtube.com/embed/-wlokRJRepY
+      - youtube: -wlokRJRepY
 media:
   - span: full
     <<: *frfe
diff --git a/content/talks/code-patterns.md b/content/talks/code-patterns.md
index 6a4165ea4..ece105733 100644
--- a/content/talks/code-patterns.md
+++ b/content/talks/code-patterns.md
@@ -37,14 +37,14 @@ events:
     # slides: https://oddbooksapp.com/release/1f08a0cb-198f-4c5f-ac85-93e55daa471d
     video: https://www.youtube.com/video/lK_akjzOUY0
     media: &cssday
-      iframe: https://www.youtube.com/embed/lK_akjzOUY0
+      - youtube: lK_akjzOUY0
   - venue: CascadiaFest
     url: https://2016.cascadiajs.com/
     date: 2016-08-03
     # slides: https://oddbooksapp.com/release/3964dd55-982a-4171-a46b-6dd0354eac27
     video: https://www.youtube.com/video/cVZreFHgLFw
     media: &cascadia
-      iframe: https://www.youtube.com/embed/cVZreFHgLFw
+      - youtube: cVZreFHgLFw
   - venue: CSS Summit
     date: 2016-07-26
     # slides: https://oddbooksapp.com/release/1f76aa54-df02-4f83-8a7b-c54e1c745fbf
@@ -59,7 +59,7 @@ events:
     # slides: https://oddbooksapp.com/release/ab1987b6-7d5f-42e4-b0ff-e7312cb345f6
     video: https://www.youtube.com/video/yM6wfkbZkAY
     media: &clarity
-      iframe: https://www.youtube.com/embed/yM6wfkbZkAY
+      - youtube: yM6wfkbZkAY
 summary: |
   **Style Guides & Pattern Libraries are great tools**
   for documenting the relationships between code and design,
diff --git a/content/talks/containers.md b/content/talks/containers.md
index 38cd4f13f..a64afbca6 100644
--- a/content/talks/containers.md
+++ b/content/talks/containers.md
@@ -28,7 +28,7 @@ events:
     slides: https://slides.oddbird.net/cq/smashingde/
     video: https://www.youtube.com/video/TxtTXDXcRp8
     media: &smashde
-      iframe: https://www.youtube.com/embed/TxtTXDXcRp8
+      - youtube: TxtTXDXcRp8
   - venue: CSS Day
     url: https://cssday.nl/2023
     adr: Amsterdam, Netherlands
@@ -37,7 +37,7 @@ events:
     slides: https://slides.oddbird.net/cq/cssday/
     video: https://www.youtube.com/live/-Fw8GSksUIo
     media: &cssday
-      iframe: https://www.youtube.com/embed/-Fw8GSksUIo
+      - youtube: -Fw8GSksUIo
   - venue: Smashing Conf
     url: https://smashingconf.com/sf-2023/
     adr: San Francisco
@@ -46,7 +46,7 @@ events:
     slides: https://slides.oddbird.net/cq/smashingsf/
     video: https://www.youtube.com/video/IPyBr289pHY
     media: &smashsf
-      iframe: https://www.youtube.com/embed/IPyBr289pHY
+      - youtube: IPyBr289pHY
 summary: |
   How did container queries go
   from ‘impossible’ to ‘shipping’ after so many years?
diff --git a/content/talks/css-is-rad.md b/content/talks/css-is-rad.md
index 8578b4602..a6887f935 100644
--- a/content/talks/css-is-rad.md
+++ b/content/talks/css-is-rad.md
@@ -19,7 +19,7 @@ events:
     slides: https://slides.oddbird.net/rad/design4drupal/
     video: https://youtu.be/JTzYGWYjQdg
     media: &d4d
-      iframe: https://www.youtube.com/embed/JTzYGWYjQdg
+      youtube: JTzYGWYjQdg
   - venue: SmashingConf Live
     url: https://smashingconf.com/live/
     date: 2020-08-20
@@ -28,7 +28,7 @@ events:
     slides: https://slides.oddbird.net/rad/smashing20/
     video: https://youtu.be/oV5ddsmqvk0
     media: &smashlive
-      iframe: https://www.youtube.com/embed/oV5ddsmqvk0
+      youtube: oV5ddsmqvk0
   - venue: Shopify UX Summer Series
     url: /work/shopify/
     date: 2020-08-15
@@ -40,9 +40,7 @@ events:
     video: https://youtu.be/bSITeqDKkb8
     slides: https://slides.oddbird.net/css-is-rad/
     media: &frfe
-      iframe: https://www.youtube.com/embed/bSITeqDKkb8
-      width: 560
-      height: 315
+      youtube: bSITeqDKkb8
   - venue: Smashing Conf NY
     url: https://smashingconf.com/ny-2019/
     date: 2019-10-15
diff --git a/content/talks/dynamic-css.md b/content/talks/dynamic-css.md
index c1b16ac98..a87f67df4 100644
--- a/content/talks/dynamic-css.md
+++ b/content/talks/dynamic-css.md
@@ -27,7 +27,7 @@ events:
     video: https://www.youtube.com/watch?v=JnvkjhwcMcM
     slides: https://talks.oddbird.net/dynamic-css/dvlpdnvr19/
     media: &dvlp
-      iframe: https://www.youtube.com/embed/JnvkjhwcMcM
+      youtube: JnvkjhwcMcM
   - venue: Generate New York
     url: https://www.generateconf.com/
     adr: San Francisco, CA
@@ -36,7 +36,7 @@ events:
     slides: https://talks.oddbird.net/dynamic-css/generate19/
     video: https://www.youtube.com/watch?v=oXEsYwtTT6I
     media: &generate
-      iframe: https://www.youtube.com/embed/oXEsYwtTT6I
+      youtube: oXEsYwtTT6I
   - venue: Smashing Conf
     url: https://smashingconf.com/sf-2019/
     adr: San Francisco, CA
@@ -66,14 +66,14 @@ events:
     slides: https://talks.oddbird.net/dynamic-css/fullstack18/
     video: https://youtu.be/9fTUeLsR2Hc
     media: &fsfest
-      iframe: https://www.youtube.com/embed/9fTUeLsR2Hc
+      youtube: 9fTUeLsR2Hc
   - venue: JSConf US
     adr: Carlsbad, CA
     date: 2018-08-21
     slides: https://talks.oddbird.net/dynamic-css/jsconfus18/
     video: https://www.youtube.com/watch?v=uwgBz748t-g
     media: &jsconf
-      iframe: https://www.youtube.com/embed/uwgBz748t-g
+      youtube: uwgBz748t-g
   - venue: CSSConf Argentina
     url: https://cssconfar.com/
     adr: Buenos Aires, Argentina
diff --git a/content/talks/intrinsic-web.md b/content/talks/intrinsic-web.md
index 3ba895b05..f84ca73b3 100644
--- a/content/talks/intrinsic-web.md
+++ b/content/talks/intrinsic-web.md
@@ -28,7 +28,7 @@ events:
     slides: https://slides.oddbird.net/css-next/smashingsf/
     video: https://youtu.be/QL3tFZLgVxU
     media: &smash
-      iframe: https://www.youtube.com/embed/QL3tFZLgVxU
+      youtube: QL3tFZLgVxU
   - venue: An Event Apart Fall Summit
     url: https://aneventapart.com/event/fall-summit-2021
     date: 2021-10-11
diff --git a/content/talks/no-grid-system.md b/content/talks/no-grid-system.md
index 74e1d3e2c..49d847406 100644
--- a/content/talks/no-grid-system.md
+++ b/content/talks/no-grid-system.md
@@ -30,7 +30,7 @@ events:
     # slides: https://oddbooksapp.com/release/ce37ef91-8bd8-43e2-932a-66931b4b25ce
     video: https://youtu.be/iODambgMZhk
     media: &bt
-      iframe: https://www.youtube.com/embed/iODambgMZhk
+      youtube: iODambgMZhk
   - venue: Clarity
     url: https://www.clarityconf.com/event/2017
     adr: San Francisco, CA
@@ -38,7 +38,7 @@ events:
     # slides: https://oddbooksapp.com/release/ae641b90-8efa-4b1e-8da8-16940edf420d
     video: https://youtu.be/DZrDSdTekI4
     media: &clarity
-      iframe: https://www.youtube.com/embed/DZrDSdTekI4
+      youtube: DZrDSdTekI4
   - venue: CSS Dev Conf
     adr: New Orleans, LA
     date: 2017-10-09
@@ -50,7 +50,7 @@ events:
     # slides: https://oddbooksapp.com/book/djangocon-layout
     video: https://youtu.be/mDRfFEcj3-Q
     media: &django
-      iframe: https://www.youtube.com/embed/mDRfFEcj3-Q
+      youtube: mDRfFEcj3-Q
   - venue: Women Who Code Fort Collins
     url: https://www.meetup.com/Women-Who-Code-Fort-Collins/events/242033627/
     adr: Fort Collins, CO
diff --git a/content/talks/queries-units.md b/content/talks/queries-units.md
index 1a2c0fd45..27d4fce32 100644
--- a/content/talks/queries-units.md
+++ b/content/talks/queries-units.md
@@ -25,7 +25,7 @@ events:
     slides: https://noti.st/mirisuzanne/Xj6q9g/intrinsic-css-with-container-queries-units
     video: https://youtu.be/uumZV98zHt8
     media: &jam
-      iframe: https://www.youtube.com/embed/uumZV98zHt8
+      youtube: uumZV98zHt8
   - venue: W3C Developer Meetup
     adr: Vancouver, Canada
     url: https://www.w3.org/2022/09/meetup/
@@ -34,7 +34,7 @@ events:
     video: https://youtu.be/1VhCXu-gNAc
     slides: https://slides.oddbird.net/queries-units/tpac22/
     media: &tpac
-      iframe: https://www.youtube.com/embed/1VhCXu-gNAc
+      youtube: 1VhCXu-gNAc
 media:
   - <<: *jam
   - <<: *tpac
diff --git a/content/talks/responsive-components.md b/content/talks/responsive-components.md
index 5373c284b..1748b7345 100644
--- a/content/talks/responsive-components.md
+++ b/content/talks/responsive-components.md
@@ -38,14 +38,14 @@ events:
     slides: https://slides.oddbird.net/css-next/css-cafe/
     video: https://youtu.be/ilR9KlsHMGk
     media: &csscafe
-      iframe: https://www.youtube.com/embed/ilR9KlsHMGk
+      youtube: ilR9KlsHMGk
   - venue: Front Range Front-End
     date: 2021-06-03
     adr: Online
     slides: https://slides.oddbird.net/css-next/front-range/
     video: https://youtu.be/GuMvZuUrJaY
     media: &frfe
-      iframe: https://www.youtube.com/embed/GuMvZuUrJaY
+      youtube: GuMvZuUrJaY
   - venue: Front-end Development South Africa
     url: https://www.meetup.com/fedsa-community/events/276328093/
     date: 2021-05-05
@@ -53,7 +53,7 @@ events:
     slides: https://slides.oddbird.net/css-next/fedsa/
     video: https://youtu.be/lh1_zKk1qAk
     media: &fedsa
-      iframe: https://www.youtube.com/embed/lh1_zKk1qAk
+      youtube: lh1_zKk1qAk
   - venue: Web Directions, Hover
     url: https://webdirections.org/hover/
     date: 2021-04-23
diff --git a/content/talks/sass-map-magic.md b/content/talks/sass-map-magic.md
index 4261373d7..f0c0fd6c6 100644
--- a/content/talks/sass-map-magic.md
+++ b/content/talks/sass-map-magic.md
@@ -15,7 +15,7 @@ events:
     # slides: https://oddbooksapp.com/release/b71e6e5d-e956-42ff-a4dd-b70bf3b13a2a
     video: https://www.youtube.com/video/MdwtoFt2LOI
     media: &cssconf
-      iframe: https://www.youtube.com/embed/MdwtoFt2LOI
+      youtube: MdwtoFt2LOI
   - venue: CSS Summit
     adr: Online
     date: 2015-07-07
diff --git a/content/talks/set-your-code-free.md b/content/talks/set-your-code-free.md
index ad3d3c4a6..8a055b3d6 100644
--- a/content/talks/set-your-code-free.md
+++ b/content/talks/set-your-code-free.md
@@ -13,7 +13,7 @@ events:
     date: 2014-04-13
     slides: https://oddbird.github.io/set-your-code-free-preso/
     media:
-      iframe: https://www.youtube.com/embed/nHWRN5gCPSI
+      youtube: nHWRN5gCPSI
 summary: |
   **Got some code that you've written that would be useful to others**,
   but actually releasing it feels like too much new stuff to figure out?
diff --git a/content/talks/state-of-design.md b/content/talks/state-of-design.md
index 7f3758464..dcc49203f 100644
--- a/content/talks/state-of-design.md
+++ b/content/talks/state-of-design.md
@@ -20,7 +20,7 @@ events:
     adr: Chandler, AZ
     slides: https://www.slideshare.net/Funstacy/the-great-state-of-design-with-css-grid-layout-and-friends
     media:
-      iframe: https://www.youtube.com/embed/pnbT4HdcSwM
+      youtube: pnbT4HdcSwM
     post: /2017/01/31/css-day
 summary: |
   **For far too long we've been forced to reuse layout patterns** that
diff --git a/content/talks/testing-django.md b/content/talks/testing-django.md
index ea1b70189..ebe03cc69 100644
--- a/content/talks/testing-django.md
+++ b/content/talks/testing-django.md
@@ -13,7 +13,7 @@ events:
     date: 2012-03-10
     adr: Santa Clara, CA
     media:
-      iframe: https://www.youtube.com/embed/ickNQcNXiS4
+      youtube: ickNQcNXiS4
 summary: |
   Django has a fair bit of custom test code: a custom TestSuiteRunner,
   custom TestCase subclasses, some test-only monkeypatches to core Django
diff --git a/content/talks/user-unfriendly.md b/content/talks/user-unfriendly.md
index 4f96f76e2..bbfb0f010 100644
--- a/content/talks/user-unfriendly.md
+++ b/content/talks/user-unfriendly.md
@@ -31,7 +31,7 @@ events:
     slides: https://talks.oddbird.net/user-unfriendly/design4drupal19/
     video: https://www.youtube.com/video/2MkQBQb43gE
     media: &drupal
-      iframe: https://www.youtube.com/embed/2MkQBQb43gE
+      youtube: 2MkQBQb43gE
   - venue: Open Source Conference
     adr: Denver, CO
     date: 2019-06-20
diff --git a/content/talks/wordpress-block-enhancements.md b/content/talks/wordpress-block-enhancements.md
index 26165b583..5544be8c5 100644
--- a/content/talks/wordpress-block-enhancements.md
+++ b/content/talks/wordpress-block-enhancements.md
@@ -19,7 +19,7 @@ events:
     adr: Online
     video: https://www.youtube.com/video/sFAegaqfJF4
     media: &wpdemo
-      iframe: https://www.youtube.com/embed/sFAegaqfJF4
+      youtube: sFAegaqfJF4
 summary: |
   Adding a few customizations to the WordPress Block Editor can help
   maintain a consistent look and make it easier to re-use custom block
diff --git a/package.json b/package.json
index 9f4930e17..3323b526f 100644
--- 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
index 2cc7ebe7d..26e39ecce 100644
--- 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
index d7b4e527b..c56e2cf0a 100644
--- 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
index c4cbbe27e..1d6dae68a 100644
--- a/src/scss/patterns/_gallery.scss
+++ b/src/scss/patterns/_gallery.scss
@@ -35,11 +35,23 @@ figure {
     width: 100%;
   }
 
+  iframe,
+  canvas,
+  video,
+  audio {
+    margin-bottom: 0;
+  }
+
   [style] {
     align-self: var(--align);
     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
index 7c893b2e5..7a5fe7dd7 100644
--- 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