fix: fix video rendering on some iOS devices by switching to mp4 (#1421)

apps/web/global.d.ts

@@ -38,3 +38,8 @@ declare module '*.gltf' {
   const src: string;
   export default src;
 }
+
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}

apps/web/next.config.js

@@ -196,6 +196,19 @@ module.exports = extendBaseConfig(
           },
         ],
       });
+      config.module.rules.push({
+        test: /\.mp4$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name][hash].[ext]',
+              outputPath: 'static/assets/mp4/',
+              publicPath: '/_next/static/assets/mp4/',
+            },
+          },
+        ],
+      });
       config.module.rules.push({
         test: /\.gltf/,
         use: [

apps/web/src/components/base-org/root/BuildAndRewardSection/index.tsx

@@ -2,12 +2,11 @@
 import { useErrors } from 'apps/web/contexts/Errors';
 import Title from 'apps/web/src/components/base-org/typography/Title';
 import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
-
 import Text from 'apps/web/src/components/base-org/typography/Text';
 import Button from 'apps/web/src/components/base-org/Button';
 import { ButtonVariants } from 'apps/web/src/components/base-org/Button/types';
 import { useCallback, useRef } from 'react';
-import cubes from './assets/cubes.webm';
+import cubes from './assets/cubes.mp4';
 import Link from 'apps/web/src/components/Link';
 
 export default function BuildAndRewardSection() {
@@ -26,7 +25,7 @@ export default function BuildAndRewardSection() {
       <div className="mb-12 mt-8 flex w-full flex-col items-center gap-4 md:flex-row">
         <div className="relative flex w-full flex-row gap-4" onMouseEnter={playVideo}>
           <video
-            src={cubes}
+            src={`${cubes}#t=0.001`}
             muted
             playsInline
             className="mx-auto p-2 motion-reduce:hidden"

apps/web/src/components/base-org/root/VideoCardsSection/VideoCard.tsx

@@ -23,11 +23,12 @@ export default function VideoCard({ title, description, src }: VideoCardProps) {
       logError(error, 'failed to play video');
     });
   }, [logError]);
+
   return (
     <div onMouseEnter={playVideo} className="w-full">
       <Card innerClassName="p-6 transition-all bg-[#0A0B0C] group-hover:bg-[#111111]">
         <video
-          src={src}
+          src={`${src}#t=0.001`}
           muted
           playsInline
           className="mx-auto mt-6 motion-reduce:hidden"

apps/web/src/components/base-org/root/VideoCardsSection/index.tsx

@@ -1,7 +1,7 @@
 'use client';
-import bolt from './assets/bolt.webm';
-import eth from './assets/eth.webm';
-import globe from './assets/globe.webm';
+import bolt from './assets/bolt.mp4';
+import eth from './assets/eth.mp4';
+import globe from './assets/globe.mp4';
 import VideoCard from 'apps/web/src/components/base-org/root/VideoCardsSection/VideoCard';
 import Link from 'apps/web/src/components/Link/index';