Lite Youtube

content/_includes/embed.macros.njk

@@ -147,7 +147,16 @@ params:
   width=none,
   caption=none
 ) %}
-  {%- if '://' in src -%}
+  {%- if 'https://www.youtube.com/embed/' in src -%}
+    {% call figure(caption=caption) %}
+      <is-land on:visible>
+        {%- set id = src.replace('https://www.youtube.com/embed/', '') -%}
+        <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>
+    {% endcall %}
+  {%- elif '://' in src -%}
     {{ figure(
       data=[{
         'iframe': src,
@@ -450,6 +459,7 @@ params:
   {{- ratio(width, height, span, content) | safe -}}
 {% endmacro %}
 
+
 {# @docs
 label: audio
 category: Embed
@@ -512,6 +522,7 @@ params:
   {%- endif -%}
 {%- endmacro %}
 
+
 {# @docs
 label: codepen
 category: Patterns
@@ -579,6 +590,7 @@ params:
   ) }}.</p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 {%- endmacro %}
 
+
 {# @docs
 label: caniuse
 category: Patterns

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",

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';
 

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'));

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,

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