From 15d1a66bda987baf740d4d94c0e962edb0d86da0 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Tue, 10 Mar 2026 11:59:10 -0500
Subject: [PATCH] feat(site): use HlsVideo in homepage HeroVideo component
 (#854)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 site/src/components/home/HeroVideo.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/site/src/components/home/HeroVideo.tsx b/site/src/components/home/HeroVideo.tsx
index 3729d294..b1b04097 100644
--- a/site/src/components/home/HeroVideo.tsx
+++ b/site/src/components/home/HeroVideo.tsx
@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { createPlayer, Poster } from '@videojs/react';
-import { MinimalVideoSkin, Video, VideoSkin, videoFeatures } from '@videojs/react/video';
+import { HlsVideo } from '@videojs/react/media/hls-video';
+import { MinimalVideoSkin, VideoSkin, videoFeatures } from '@videojs/react/video';
 import { VJS10_DEMO_VIDEO } from '@/consts';
 import { skin } from '@/stores/homePageDemos';
 import '@videojs/react/video/skin.css';
@@ -26,7 +27,7 @@ export default function HeroVideo({
         className={className}
         style={{ '--media-border-radius': `calc(var(--spacing) * 6)`, ...style } as React.CSSProperties}
       >
-        <Video src={VJS10_DEMO_VIDEO.mp4} playsInline style={{ objectFit: 'cover' }} />
+        <HlsVideo src={VJS10_DEMO_VIDEO.hls} playsInline style={{ objectFit: 'cover' }} />
         <Poster src={poster} />
       </SkinComponent>
     </Player.Provider>