feat: aperçu Youtube dans les popup de la carte

src/components/EmbeddedYoutube.tsx

@@ -1,10 +1,11 @@
-import { ReactNode } from "react";
+import { IframeHTMLAttributes } from "react";
 
 interface Props {
   youtubeId: string;
   width: string;
   height: string;
   onClick: () => void;
+  style: IframeHTMLAttributes<HTMLIFrameElement>["style"];
 }
 
 export const EmbeddedYoutube = ({
@@ -12,6 +13,7 @@ export const EmbeddedYoutube = ({
   width,
   height,
   onClick,
+  style,
 }: Props) => (
   <div onClick={onClick}>
     <iframe
@@ -22,7 +24,7 @@ export const EmbeddedYoutube = ({
       frameBorder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       allowFullScreen
-      style={{ pointerEvents: "none" }}
+      style={{ pointerEvents: "none", ...style }}
     ></iframe>
   </div>
 );

src/routes/Liste/Map/PopupContent.tsx

@@ -5,6 +5,7 @@ import { getResistantPhotoUrl } from "../../../getResistantPhotoUrl";
 import { HomeContext } from "../../../context/HomeContext";
 import { getResistantPageUrl } from "../../../getResistantPageUrl";
 import { getResistantGrayscaleRule } from "../../../style/getResistantGrayscaleRule";
+import { EmbeddedYoutube } from "../../../components/EmbeddedYoutube";
 
 export const PopupContent = ({ resistant }: { resistant: Resistant }) => {
   const navigate = useNavigate();
@@ -19,16 +20,31 @@ export const PopupContent = ({ resistant }: { resistant: Resistant }) => {
           : navigate(resistant.id)
       }
     >
-      <img
+      {resistant.video ? (
-        src={getResistantPhotoUrl(resistant)}
+        <EmbeddedYoutube
-        style={{
+          youtubeId={resistant.video}
-          ...getResistantGrayscaleRule(resistant),
+          width={"220"}
-          float: "left",
+          height={"120"}
-          maxHeight: "15em",
+          onClick={() => {}}
-          marginRight: "1em",
+          style={{
-        }}
+            float: "left",
-        alt={resistant.noms}
+            maxHeight: "15em",
-      />
+            marginRight: "1em",
+            paddingBottom: "3em",
+          }}
+        />
+      ) : (
+        <img
+          src={getResistantPhotoUrl(resistant)}
+          style={{
+            ...getResistantGrayscaleRule(resistant),
+            float: "left",
+            maxHeight: "15em",
+            marginRight: "1em",
+          }}
+          alt={resistant.noms}
+        />
+      )}
       <strong style={{ overflow: "hidden" }}>{resistant.noms}</strong>
       <br />
       👨‍👩‍👧‍👦 Parent(s) de {resistant.enfants} <br />