fix(html): simplify styles for slotted video (#953)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
2026-03-15 22:41:46 +11:00
committed by GitHub
co-authored by Claude Opus 4.6
parent c39b1f8809
commit d6e471a837
12 changed files with 96 additions and 68 deletions
+10 -12
View File
@@ -2,24 +2,22 @@ video-player {
display: contents;
}
video-player video,
video-player hls-video,
video-player simple-hls-video {
/*
Required to override any default video styles (such as Tailwind's CSS reset)
and ensure the video element fills the container as expected.
*/
video-player video {
display: block;
width: 100%;
height: 100%;
object-fit: var(--media-object-fit, contain);
object-position: var(--media-object-position, center);
}
video-player video::-webkit-media-text-track-container {
transition: transform var(--media-caption-track-duration, 150ms) ease-out;
transition-delay: var(--media-caption-track-delay, 600ms);
transition: transform var(--media-caption-track-duration, 0) ease-out;
transition-delay: var(--media-caption-track-delay, 0);
transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
z-index: var(--media-caption-track-z, 1);
z-index: 1;
font-family: inherit;
}
@media (prefers-reduced-motion: reduce) {
video-player video::-webkit-media-text-track-container {
transition-duration: 50ms;
}
}