From 535d8ec51ae7fa488ec04bbccdc467344d1c1694 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Thu, 27 Mar 2025 14:05:16 +0800
Subject: [PATCH] feat(mdx/content): add component for embedding YouTube and
 Bilibili videos

---
 src/components/content/video-embed.tsx | 27 ++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/components/content/video-embed.tsx

diff --git a/src/components/content/video-embed.tsx b/src/components/content/video-embed.tsx
new file mode 100644
index 0000000..09dedc9
--- /dev/null
+++ b/src/components/content/video-embed.tsx
@@ -0,0 +1,27 @@
+interface VideoEmbedProps {
+  platform: "youtube" | "bilibili";
+  id: string;
+}
+
+const platformSrcMap: Record<VideoEmbedProps["platform"], string> = {
+  youtube: "https://www.youtube.com/embed/",
+  bilibili: "https://player.bilibili.com/player.html?bvid=",
+};
+
+export function VideoEmbed({
+  platform,
+  id,
+}: VideoEmbedProps) {
+  const src = platformSrcMap[platform] + id;
+
+  return (
+    <div>
+      <iframe
+        className="aspect-video w-full"
+        src={src}
+        title={`${platform} Video Player`}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+      />
+    </div>
+  );
+}