feat: ajout composant Strapi vidéo

.gitignore

@@ -1,2 +1,3 @@
 **node_modules/
 .DS_Store
+.factory/settings.json

backend/src/components/video/video-embed.json

@@ -0,0 +1,25 @@
+{
+  "collectionName": "components_video_video_embeds",
+  "info": {
+    "displayName": "video_embed",
+    "icon": "play",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "url": {
+      "type": "string"
+    },
+    "embed": {
+      "type": "text"
+    },
+    "orientation": {
+      "type": "enumeration",
+      "enum": [
+        "horizontal",
+        "vertical"
+      ],
+      "default": "horizontal"
+    }
+  }
+}

frontend/src/components/molecules/BannerVideo/BannerVideo.stories.tsx

@@ -12,33 +12,40 @@ const meta: Meta<typeof BannerVideo> = {
     video: {
       control: { type: 'text' },
     },
+    format: {
+      control: { type: 'select' },
+      options: ['horizontal', 'vertical'],
+    },
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Story avec contenu principal
-export const Default: Story = {
+export const Horizontal: Story = {
   args: {
     video: `<iframe width="560" height="315" src="https://www.youtube.com/embed/k6Z1yqrITCc?si=ZXRY6hncnYtLMx4w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`,
+    format: 'horizontal',
   },
 };
 
-export const YoutubeVideo: Story = {
+export const Vertical: Story = {
   args: {
-    video: `<iframe width="560" height="315" src="https://www.youtube.com/embed/k6Z1yqrITCc?si=ZXRY6hncnYtLMx4w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`,
+    video: `<iframe width="315" height="560" src="https://www.youtube.com/embed/k6Z1yqrITCc?si=ZXRY6hncnYtLMx4w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`,
+    format: 'vertical',
   },
 };
 
-export const VimeoVideo: Story = {
+export const VimeoHorizontal: Story = {
   args: {
     video: `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/170296012?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Teaser Impala"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+    format: 'horizontal',
   },
 };
 
-export const DailymotionVideo: Story = {
+export const DailymotionHorizontal: Story = {
   args: {
     video: `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">  <iframe src="https://geo.dailymotion.com/player.html?video=x8p310t" style="width:100%; height:100%; position:absolute; left:0px; top:0px; overflow:hidden; border:none;" allowfullscreen title="Dailymotion Video Player" allow="web-share"></iframe></div>`,
+    format: 'horizontal',
   },
 };

frontend/src/components/molecules/BannerVideo/BannerVideo.tsx

@@ -3,12 +3,14 @@ import clsx from 'clsx';
 export type BannerVideoProps = {
   video?: string;
   altVideo?: string;
+  format?: 'horizontal' | 'vertical';
   className?: string;
 };
 
 const BannerVideo: React.FC<BannerVideoProps> = ({
   video,
   altVideo,
+  format = 'horizontal',
   className,
   ...props
 }) => {
@@ -19,12 +21,25 @@ const BannerVideo: React.FC<BannerVideoProps> = ({
   return (
     <div
       className={clsx(
-        'max-w-[80%] md:max-w-[60%] max-h-[400px] sm:w-fit mx-auto shadow-lg',
+        'mx-auto shadow-lg overflow-hidden',
+        {
+          'max-w-[80%] md:max-w-[60%]': format === 'horizontal',
+          'max-w-[60%] md:max-w-[40%]': format === 'vertical',
+        },
         className,
       )}
       {...props}
     >
-      <div className='max-sm:[&>iframe]:w-full' dangerouslySetInnerHTML={{ __html: `${video}` }} />
+      <div
+        className={clsx(
+          '[&>iframe]:w-full [&>iframe]:h-full',
+          {
+            'aspect-video': format === 'horizontal',
+            'aspect-[9/16]': format === 'vertical',
+          },
+        )}
+        dangerouslySetInnerHTML={{ __html: `${video}` }}
+      />
     </div>
   );
 };

frontend/src/lib/strapi-types.d.ts

@@ -3199,6 +3199,12 @@ export interface components {
             stat?: string;
             description?: string;
         };
+        VideoVideoEmbedComponent: {
+            id?: number;
+            url?: string;
+            embed?: string;
+            orientation?: "horizontal" | "vertical";
+        };
         BlogRequest: {
             data: {
                 title?: string;