Fix YouTube video display

src/components/ArticleModal.tsx

@@ -4,6 +4,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
 } from '@/components/ui/dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -34,9 +35,21 @@ const ArticleModal = ({ isOpen, onClose, article }: ArticleModalProps) => {
   };
 
   const getYouTubeVideoId = (url: string) => {
-    const regex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/;
-    const match = url.match(regex);
-    return match ? match[1] : null;
+    const patterns = [
+      /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+      /youtube\.com\/v\/([^&\n?#]+)/,
+      /youtube\.com\/watch\?.*v=([^&\n?#]+)/,
+    ];
+    
+    for (const pattern of patterns) {
+      const match = url.match(pattern);
+      if (match && match[1]) {
+        console.log('YouTube video ID extracted:', match[1]);
+        return match[1];
+      }
+    }
+    console.log('No YouTube video ID found in URL:', url);
+    return null;
   };
 
   const isYouTubeVideo = article.category === 'youtube' && article.url;
@@ -60,6 +73,10 @@ const ArticleModal = ({ isOpen, onClose, article }: ArticleModalProps) => {
             {article.title}
           </DialogTitle>
           
+          <DialogDescription className="sr-only">
+            Article détaillé: {article.description}
+          </DialogDescription>
+          
           <div className="flex items-center gap-4 text-sm text-muted-foreground">
             <div className="flex items-center gap-1">
               <Calendar className="h-4 w-4" />

src/components/NewsCard.tsx

@@ -109,22 +109,8 @@ const NewsCard = ({
       
       <CardContent className="space-y-4" onClick={handleCardClick}>
         <div className="space-y-3">
-          {news.category === 'youtube' && news.url ? (
-            // Pour YouTube, afficher la miniature en pleine largeur
-            <div className="w-full">
-              <img
-                src={getYouTubeThumbnail(news.url) || news.imageUrl}
-                alt={news.title}
-                className="w-full h-48 object-cover rounded-md"
-                onError={(e) => {
-                  // Fallback vers l'image normale ou une image par défaut
-                  if (news.imageUrl) {
-                    e.currentTarget.src = news.imageUrl;
-                  }
-                }}
-              />
-            </div>
-          ) : news.imageUrl ? (
+          {/* Show image only for non-YouTube articles */}
+          {news.imageUrl && news.category !== 'youtube' && (
             <div className="w-full">
               <img
                 src={news.imageUrl}
@@ -132,7 +118,7 @@ const NewsCard = ({
                 className="w-full h-48 object-cover rounded-md"
               />
             </div>
-          ) : null}
+          )}
           
           {news.category !== 'youtube' && (
             <div className="space-y-4">