fix style and accessibility

components/Home/Promotion.vue

@@ -45,7 +45,7 @@
     <v-row class="demo">
       <v-col>
         <v-img
-          v-if="playVideo"
+          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"
@@ -57,16 +57,17 @@
           />
         </v-img>
 
-        <video v-else controls muted autoPlay>
+        <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"
-            class="screen"
-          />
-          <meta itemprop="name" content="Vidéo corporate Opentalent" />
-          <meta
-            itemprop="description"
-            content="Vidéo corporate Opentalent, découvrez l’histoire de l’entreprise, son agenda et ses logiciels culturels"
           />
         </video>
       </v-col>
@@ -210,12 +211,19 @@ const playVideo: Ref<boolean> = ref(false)
 .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;
@@ -224,6 +232,12 @@ const playVideo: Ref<boolean> = ref(false)
     bottom: 30rem;
   }
 
+  video.screen {
+    object-fit: contain;
+    background: black;
+    transform: scale(1.1);
+  }
+
   @media (max-width: 1280px) {
     .screen {
       margin-top: -12px;