* better video containers

pelicanconf.py

@@ -108,10 +108,7 @@
         ],
         default_palette_id="roses",
     ),
-    menu=[
-        Link(title="home", href="/"),
-        Link(title="about", href="/about")
-    ],
+    menu=[Link(title="home", href="/"), Link(title="about", href="/about")],
     plugins=[ThemePlugin(), MarkdownPlugin(youtube_use_lite=True), SeoPlugin()],
 )
 ################################

someperson/markdown/youtube.py

@@ -9,11 +9,19 @@
 
 
 class YoutubeInlineProcessor(LinkInlineProcessor):
-
     def __init__(self, pattern: str, md: Markdown | None = None, config: dict | None = None):
         self.config = config or {}
         super().__init__(pattern, md)
 
+    def _wrap(self, el: Element) -> Element:
+        el.set("class", self.config.get("player_class"))
+
+        parent = Element("div")
+        parent.set("class", self.config.get("container_class"))
+        parent.append(el)
+
+        return parent
+
     def _video_id(self, src: str) -> str:
         try:
             query = dict(parse_qsl(urlsplit(src).query))
@@ -31,11 +39,14 @@ def _generic_link(self, href: str, title: str) -> Element:
 
         return el
 
-    def _lite_frame(self, video_id: str) -> Element:
+    def _lite_frame(self, video_id: str, title: str) -> Element:
         el = Element("lite-youtube")
         el.set("videoid", video_id)
+        el.set("videotitle", title)
+        el.set("autoload", "autoload")
+        el.set("posterloading", "eager")
 
-        return el
+        return self._wrap(el)
 
     def _regular_frame(self, video_id: str, title: str) -> Element:
         src = f"https://www.youtube.com/embed/{video_id}"
@@ -50,11 +61,7 @@ def _regular_frame(self, video_id: str, title: str) -> Element:
         )
         el.set("allowfullscreen", "")
 
-        parent = Element("div")
-        parent.set("class", "video-container")
-        parent.append(el)
-
-        return parent
+        return self._wrap(el)
 
     def handleMatch(self, m: re.Match[str], data: str) -> tuple[Element | None, int | None, int | None]:  # noqa: N802
         text, index, handled = self.getText(data, m.end(0))
@@ -72,16 +79,21 @@ def handleMatch(self, m: re.Match[str], data: str) -> tuple[Element | None, int
         except ValueError:
             el = self._generic_link(src, title)
         else:
-            el = self._lite_frame(video_id) if self.config.get("use_lite") else self._regular_frame(video_id, title)
+            el = (
+                self._lite_frame(video_id, title)
+                if self.config.get("use_lite")
+                else self._regular_frame(video_id, title)
+            )
 
         return el, m.start(0), index
 
 
 class YouTubeExtension(Extension):
-
     def __init__(self, **kwargs) -> None:
         self.config = {
-            "use_lite": [False, "Use the lite-youtube JS library to lazy load YT links"]
+            "use_lite": [False, "Use the lite-youtube JS library to lazy load YT links"],
+            "container_class": ["video-container", "CSS class added to the container div of the video."],
+            "player_class": ["video-player", "CSS class added to the video player element itself."],
         }
         super().__init__(**kwargs)
 

someperson/theme/static_src/css/main.scss

@@ -279,7 +279,7 @@ a:not(.flourishless),
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
 
-    iframe {
+    .video-player {
       position: absolute;
       top: 0;
       left: 0;