Implement video support in ImageDescription component, allowing .MP4 and other video formats to be displayed.

Author: junwonp

src/lib/components/ImageDescription.svelte

@@ -8,10 +8,19 @@
   }
 
   let { src, alt, children }: Props = $props();
+
+  const videoExtensions = ['.mp4', '.webm', '.mov', '.avi', '.m4v'];
+  const isVideo = videoExtensions.some((ext) => src.toLowerCase().endsWith(ext.toLowerCase()));
 </script>
 
 <figure class="image-description">
-  <img {src} {alt} loading="lazy" />
+  {#if isVideo}
+    <video {src} title={alt} autoplay loop muted playsinline>
+      <source {src} type={`video/${src.split('.').pop() ?? 'mp4'}`} />
+    </video>
+  {:else}
+    <img {src} {alt} loading="lazy" />
+  {/if}
   {#if children}
     <figcaption>{@render children()}</figcaption>
   {/if}
@@ -27,7 +36,8 @@
     align-items: center;
   }
 
-  .image-description img {
+  .image-description img,
+  .image-description video {
     max-width: 100%;
     max-height: 60vh;
     height: auto;

src/lib/posts/aira.en.svx

@@ -83,7 +83,7 @@ For service enhancement, I developed a **V2 version** implementing a **new inter
 
 ### Shorts-style Navigation & iOS 26 Liquid Glass
 
-<ImageDescription src="/images/aira/aira_v2_main.gif" alt="aira V2 Shorts UI and Liquid Glass demo"/>
+<ImageDescription src="/images/aira/aira_v2_main.MP4" alt="aira V2 Shorts UI and Liquid Glass demo"/>
 
 I introduced a **Full-screen Swipe UI** so users can enjoy characters like content.
 

src/lib/posts/aira.ko.svx

@@ -83,7 +83,7 @@ techStack: ['React Native', 'Expo', 'Flashlist', 'Reanimated', 'Firebase']
 
 ### 숏폼(Shorts) 스타일의 탐색 경험과 iOS 26 Liquid Glass
 
-<ImageDescription src="/images/aira/aira_v2_main.gif" alt="aira V2 Shorts UI and Liquid Glass demo"/>
+<ImageDescription src="/images/aira/aira_v2_main.MP4" alt="aira V2 Shorts UI and Liquid Glass demo"/>
 
 사용자가 캐릭터를 콘텐츠처럼 즐길 수 있도록 **풀스크린 스와이프 UI**를 도입했습니다.