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; }