From 2280ef1096087e5b5d2bd98f6534c758945d7702 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 1 May 2023 21:10:40 +0100
Subject: [PATCH] refactor: add a YouTubeVideo component

---
 src/components/YouTubeVideo.astro | 14 ++++++++++++++
 src/components/talk/Video.astro   |  8 ++------
 2 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/components/YouTubeVideo.astro

diff --git a/src/components/YouTubeVideo.astro b/src/components/YouTubeVideo.astro
new file mode 100644
index 00000000..9d4820c6
--- /dev/null
+++ b/src/components/YouTubeVideo.astro
@@ -0,0 +1,14 @@
+---
+interface Props {
+  id: string;
+}
+
+const videoId = Astro.props.id;
+---
+
+<iframe
+  allowfullscreen
+  class="w-full aspect-[16/9] border border-gray-500"
+  frameborder="0"
+  src={`https://www.youtube.com/embed/${videoId}?rel=0&iv_load_policy=3`}
+/>
diff --git a/src/components/talk/Video.astro b/src/components/talk/Video.astro
index 9df1f24b..b370ebf0 100644
--- a/src/components/talk/Video.astro
+++ b/src/components/talk/Video.astro
@@ -1,5 +1,6 @@
 ---
 import Markdown from '../Markdown.astro';
+import YouTubeVideo from '../YouTubeVideo.astro';
 
 interface Props {
   id: string;
@@ -15,12 +16,7 @@ const { id, type }: Props = Astro.props;
       <h2 class="mb-2">Video</h2>
 
       <div>
-        <iframe
-          allowfullscreen
-          class="w-full aspect-[16/9]"
-          frameborder="0"
-          src={`https://www.youtube.com/embed/${id}?rel=0&iv_load_policy=3`}
-        />
+        <YouTubeVideo id={id} />
       </div>
     </Markdown>
   )