Merge branch 'feature/V8-6226--ne-pas-oublier---intgration-de-' into develop

components/Home/Promotion.vue

@@ -45,12 +45,31 @@
     <v-row class="demo">
       <v-col>
         <v-img
+          v-if="!playVideo"
           src="/images/pages/home/promotion/Ordinateur_portable_avec_ecran_logiciel_Opentalent.jpg"
           alt="Vidéo corporate de l’entreprise Opentalent"
           class="screen"
         >
-          <v-icon v-show="false" icon="fas fa-play" class="play-icon" />
+          <v-icon
+            icon="fas fa-play"
+            class="play-icon"
+            @click="playVideo = true"
+          />
         </v-img>
+
+        <video
+          v-else
+          controls
+          autoPlay
+          class="screen"
+          aria-label="Vidéo corporate Opentalent"
+          aria-description="Vidéo corporate Opentalent : découvrez l’histoire de l’entreprise, son agenda et ses logiciels culturels"
+        >
+          <source
+            src="/storage/Video_Corporate_Opentalent-Agenda_et_logiciels_culturels.mp4"
+            type="video/mp4"
+          />
+        </video>
       </v-col>
     </v-row>
 
@@ -120,7 +139,9 @@
   </LayoutContainer>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const playVideo: Ref<boolean> = ref(false)
+</script>
 
 <style scoped lang="scss">
 .highlight {
@@ -190,12 +211,19 @@
 .v-row.demo {
   max-height: 350px;
 
+  .v-col {
+    display: flex;
+  }
+
   @media (max-width: 1280px) {
     max-height: 1000px;
   }
 
   .screen {
+    position: relative;
     width: 900px;
+    max-width: 900px;
+    height: 675px;
     object-fit: cover;
     margin: 2rem auto;
     text-align: center;
@@ -204,6 +232,12 @@
     bottom: 30rem;
   }
 
+  video.screen {
+    object-fit: contain;
+    background: black;
+    transform: scale(1.1);
+  }
+
   @media (max-width: 1280px) {
     .screen {
       margin-top: -12px;