only use webm as fallback

UoaWDCC · Aug 7, 2024 · 988d94e · 988d94e
1 parent 49b9303
commit 988d94e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/client/public/videos/hero-background.mp4 b/client/public/videos/hero-background.mp4
diff --git a/client/src/app/sections/LandingSection.tsx b/client/src/app/sections/LandingSection.tsx
@@ -11,17 +11,19 @@ const LandingSection = () => (
          flex-col items-center
          justify-center overflow-hidden"
     >
-      <div className="pointer-events-none absolute -z-10 h-full w-full brightness-[0.6]">
-        <div className="absolute inset-0 backdrop-blur-sm" />
+      <div className="pointer-events-none absolute -z-10 h-full w-full brightness-[0.5]">
+        <div className="absolute inset-0" />
         <video
-          src="/videos/hero-background.webm"
           autoPlay
-          playsInline
           muted
+          playsInline
           loop
           poster="/images/landing-video-placeholder.webp"
           className="h-full w-full object-cover"
-        />
+        >
+          <source src="/videos/hero-background.mp4" type="video/mp4" />
+          <source src="/videos/hero-background.webm" type="video/webm" />
+        </video>
       </div>
 
       <div className="flex w-full max-w-96 flex-1 flex-col justify-center gap-y-12 px-6 text-center lg:gap-16">