YouTube player for markdown

astro.config.mjs

@@ -27,6 +27,8 @@ if (!gitVersion) {
   }
 }
 
+const fastBuild = false;
+
 function dontDie() {
   return {
     name: "dont-die",
@@ -114,23 +116,27 @@ export default defineConfig({
   },
   integrations: [
     mdx(),
-    sitemap(),
-    metaTags(),
-    deleteUnusedImages(),
     svelte(),
     serviceWorker({
       workbox: { inlineWorkboxRuntime: true },
     }),
-    compress({
-      HTML: false,
-      CSS: false,
-      SVG: false,
-    }),
-    dontDie(),
+    ...(fastBuild
+      ? []
+      : [
+          sitemap(),
+          metaTags(),
+          deleteUnusedImages(),
+          compress({
+            HTML: false,
+            CSS: false,
+            SVG: false,
+          }),
+          dontDie(),
+        ]),
   ],
   output: "static",
   build: {
-    minify: true,
+    ...(fastBuild ? {} : { minify: true }),
   },
   image: {
     remotePatterns: [{ protocol: "https" }],

package.json

@@ -33,6 +33,7 @@
     "date-fns-tz": "^3.2.0",
     "hastscript": "^9.0.1",
     "js-yaml": "^4.1.0",
+    "lite-youtube-embed": "^0.3.3",
     "marked": "^15.0.12",
     "nanostores": "^1.0.1",
     "pagefind": "^1.3.0",

src/components/ui/Markdown.astro

@@ -1,12 +1,13 @@
 ---
 import { marked } from 'marked';
+import { replaceYouTubeLinks } from "@utils/markdown";
 
 interface Props {
   content: string;
 }
 
 const { content } = Astro.props;
-const html = marked.parse(content);
+const html = marked.parse(await replaceYouTubeLinks(content) );
 ---
 
 <div class="prose prose-xl max-w-none" >

src/components/ui/YouTube.astro

@@ -1,21 +1,78 @@
 ---
-import { YouTube as Player } from "@astro-community/astro-embed-youtube";
 
-type Props = {
-  id?: string;
-  class?: string;
-  [key: string]: any;
+import 'lite-youtube-embed/src/lite-yt-embed.css';
+import liteJS from 'lite-youtube-embed/src/lite-yt-embed.js?url';
+
+const urlPattern =
+	/(?=(\s*))\1(?:<a [^>]*?>)??(?=(\s*))\2(?:https?:\/\/)??(?:w{3}\.)??(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|shorts\/)??([A-Za-z0-9-_]{11})(?:[^\s<>]*)(?=(\s*))\4(?:<\/a>)??(?=(\s*))\5/;
+
+function urlMatcher(url: string): string | undefined {
+	const match = url.match(urlPattern);
+	return match?.[3];
+}
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+	id: string;
+	poster?: string;
+	posterQuality?: 'max' | 'high' | 'default' | 'low';
+	params?: string;
+	playlabel?: string;
 }
 
 const {
+	id,
+	poster,
+	posterQuality = 'default',
+	title,
   class: userClass = '',
-  ...attrs
-} = Astro.props;
-
-const attrId = attrs.id || '';
+	...attrs
+} = Astro.props as Props;
 
 const defaultClass = 'border-4 border-white rounded-lg shadow-lg';
 const className = `${defaultClass} ${userClass}`.trim();
+
+const idRegExp = /^[A-Za-z0-9-_]{11}$/;
+
+function extractID(idOrUrl: string) {
+	if (idRegExp.test(idOrUrl)) return idOrUrl;
+	return urlMatcher(idOrUrl);
+}
+
+const videoid = extractID(id);
+const posterFile =
+	{
+		max: 'maxresdefault',
+		high: 'sddefault',
+		default: 'hqdefault',
+		low: 'default',
+	}[posterQuality] || 'hqdefault';
+const posterURL =
+	poster || `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`;
+const href = `https://youtube.com/watch?v=${videoid}`;
 ---
 
-<Player id={attrId} class={className} {...attrs} />
+<lite-youtube
+	{videoid}
+	{title}
+	data-title={title}
+	{...attrs}
+  class={className}
+	style=`background-image: url('${posterURL}');`
+>
+	<a {href} class="lty-playbtn ">
+		<span class="lyt-visually-hidden">{attrs.playlabel || 'Play'}</span>
+	</a>
+</lite-youtube>
+
+<script is:inline type="module" src={liteJS}></script>
+
+<style is:global>
+	lite-youtube > iframe {
+		all: unset !important;
+		width: 100% !important;
+		height: 100% !important;
+		position: absolute !important;
+		inset: 0 !important;
+		border: 0 !important;
+	}
+</style>

src/utils/markdown.ts

@@ -0,0 +1,30 @@
+import { experimental_AstroContainer } from "astro/container";
+import YouTube from "@ui/YouTube.astro";
+
+export async function replaceYouTubeLinks(
+  markdownContent: string
+): Promise<string> {
+  const youtubeRegex =
+    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^\s'"()[\]<>]+)/gi;
+
+  const matches = [...markdownContent.matchAll(youtubeRegex)];
+  if (matches.length === 0) return markdownContent;
+
+  const container = await experimental_AstroContainer.create();
+  let updatedContent = markdownContent;
+
+  for (const match of matches) {
+    const fullUrl = match[0];
+    const id = match[1];
+
+    if (!id) continue;
+
+    const html = await container.renderToString(YouTube, {
+      props: { id, alt: "Embedded YouTube video" },
+    });
+
+    updatedContent = updatedContent.replace(fullUrl, html);
+  }
+
+  return updatedContent;
+}