hibna
58a405d895
- Configurable keyboard shortcuts (seekSmall, seekLarge, volumeStep, disabled keys) - Configurable touch gestures (maxSeekSeconds, maxVolumeChange, doubleTapSeekSeconds) - Configurable auto-hide timeout via controlsAutoHideDelay prop - Configurable playback rates via playbackRates prop - Aspect ratio support (16:9, 4:3, 21:9, 1:1, 9:16, custom) - Extended theme system (fontFamily, borderRadius, overlayOpacity, controlsBackground, etc.) - Custom translations support via translations prop - Children/slot system (children, controlsLeftExtra, controlsRightExtra) - Ref forwarding with VideoPlayerHandle imperative API - Analytics events (onFirstPlay, onBufferStart, onBufferEnd, onQualityChange) - iOS Safari volume slider auto-hiding - SSR guards for feature detection utilities - prefers-reduced-motion CSS media query support Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.4 KiB
CSS
62 lines
1.4 KiB
CSS
.video-player {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background: var(--player-bg);
|
|
border-radius: var(--player-radius);
|
|
overflow: hidden;
|
|
color: var(--player-text);
|
|
font-family: var(--player-font-family, 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
isolation: isolate;
|
|
transition: border-radius var(--player-transition-normal) ease;
|
|
}
|
|
|
|
.video-player *,
|
|
.video-player *::before,
|
|
.video-player *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.video-player::before {
|
|
content: '';
|
|
display: block;
|
|
padding-top: var(--player-aspect-ratio, 56.25%);
|
|
}
|
|
|
|
.video-player > * {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.video-player video {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.video-player:fullscreen,
|
|
.video-player:-webkit-full-screen,
|
|
.video-player:-moz-full-screen,
|
|
.video-player:-ms-fullscreen,
|
|
:fullscreen .video-player,
|
|
:-webkit-full-screen .video-player {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.video-player video::-webkit-media-controls,
|
|
.video-player video::-webkit-media-controls-enclosure,
|
|
.video-player video::-webkit-media-controls-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
.video-player video::-webkit-media-text-track-container,
|
|
.video-player video::-webkit-media-text-track-display {
|
|
display: block !important;
|
|
}
|