From 5c7cafca9b7bf08c0d555c76bccb9630c2e3e9a9 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 19 Mar 2026 06:59:24 +1100
Subject: [PATCH] fix(skin): fixes for react poster image alignment (#1003)

---
 .../src/default/css/components/poster.css     |  2 ++
 .../src/minimal/css/components/media.css      | 24 -------------------
 .../src/minimal/css/components/poster.css     |  2 ++
 3 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/packages/skins/src/default/css/components/poster.css b/packages/skins/src/default/css/components/poster.css
index 7153fa4f..a1393346 100644
--- a/packages/skins/src/default/css/components/poster.css
+++ b/packages/skins/src/default/css/components/poster.css
@@ -25,6 +25,8 @@
   border-radius: var(--media-video-border-radius);
 }
 .media-default-skin > img {
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
   border-radius: inherit;
 }
 
diff --git a/packages/skins/src/minimal/css/components/media.css b/packages/skins/src/minimal/css/components/media.css
index 75d67167..9d0fd6c0 100644
--- a/packages/skins/src/minimal/css/components/media.css
+++ b/packages/skins/src/minimal/css/components/media.css
@@ -17,30 +17,6 @@
   border-radius: inherit;
 }
 
-/* ==========================================================================
-   Poster Image
-   ========================================================================== */
-
-.media-minimal-skin > img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: var(--media-object-fit, contain);
-  object-position: var(--media-object-position, center);
-  transition: opacity 0.25s;
-  pointer-events: none;
-  border-radius: inherit;
-
-  &:not([data-visible]) {
-    opacity: 0;
-  }
-}
-
-/* ==========================================================================
-   Fullscreen
-   ========================================================================== */
-
 .media-minimal-skin:fullscreen ::slotted(video),
 .media-minimal-skin:fullscreen video {
   object-fit: contain;
diff --git a/packages/skins/src/minimal/css/components/poster.css b/packages/skins/src/minimal/css/components/poster.css
index 38a5dcc5..0236c610 100644
--- a/packages/skins/src/minimal/css/components/poster.css
+++ b/packages/skins/src/minimal/css/components/poster.css
@@ -25,6 +25,8 @@
   border-radius: var(--media-video-border-radius);
 }
 .media-minimal-skin > img {
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
   border-radius: inherit;
 }