diff --git a/public/opengraph/features.jpg b/public/opengraph/features.jpg
new file mode 100644
index 000000000..46b8d767b
Binary files /dev/null and b/public/opengraph/features.jpg differ
diff --git a/public/videos/timelapse.mp4 b/public/videos/timelapse.mp4
new file mode 100644
index 000000000..9fcebaddb
Binary files /dev/null and b/public/videos/timelapse.mp4 differ
diff --git a/public/videos/timelapse.webm b/public/videos/timelapse.webm
deleted file mode 100644
index ad0550115..000000000
Binary files a/public/videos/timelapse.webm and /dev/null differ
diff --git a/src/routes/_home/-sections/hero.tsx b/src/routes/_home/-sections/hero.tsx
index 118e4a1d1..68d2c1c5f 100644
--- a/src/routes/_home/-sections/hero.tsx
+++ b/src/routes/_home/-sections/hero.tsx
@@ -29,9 +29,9 @@ export function Hero() {
 						playsInline
 						// @ts-expect-error - typescript doesn't know about fetchPriority for video elements
 						fetchPriority="high"
-						src="/videos/timelapse.webm"
+						src="/videos/timelapse.mp4"
 						aria-label={t`Timelapse demonstration of building a resume with Reactive Resume`}
-						className="pointer-events-none aspect-video size-full rounded-lg border object-cover shadow-2xl"
+						className="pointer-events-none size-full rounded-lg border object-cover"
 					/>
 
 					<div