Use lite-youtube-embed for YouTube embeds

package-lock.json

@@ -11,7 +11,8 @@
         "@fortawesome/fontawesome-free": "^6.1.1",
         "bulma": "^0.9.4",
         "darkreader": "^4.9.51",
-        "elevator.js": "^1.0.1"
+        "elevator.js": "^1.0.1",
+        "lite-youtube-embed": "^0.2.0"
       },
       "devDependencies": {
         "esbuild": "^0.14.43",
@@ -1070,6 +1071,11 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "node_modules/lite-youtube-embed": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/lite-youtube-embed/-/lite-youtube-embed-0.2.0.tgz",
+      "integrity": "sha512-XXXAk5sbvtjjwbie3XG+6HppgTm1HTGL/Uk9z9NkJH53o7puZLur434heHzAjkS60hZB3vT4ls25zl5rMiX4EA=="
+    },
     "node_modules/load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -2267,6 +2273,11 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "lite-youtube-embed": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/lite-youtube-embed/-/lite-youtube-embed-0.2.0.tgz",
+      "integrity": "sha512-XXXAk5sbvtjjwbie3XG+6HppgTm1HTGL/Uk9z9NkJH53o7puZLur434heHzAjkS60hZB3vT4ls25zl5rMiX4EA=="
+    },
     "load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@fortawesome/fontawesome-free": "^6.1.1",
     "bulma": "^0.9.4",
     "darkreader": "^4.9.51",
-    "elevator.js": "^1.0.1"
+    "elevator.js": "^1.0.1",
+    "lite-youtube-embed": "^0.2.0"
   }
 }

static/src/js/lite-youtube-embed.js

@@ -0,0 +1 @@
+require("lite-youtube-embed");

static/src/scss/_blocks.scss

@@ -7,3 +7,11 @@ div.block-image {
 .content > div:not(:last-child) {
   margin-bottom: $content-block-margin-bottom;
 }
+
+div.block-embed {
+  lite-youtube {
+    max-width: $embed_width;
+    min-width: $embed_width;
+    margin: 0 auto;
+  }
+}

static/src/scss/_variables.scss

@@ -0,0 +1 @@
+$embed_width: 85%;

static/src/scss/lite-youtube-embed.scss

@@ -0,0 +1 @@
+@import "lite-youtube-embed/src/lite-yt-embed";

templates/base.html

@@ -16,6 +16,7 @@
 
     <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'contrib/fontawesome/css/all.min.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/lite-youtube-embed.css' %}">
     <link rel="stylesheet" type="text/css" href="{% url 'static-pygments:styles' 'default' %}">
 
     {% block extra_css %}{% endblock %}
@@ -40,6 +41,7 @@
 
 
     <script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script>
+    <script async defer type="text/javascript" src="{% static 'js/lite-youtube-embed.js' %}"></script>
 
     {% block darkmode %}
       <script type="text/javascript" src="{% static 'js/darkreader.js' %}"></script>

website/common/embed.py

@@ -0,0 +1,38 @@
+import re
+
+from django.utils.html import format_html
+from wagtail.embeds.finders.oembed import OEmbedFinder
+from wagtail.embeds.oembed_providers import youtube
+
+
+class YouTubeLiteEmbedFinder(OEmbedFinder):
+    """
+    A modified OEmbed finder uses lite-youtube-embed instead
+
+    https://github.com/paulirish/lite-youtube-embed
+    """
+
+    EMBED_ID_RE = re.compile(r"\/embed\/(.*?)\?")
+
+    def __init__(
+        self, providers: list[dict] | None = None, options: dict | None = None
+    ):
+        super().__init__(providers=[youtube], options=options)
+
+    @classmethod
+    def _get_video_id(cls, html: str) -> str:
+        matched = cls.EMBED_ID_RE.search(html)
+        if matched is None:
+            raise ValueError(f"Unable to find video id in {html}")
+        return matched.group(1)
+
+    def find_embed(self, *args: list, **kwargs: dict) -> dict:
+        result = super().find_embed(*args, **kwargs)
+        video_id = self._get_video_id(result["html"])
+        result["html"] = format_html(
+            "<lite-youtube videoid='{}' playlabel='{}' backgroundImage='{}'></lite-youtube>",
+            video_id,
+            result["title"],
+            result["thumbnail_url"],
+        )
+        return result

website/common/tests.py

@@ -1,5 +1,6 @@
 from django.test import SimpleTestCase
 
+from .embed import YouTubeLiteEmbedFinder
 from .models import BasePage
 from .utils import get_page_models
 
@@ -15,3 +16,15 @@ class BasePageTestCase(SimpleTestCase):
                 issubclass(page_model, BasePage),
                 f"{page_model} does not inherit from {BasePage}.",
             )
+
+
+class YouTubeLiteEmbedFinderTestCase(SimpleTestCase):
+    def test_finds_video_id(self) -> None:
+        self.assertEqual(
+            YouTubeLiteEmbedFinder._get_video_id(
+                '<iframe width="200" height="113" src="https://www.youtube.com/embed/dQw4w9WgXcQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title=""></iframe>'
+            ),
+            "dQw4w9WgXcQ",
+        )
+        with self.assertRaises(ValueError):
+            YouTubeLiteEmbedFinder._get_video_id("something-else")

website/settings.py

@@ -144,6 +144,16 @@ DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
 
 WAGTAILIMAGES_IMAGE_MODEL = "images.CustomImage"
 
+WAGTAILEMBEDS_FINDERS = [
+    {
+        "class": "website.common.embed.YouTubeLiteEmbedFinder",
+    },
+    {
+        "class": "wagtail.embeds.finders.oembed",
+    },
+]
+
+
 if DEBUG:
     # Add django-browser-reload
     INSTALLED_APPS.append("django_browser_reload")