hibna/player
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign video player styling

Browse Source
This commit is contained in:
Mert Uyanık
2025-10-30 04:14:28 +03:00
parent 183cc65455
commit 1113ca891c
11 changed files with 265 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/VideoPlayer.css
+17 -51
View File
@@ -1,50 +1,28 @@
/* ============================================
VIDEO PLAYER - Main Container
Modern, Clean & Minimal Design
============================================ */
.video-player {
/* Positioning */
position: relative;
display: block;
width: 100%;
max-width: 100%;
/* Appearance */
background-color: var(--player-bg);
background: var(--player-bg);
border-radius: var(--player-radius);
overflow: hidden;
/* Typography */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
color: var(--player-text);
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;
/* Interaction */
user-select: none;
-webkit-user-select: none;
/* Isolation for library usage */
contain: layout style paint;
isolation: isolate;
transition: border-radius var(--player-transition-normal) ease;
}
/* Box model consistency */
.video-player *,
.video-player *::before,
.video-player *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Preserve video native rendering */
.video-player video {
box-sizing: content-box;
}
/* ============================================
ASPECT RATIO - 16:9
============================================ */
.video-player::before {
content: '';
display: block;
@@ -53,42 +31,30 @@
.video-player > * {
position: absolute;
top: 0;
left: 0;
inset: 0;
}
.video-player video {
display: block;
width: 100%;
height: 100%;
}
/* ============================================
FULLSCREEN - Remove border radius
============================================ */
.video-player:fullscreen,
.video-player:-webkit-full-screen,
.video-player:-moz-full-screen,
.video-player:-ms-fullscreen {
width: 100vw;
height: 100vh;
.video-player:-ms-fullscreen,
:fullscreen .video-player,
:-webkit-full-screen .video-player {
border-radius: 0;
}
/* ============================================
HIDE NATIVE CONTROLS
============================================ */
.video-player video::-webkit-media-controls {
display: none !important;
}
.video-player video::-webkit-media-controls-enclosure {
display: none !important;
}
.video-player video::-webkit-media-controls,
.video-player video::-webkit-media-controls-enclosure,
.video-player video::-webkit-media-controls-panel {
display: none !important;
}
/* Keep subtitles visible */
.video-player video::-webkit-media-text-track-container,
.video-player video::-webkit-media-text-track-display {
display: block !important;