Disable FutureSim hero video on mobile

Author: nikhilchandak

assets/blog.css

@@ -259,6 +259,29 @@
   object-fit: cover;
 }
 
+.futuresim-hero-poster {
+  display: none;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  margin: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  box-shadow: none;
+  background: #fff;
+  object-fit: cover;
+}
+
+@media (hover: none), (pointer: coarse), (max-width: 768px) {
+  .futuresim-hero-video video {
+    display: none;
+  }
+
+  .futuresim-hero-poster {
+    display: block;
+  }
+}
+
 /* Blog content styles */
 .blog-content {
   padding: 48px 0 72px;

assets/main.js

@@ -45,9 +45,33 @@
 
   document.querySelectorAll("[data-desktop-controls]").forEach((video) => {
     if (typeof window.matchMedia !== "function") return;
-    const desktop = window.matchMedia("(min-width: 769px)");
+    const desktop = window.matchMedia("(min-width: 769px) and (hover: hover) and (pointer: fine)");
+    const sources = Array.from(video.querySelectorAll("source")).map((source) => ({
+      el: source,
+      src: source.getAttribute("src"),
+    }));
+
     const syncControls = () => {
-      video.toggleAttribute("controls", desktop.matches);
+      const isDesktop = desktop.matches;
+      video.toggleAttribute("controls", isDesktop);
+      video.toggleAttribute("autoplay", isDesktop);
+      video.preload = isDesktop ? "auto" : "none";
+
+      sources.forEach(({ el, src }) => {
+        if (!src) return;
+        if (isDesktop && !el.getAttribute("src")) {
+          el.setAttribute("src", src);
+        } else if (!isDesktop && el.getAttribute("src")) {
+          el.removeAttribute("src");
+        }
+      });
+
+      if (!isDesktop) {
+        video.pause();
+        video.load();
+      } else if (!video.currentSrc) {
+        video.load();
+      }
     };
 
     syncControls();
@@ -88,7 +112,7 @@
       root.style.setProperty("--active", String(index));
       if (tablist) tablist.style.setProperty("--active", String(index));
       if (panesRoot) panesRoot.style.setProperty("--active", String(index));
-      if (focus) tabs[index]?.focus();
+      if (focus && tabs[index]) tabs[index].focus();
     };
 
     const stop = ({ permanent = false } = {}) => {

futuresim/index.md

@@ -45,8 +45,9 @@ nav: futuresim
 
     <figure class="futuresim-hero-video">
       <video autoplay loop muted playsinline webkit-playsinline preload="auto" poster="{{ '/futuresim/figures/results/futuresim_combined_poster_v2.jpg' | relative_url }}" data-desktop-controls aria-label="FutureSim combined agent trajectory and benchmark animation">
-        <source src="{{ '/futuresim/figures/results/futuresim_combined_v2.mp4' | relative_url }}" type="video/mp4">
+        <source src="{{ '/futuresim/figures/results/futuresim_combined_v2.mp4' | relative_url }}" type="video/mp4" media="(min-width: 769px) and (hover: hover) and (pointer: fine)">
       </video>
+      <img class="futuresim-hero-poster" src="{{ '/futuresim/figures/results/futuresim_combined_poster_v2.jpg' | relative_url }}" alt="FutureSim combined agent trajectory and benchmark preview.">
     </figure>
   </div>
 </section>