diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 000000000..2889ae172
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.webm filter=lfs diff=lfs merge=lfs -text
+*.ogv filter=lfs diff=lfs merge=lfs -text
diff --git a/common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.ogv b/common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.ogv
new file mode 100644
index 000000000..57e97295c
Binary files /dev/null and b/common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.ogv differ
diff --git a/common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.webm b/common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.webm
new file mode 100644
index 000000000..6ad339789
Binary files /dev/null and b/common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.webm differ
diff --git a/common/assets/videos/accueil/accueil-reglementaire.ogv b/common/assets/videos/accueil/accueil-reglementaire.ogv
new file mode 100644
index 000000000..886e43d02
Binary files /dev/null and b/common/assets/videos/accueil/accueil-reglementaire.ogv differ
diff --git a/common/assets/videos/accueil/accueil-reglementaire.webm b/common/assets/videos/accueil/accueil-reglementaire.webm
new file mode 100644
index 000000000..11eb4b0ed
Binary files /dev/null and b/common/assets/videos/accueil/accueil-reglementaire.webm differ
diff --git a/web/landing/ResourcePage/VideoCard.js b/web/landing/ResourcePage/VideoCard.js
index 3ce49a674..a0794d17d 100644
--- a/web/landing/ResourcePage/VideoCard.js
+++ b/web/landing/ResourcePage/VideoCard.js
@@ -5,7 +5,15 @@ import { resourceCardsClasses } from "./styles/ResourceCardsStyle";
 import { useMatomo } from "@datapunt/matomo-tracker-react";
 import { PLAY_VIDEO } from "common/utils/matomoTags";
 
-export function VideoCard({ video, description, poster, matomoTag, ...props }) {
+export function VideoCard({
+  video_mp4,
+  video_webm,
+  video_ogv,
+  description,
+  poster,
+  matomoTag,
+  ...props
+}) {
   const classes = resourceCardsClasses();
   const { trackEvent } = useMatomo();
 
@@ -26,10 +34,12 @@ export function VideoCard({ video, description, poster, matomoTag, ...props }) {
         preload="metadata"
         onPlay={clickEvent}
       >
-        <source src={video} type="video/mp4" />
+        <source src={video_mp4} type="video/mp4" />
+        <source src={video_webm} type="video/webm" />
+        <source src={video_ogv} type="video/ogv" />
         <p>
           Votre navigateur ne prend pas en charge les vidéos HTML5. Voici{" "}
-          <a href={video}>un lien pour télécharger la vidéo</a>
+          <a href={video_mp4}>un lien pour télécharger la vidéo</a>
         </p>
       </video>
     </Card>
diff --git a/web/landing/sections/IntroSection.js b/web/landing/sections/IntroSection.js
index ca0d76a4c..541cf1884 100644
--- a/web/landing/sections/IntroSection.js
+++ b/web/landing/sections/IntroSection.js
@@ -10,9 +10,13 @@ import { makeStyles } from "@mui/styles";
 import { useIsWidthDown } from "common/utils/useWidth";
 import { VideoCard } from "../ResourcePage/VideoCard";
 
-import MobilicVideo from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.mp4";
+import MobilicVideo_mp4 from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.mp4";
+import MobilicVideo_webm from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.webm";
+import MobilicVideo_ogv from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.ogv";
 import MobilicPoster from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic-preview.jpg";
-import ReglementationVideo from "common/assets/videos/accueil/accueil-reglementaire.mp4";
+import ReglementationVideo_mp4 from "common/assets/videos/accueil/accueil-reglementaire.mp4";
+import ReglementationVideo_webm from "common/assets/videos/accueil/accueil-reglementaire.webm";
+import ReglementationVideo_ogv from "common/assets/videos/accueil/accueil-reglementaire.ogv";
 import ReglementationPoster from "common/assets/videos/accueil/accueil-reglementaire-preview.jpg";
 
 const useStyles = makeStyles(theme => ({
@@ -182,14 +186,18 @@ export function IntroSection() {
           <Grid item xs={12} sm={6}>
             <VideoCard
               description="Mobilic, qu'est-ce que c'est ?"
-              video={MobilicVideo}
+              video_mp4={MobilicVideo_mp4}
+              video_webm={MobilicVideo_webm}
+              video_ogv={MobilicVideo_ogv}
               poster={MobilicPoster}
             />
           </Grid>
           <Grid item xs={12} sm={6}>
             <VideoCard
               description="Mobilic est-il conforme à la réglementation ?"
-              video={ReglementationVideo}
+              video_mp4={ReglementationVideo_mp4}
+              video_webm={ReglementationVideo_webm}
+              video_ogv={ReglementationVideo_ogv}
               poster={ReglementationPoster}
             />
           </Grid>