From b6765179939f9410d822459fec6706828b7016da Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 12 Mar 2026 12:44:31 +1100
Subject: [PATCH] fix(skin): only set poster object-fit: contain in fullscreen
 (#906)

---
 packages/skins/src/default/css/components/media.css | 2 +-
 packages/skins/src/minimal/css/components/media.css | 2 +-
 site/src/components/home/HeroVideo.tsx              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

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>