add video to opengraph

src/pages/video/[name].astro

@@ -11,19 +11,30 @@ if (!video) return new Response(null, { status: 404 });
 const metadata = await getVideoMetadata(video);
 if (!metadata) return new Response(null, { status: 404 });
 
-const { title, description } = metadata;
+const { title, description, width, height, duration } = metadata;
 const basePath = import.meta.env.BASE_URL.replace(/\/$/, '');
-const streamUrl = `${basePath}/video/${encodeURIComponent(video.name)}/stream`;
+const streamPath = `${basePath}/video/${encodeURIComponent(video.name)}/stream`;
+const streamUrl = new URL(streamPath, Astro.url);
 ---
 
-<WebsiteLayout title={`${title} – Video`}>
+<WebsiteLayout title={`${title} – Video`} description={description ?? undefined}>
+  <Fragment slot="head">
+    <meta property="og:type" content="video" />
+    <meta property="og:video" content={streamUrl.href} />
+    {streamUrl.href.startsWith('https://') && <meta property="og:video:secure_url" content={streamUrl.href} />}
+    <meta property="og:video:type" content={video.contentType} />
+    {width && <meta property="og:video:width" content={width.toString()} />}
+    {height && <meta property="og:video:height" content={height.toString()} />}
+    {duration && <meta property="og:video:duration" content={duration.toString()} />}
+  </Fragment>
+
   <section class="mx-auto flex w-full max-w-6xl flex-col gap-5 px-4 py-8 lg:py-12">
     <div>
       <p class="text-sm tracking-widest text-base-content/60 uppercase">Video</p>
       <h1 class="mt-1 text-2xl font-semibold break-words lg:text-4xl">{title}</h1>
     </div>
 
-    <VideoPlayer client:load src={streamUrl} type={video.contentType} title={title} />
+    <VideoPlayer client:load src={streamPath} type={video.contentType} title={title} />
 
     {description && (
       <p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/70">{description}</p>