video func implemented

frontend/src/components/routes/ArticleDetailComponent.tsx

@@ -3,6 +3,8 @@ import { Link } from '@tanstack/react-router'
 import * as api from '@/lib/api'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import { YouTubeEmbed } from '@/components/ui/youtube-embed'
+import { extractYouTubeVideoId, getVideoPositionClasses } from '@/lib/video-utils'
 
 export function ArticleDetailComponent({ id }: { id: string }) {
   const { data, isLoading, error } = useQuery({
@@ -110,6 +112,21 @@ export function ArticleDetailComponent({ id }: { id: string }) {
         </div>
       )}
 
+      {/* Video rendering */}
+      {data.videoUrl && data.videoPosition !== 'none' && (
+        <div className={getVideoPositionClasses(data.videoPosition)}>
+          <YouTubeEmbed
+            url={data.videoUrl}
+            title={data.title}
+            caption={data.videoCaption}
+            autoplay={false}
+            controls={true}
+            modestbranding={true}
+            showRelated={false}
+          />
+        </div>
+      )}
+
       <div className="prose prose-slate max-w-none">
         <div className="text-lg leading-relaxed mb-6">
           <ReactMarkdown 
@@ -121,7 +138,27 @@ export function ArticleDetailComponent({ id }: { id: string }) {
                   className="max-w-full h-auto rounded-lg my-4"
                   alt={props.alt || 'Article image'}
                 />
-              )
+              ),
+              a: (props) => {
+                // Check if the link is a YouTube URL
+                const videoId = extractYouTubeVideoId(props.href || '');
+                if (videoId) {
+                  return (
+                    <div className="my-6">
+                      <YouTubeEmbed
+                        url={props.href || ''}
+                        title={props.title || 'YouTube video'}
+                        autoplay={false}
+                        controls={true}
+                        modestbranding={true}
+                        showRelated={false}
+                      />
+                    </div>
+                  );
+                }
+                // Regular link
+                return <a {...props} className="text-blue-600 hover:text-blue-800 underline" />;
+              }
             }}
           >
             {data.content}