update

components/member/ProfileVideo.vue

@@ -1,7 +1,14 @@
 <script lang="ts" setup>
-defineProps<{
+import { getVideoId } from '~/utils'
+
+const props = defineProps<{
   url: string
 }>()
+
+const ytEmbedUrl = computed(() => {
+  const id = getVideoId(props.url)
+  return `https://www.youtube.com/embed/${id}`
+})
 </script>
 
 <template>
@@ -11,7 +18,7 @@ defineProps<{
       <span class="flex-1">Profile Video</span>
     </div>
     <div class="aspect-video mt-2 rounded-xl overflow-hidden">
-      <iframe class="size-full" :src="`https://www.youtube.com/embed/${url}`" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
+      <iframe class="size-full" :src="ytEmbedUrl" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
     </div>
   </div>
 </template>

utils/index.ts

@@ -423,3 +423,20 @@ export function youtubeViewsFormat(
   }
   return formattedViews
 }
+
+export function getVideoId(youtubeUrl: string): string | null {
+  try {
+    const url = new URL(youtubeUrl)
+    const videoId = url.searchParams.get('v') ?? url.pathname.split('/').pop()
+
+    if (videoId) {
+      return videoId
+    }
+
+    return youtubeUrl
+  }
+  catch (error) {
+    console.error('Invalid URL:', error)
+    return youtubeUrl
+  }
+}