.

src/components/VideoPlayer.css

@@ -1,43 +1,56 @@
 /* ============================================
    VIDEO PLAYER - Main Container
+   Modern, Clean & Minimal Design
    ============================================ */
 
 .video-player {
+  /* Positioning */
   position: relative;
   width: 100%;
   max-width: 100%;
+
+  /* Appearance */
   background-color: var(--player-bg);
+  border-radius: var(--player-radius);
   overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
+
+  /* Typography */
+  font-family: -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;
 }
 
-/* Apply box-sizing to all child elements */
-.video-player * {
+/* Box model consistency */
+.video-player *,
+.video-player *::before,
+.video-player *::after {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
-/* Reset video element box-sizing to preserve native subtitle rendering */
+/* Preserve video native rendering */
 .video-player video {
   box-sizing: content-box;
 }
 
 /* ============================================
-   ASPECT RATIO - 16:9 Intrinsic Ratio
+   ASPECT RATIO - 16:9
    ============================================ */
 
-/* Use padding-top hack for aspect ratio */
 .video-player::before {
   content: '';
   display: block;
-  padding-top: 56.25%; /* 16:9 aspect ratio */
+  padding-top: 56.25%;
 }
 
-/* Position all direct children absolutely within aspect ratio container */
 .video-player > * {
   position: absolute;
   top: 0;
@@ -47,31 +60,20 @@
 }
 
 /* ============================================
-   FULLSCREEN SUPPORT
+   FULLSCREEN - Remove border radius
    ============================================ */
 
-.video-player:fullscreen {
-  width: 100vw;
-  height: 100vh;
-}
-
-.video-player:-webkit-full-screen {
-  width: 100vw;
-  height: 100vh;
-}
-
-.video-player:-moz-full-screen {
-  width: 100vw;
-  height: 100vh;
-}
-
+.video-player:fullscreen,
+.video-player:-webkit-full-screen,
+.video-player:-moz-full-screen,
 .video-player:-ms-fullscreen {
   width: 100vw;
   height: 100vh;
+  border-radius: 0;
 }
 
 /* ============================================
-   NATIVE CONTROLS - Hide completely
+   HIDE NATIVE CONTROLS
    ============================================ */
 
 .video-player video::-webkit-media-controls {
@@ -86,7 +88,7 @@
   display: none !important;
 }
 
-/* Ensure subtitle text tracks are visible */
+/* Keep subtitles visible */
 .video-player video::-webkit-media-text-track-container,
 .video-player video::-webkit-media-text-track-display {
   display: block !important;