diff --git a/WSR/models.py b/WSR/models.py
index 35de01037f8e472f9352840086606cd9f61c1481..3933e721f7593bf5d45719f693f6820fbc6a4936 100644
--- a/WSR/models.py
+++ b/WSR/models.py
@@ -34,6 +34,7 @@ class RaceType(models.Model):
     description = models.TextField(default="", blank=True)
     icon = models.ImageField(upload_to='racetypes', default="", blank=True, verbose_name="Logo d'illustration")
     image = models.ImageField(upload_to='racetypes', default="", blank=True, verbose_name="Image d'illustration")
+    video = models.FileField(upload_to='racetypes', default="", blank=True, verbose_name="Vidéo de démonstration")
 
     def __str__(self):
         return self.name
diff --git a/WSR/static/scss/components.scss b/WSR/static/scss/components.scss
index 05959052e1e4d0b5831cb5fd780eced2bb4b88aa..d9ba4d2ee1052c3d9c07de802369e377623912ce 100644
--- a/WSR/static/scss/components.scss
+++ b/WSR/static/scss/components.scss
@@ -282,7 +282,7 @@ footer {
       margin-bottom: map-get($spacers, 2);
       width: 100%;
 
-      img {
+      img, video {
         width: inherit;
       }
     }
diff --git a/WSR/templates/race-types.html b/WSR/templates/race-types.html
index 7fac1eea22db81e7b04459d0b6a9b787d3db8c92..6984d10e3c99e237a6d9ad5f546eace6c2be5264 100644
--- a/WSR/templates/race-types.html
+++ b/WSR/templates/race-types.html
@@ -11,8 +11,8 @@
 
             <div class="race-types-container">
                 {% for epreuve in epreuves %}
-                    <div class="card">
-                        <div class="header">
+                    <div class="card" id="type-{{ epreuve.id }}">
+                        <div class="header" data-video-url="{% get_media_prefix %}{{ epreuve.video }}">
                             <img src="{% get_media_prefix %}{{ epreuve.image }}" alt="{{ epreuve.name }}">
                         </div>
                         <div class="content">
@@ -31,4 +31,49 @@
             </div>
         </div>
     </div>
+{% endblock %}
+{% block javascripts %}
+    <script type="text/javascript">
+        // Sélectionne tous les éléments de classe 'card' dont l'ID commence par 'type-'
+        const cards = document.querySelectorAll('.card[id^="type-"]');
+
+        cards.forEach((card) => {
+            let timeoutId;
+            let originalContent;
+
+            card.addEventListener('mouseenter', () => {
+                const header = card.querySelector('.header');
+                const videoUrl = header.dataset.videoUrl;
+
+                if (videoUrl && !header.querySelector('video')) {
+                    timeoutId = setTimeout(() => {
+                        const video = document.createElement('video');
+                        video.src = videoUrl;
+                        video.controls = false;
+                        video.autoplay = true;
+                        video.muted = true;
+                        video.loop = true;
+
+                        // Sauvegarde le contenu d'origine du header pour pouvoir le restaurer plus tard
+                        originalContent = header.innerHTML;
+
+                        header.innerHTML = '';
+                        header.appendChild(video);
+                    }, 1000);
+                }
+            });
+
+            card.addEventListener('mouseleave', () => {
+                clearTimeout(timeoutId);
+
+                const header = card.querySelector('.header');
+                const video = header.querySelector('video');
+
+                if (video) {
+                    // Supprime la vidéo et réaffiche l'image d'origine
+                    header.innerHTML = originalContent;
+                }
+            });
+        });
+    </script>
 {% endblock %}
\ No newline at end of file