diff --git a/packages/skins/src/default/css/components/media.css b/packages/skins/src/default/css/components/media.css
index a42f4e3d..a7d33e67 100644
--- a/packages/skins/src/default/css/components/media.css
+++ b/packages/skins/src/default/css/components/media.css
@@ -40,7 +40,7 @@
 
 .media-default-skin:fullscreen video,
 .media-default-skin:fullscreen ::slotted(video),
-.media-default-skin > img {
+.media-default-skin:fullscreen > img {
   object-fit: contain;
 }
 .media-default-skin:fullscreen ::slotted(video) {
diff --git a/packages/skins/src/minimal/css/components/media.css b/packages/skins/src/minimal/css/components/media.css
index 4d30b586..f31475ea 100644
--- a/packages/skins/src/minimal/css/components/media.css
+++ b/packages/skins/src/minimal/css/components/media.css
@@ -40,7 +40,7 @@
 
 .media-minimal-skin:fullscreen video,
 .media-minimal-skin:fullscreen ::slotted(video),
-.media-minimal-skin > img {
+.media-minimal-skin:fullscreen > img {
   object-fit: contain;
 }
 .media-minimal-skin:fullscreen ::slotted(video) {
diff --git a/site/src/components/home/HeroVideo.tsx b/site/src/components/home/HeroVideo.tsx
index b1b04097..14c66af4 100644
--- a/site/src/components/home/HeroVideo.tsx
+++ b/site/src/components/home/HeroVideo.tsx
@@ -27,7 +27,7 @@ export default function HeroVideo({
         className={className}
         style={{ '--media-border-radius': `calc(var(--spacing) * 6)`, ...style } as React.CSSProperties}
       >
-        <HlsVideo src={VJS10_DEMO_VIDEO.hls} playsInline style={{ objectFit: 'cover' }} />
+        <HlsVideo src={VJS10_DEMO_VIDEO.hls} playsInline className="object-cover" />
         <Poster src={poster} />
       </SkinComponent>
     </Player.Provider>