From 5714fae7bdf2d3fa04e70794a903f822a971d3f3 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Fri, 1 Aug 2025 11:23:15 +0800
Subject: [PATCH] feat: adjust aspect ratio for YouTube shorts

---
 .../YoutubeEmbeddedPlayer/index.tsx           | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/YoutubeEmbeddedPlayer/index.tsx b/src/components/YoutubeEmbeddedPlayer/index.tsx
index c69b7ca7..86e80a9b 100644
--- a/src/components/YoutubeEmbeddedPlayer/index.tsx
+++ b/src/components/YoutubeEmbeddedPlayer/index.tsx
@@ -10,7 +10,7 @@ export default function YoutubeEmbeddedPlayer({
   url: string
   className?: string
 }) {
-  const videoId = useMemo(() => extractVideoId(url), [url])
+  const { videoId, isShort } = useMemo(() => parseYoutubeUrl(url), [url])
   const [initSuccess, setInitSuccess] = useState(false)
   const playerRef = useRef<YouTubePlayer | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -78,22 +78,34 @@ export default function YoutubeEmbeddedPlayer({
   }
 
   return (
-    <div className={cn('rounded-lg border overflow-hidden w-full aspect-video', className)}>
+    <div
+      className={cn(
+        'rounded-lg border overflow-hidden max-h-[50vh]',
+        isShort ? 'aspect-[9/16]' : 'aspect-video',
+        className
+      )}
+    >
       <div ref={containerRef} className="w-full h-full" />
     </div>
   )
 }
 
-function extractVideoId(url: string) {
+function parseYoutubeUrl(url: string) {
   const patterns = [
     /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
     /youtube\.com\/watch\?.*v=([^&\n?#]+)/,
     /youtube\.com\/shorts\/([^&\n?#]+)/
   ]
 
-  for (const pattern of patterns) {
+  let videoId: string | null = null
+  let isShort = false
+  for (const [index, pattern] of patterns.entries()) {
     const match = url.match(pattern)
-    if (match) return match[1]
+    if (match) {
+      videoId = match[1].trim()
+      isShort = index === 2 // Check if it's a short video
+      break
+    }
   }
-  return null
+  return { videoId, isShort }
 }