fix(skin): fixes for react poster image alignment (#1003)

This commit is contained in:
Sam Potts
2026-03-19 06:59:24 +11:00
committed by GitHub
parent c95e1343e1
commit 5c7cafca9b
3 changed files with 4 additions and 24 deletions
@@ -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;
}
@@ -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;
@@ -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;
}