vidply 1.0.35 → 1.0.36

package/src/styles/vidply.css

@@ -1717,9 +1717,84 @@
 /* Fullscreen Styles */
 .vidply-player.vidply-fullscreen,
 .vidply-player:fullscreen {
+    background: #000;
     height: 100vh;
     max-width: none;
     width: 100vw;
+    z-index: 2147483647; /* Maximum z-index to ensure we're above everything */
+}
+
+/* Video wrapper also needs black background in fullscreen to prevent letterbox areas showing gray */
+.vidply-player.vidply-fullscreen .vidply-video-wrapper,
+.vidply-player:fullscreen .vidply-video-wrapper {
+    background: #000 !important;
+}
+
+/* Fullscreen backdrop - the pseudo-element behind the fullscreen element */
+.vidply-player:fullscreen::backdrop {
+    background: #000;
+}
+
+/* Webkit/Safari prefix for backdrop */
+.vidply-player:-webkit-full-screen::backdrop {
+    background: #000;
+}
+
+/* Hide fixed/sticky positioned elements when any vidply player is fullscreen */
+/* This ensures headers, nav bars, and other fixed elements don't appear above the player */
+:root:has(.vidply-player:fullscreen) .fixed-top,
+:root:has(.vidply-player:fullscreen) .fixed-bottom,
+:root:has(.vidply-player:fullscreen) .sticky-top,
+:root:has(.vidply-player:fullscreen) [style*="position: fixed"],
+:root:has(.vidply-player:fullscreen) [style*="position:fixed"] {
+    display: none !important;
+}
+
+/* Same for webkit fullscreen */
+:root:has(.vidply-player:-webkit-full-screen) .fixed-top,
+:root:has(.vidply-player:-webkit-full-screen) .fixed-bottom,
+:root:has(.vidply-player:-webkit-full-screen) .sticky-top,
+:root:has(.vidply-player:-webkit-full-screen) [style*="position: fixed"],
+:root:has(.vidply-player:-webkit-full-screen) [style*="position:fixed"] {
+    display: none !important;
+}
+
+/* Fallback: Also hide elements when pseudo-fullscreen class is applied (for iOS/Safari fallback) */
+:root:has(.vidply-player.vidply-fullscreen) .fixed-top,
+:root:has(.vidply-player.vidply-fullscreen) .fixed-bottom,
+:root:has(.vidply-player.vidply-fullscreen) .sticky-top {
+    display: none !important;
+}
+
+/* Additional fallback using body class for browsers that don't support :has() */
+body.vidply-fullscreen-active .fixed-top,
+body.vidply-fullscreen-active .fixed-bottom,
+body.vidply-fullscreen-active .sticky-top,
+body.vidply-fullscreen-active [class*="fixed-"] {
+    display: none !important;
+}
+
+/* Set body and html to black background when in fullscreen */
+body.vidply-fullscreen-active,
+html:has(body.vidply-fullscreen-active) {
+    background: #000 !important;
+}
+
+/* Also target when :has() is supported */
+body:has(.vidply-player.vidply-fullscreen),
+html:has(.vidply-player.vidply-fullscreen) {
+    background: #000 !important;
+}
+
+/* Hide all other video players when one is in fullscreen mode */
+/* This prevents stacking context issues where other players show through */
+body.vidply-fullscreen-active .vidply-player:not(.vidply-fullscreen) {
+    visibility: hidden !important;
+}
+
+/* Same rule using :has() for browsers that support it */
+body:has(.vidply-player.vidply-fullscreen) .vidply-player:not(.vidply-fullscreen) {
+    visibility: hidden !important;
 }
 
 /* Pseudo-fullscreen for iOS and browsers without Fullscreen API support */