diff --git a/assets/media/hero-loop.mp4 b/assets/media/hero-loop.mp4
new file mode 100644
index 0000000..4dce1c9
Binary files /dev/null and b/assets/media/hero-loop.mp4 differ
diff --git a/index.html b/index.html
index 593e55e..05165a5 100644
--- a/index.html
+++ b/index.html
@@ -91,7 +91,7 @@
     </div>
     </div>
     <div class="hero-media" aria-hidden="true">
-      <video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm"></video>
+      <video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm" data-src-mp4="assets/media/hero-loop.mp4"></video>
     </div>
   </section>
 
@@ -374,9 +374,12 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" });
   var conn = navigator.connection || {};
   if (conn.saveData === true) return;
   if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-  var src = hv.getAttribute('data-src'); if (!src) return;
-  var s = document.createElement('source'); s.src = src; s.type = 'video/webm';
-  hv.appendChild(s); hv.load();
+  var webm = hv.getAttribute('data-src'), mp4 = hv.getAttribute('data-src-mp4');
+  if (!webm && !mp4) return;
+  function addSrc(u, t) { if (!u) return; var s = document.createElement('source'); s.src = u; s.type = t; hv.appendChild(s); }
+  addSrc(webm, 'video/webm');   // modern browsers pick this (smaller VP9)
+  addSrc(mp4, 'video/mp4');     // old Safari / iOS fall back to H.264
+  hv.load();
   hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
   var p = hv.play(); if (p && p.catch) p.catch(function () {});
 })();