diff --git a/app/components/content/Youtube.vue b/app/components/content/Youtube.vue
index 49c2eba..5539de2 100644
--- a/app/components/content/Youtube.vue
+++ b/app/components/content/Youtube.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-defineProps<{ videoId: string }>();
+defineProps<{ videoid: string }>();
 </script>
 
 <template>
     <div class="not-prose mx-auto max-w-3xl w-full aspect-video overflow-hidden rounded-lg">
-        <iframe
-            :src="`https://www.youtube.com/embed/${videoId}`"
-            class="h-full w-full"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-        />
+        <ClientOnly>
+            <iframe
+                :src="`https://www.youtube.com/embed/${videoid}`"
+                class="h-full w-full"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+            />
+        </ClientOnly>
     </div>
 </template>