diff --git a/src/assets/video/home.mp4 b/src/assets/video/home.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..d4a6e7b91984f67362b01a2d4f35b3535ee8be86
Binary files /dev/null and b/src/assets/video/home.mp4 differ
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 32e3c3d6887ec44b840a51c8218d48da4091842d..99b3706abbd94b6454858be90cfed24612f4632b 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -2,7 +2,8 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
 import en from "react-intl/locale-data/en";
-import homeVideo from "../assets/video/home.webm";
+import homeVideoWebM from "../assets/video/home.webm";
+import homeVideoMp4 from "../assets/video/home.mp4";
 import classNames from "classnames";
 import { ENVIRONMENT_URLS } from "../assets/environments/environments";
 
@@ -186,7 +187,8 @@ class HomeRoot extends Component {
             </div>
           </div>
           <video playsInline autoPlay muted loop className="background-video" id="background-video">
-            <source src={homeVideo} type="video/webm" />
+            <source src={homeVideoWebM} type="video/webm" />
+            <source src={homeVideoMp4} type="video/mp4" />
           </video>
           {this.state.dialogType && (
             <InfoDialog
diff --git a/webpack.config.js b/webpack.config.js
index 4fc219ef830791bd6dbc6d201143ba82af6b961c..b77adbc4c7b14e8a1acd5ed4dfa0ba271c143734 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -167,7 +167,7 @@ const config = {
         })
       },
       {
-        test: /\.(png|jpg|gif|glb|ogg|mp3|wav|woff2|svg|webm)$/,
+        test: /\.(png|jpg|gif|glb|ogg|mp3|mp4|wav|woff2|svg|webm)$/,
         use: {
           loader: "file-loader",
           options: {