diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css
index eecf155f..f873ef06 100644
--- a/frontend-tools/video-js/src/VideoJS.css
+++ b/frontend-tools/video-js/src/VideoJS.css
@@ -860,11 +860,97 @@ button {
 #page-embed .video-js-root-embed {
     position: fixed;
     top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 9999;
-    background: #000;
+}
+
+/* Sticky controls for embed player - always at bottom of window */
+#page-embed .video-js-root-embed .video-js .vjs-control-bar {
+    position: fixed !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100vw !important;
+    z-index: 1001 !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    background-image: none !important;
+    padding: 0 12px !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Ensure progress bar is also sticky for embed player */
+#page-embed .video-js-root-embed .video-js .vjs-progress-control {
+    position: fixed !important;
+    bottom: 48px !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100vw !important;
+    z-index: 1000 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+}
+
+/* Ensure gradient overlay extends to full window width for embed */
+#page-embed .video-js-root-embed .video-js::after {
+    position: fixed !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100vw !important;
+    height: 120px !important;
+    z-index: 999 !important;
+}
+
+/* Mobile optimizations for embed player sticky controls */
+@media (max-width: 768px) {
+    #page-embed .video-js-root-embed .video-js .vjs-control-bar {
+        height: 56px !important; /* Larger touch target on mobile */
+        padding: 0 16px !important; /* More padding for touch */
+        margin: 0 !important;
+        border: none !important;
+        background: transparent !important;
+        background-color: transparent !important;
+        background-image: none !important;
+    }
+
+    #page-embed .video-js-root-embed .video-js .vjs-progress-control {
+        bottom: 56px !important; /* Adjust for larger control bar */
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    /* Ensure controls don't interfere with mobile browser chrome */
+    #page-embed .video-js-root-embed .video-js .vjs-control-bar {
+        padding-bottom: env(safe-area-inset-bottom, 0) !important;
+    }
+}
+
+/* Ensure controls are always visible when user is active (embed only) */
+#page-embed .video-js-root-embed .video-js.vjs-user-active .vjs-control-bar,
+#page-embed .video-js-root-embed .video-js.vjs-paused .vjs-control-bar,
+#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-control-bar {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: translateY(0) !important;
+}
+
+/* Smooth transitions for control visibility */
+#page-embed .video-js-root-embed .video-js .vjs-control-bar {
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease !important;
+}
+
+/* Hide controls when user is inactive (but keep them sticky) */
+#page-embed .video-js-root-embed .video-js.vjs-user-inactive:not(.vjs-paused):not(.vjs-ended) .vjs-control-bar {
+    opacity: 0 !important;
+    transform: translateY(100%) !important;
+}
+
+#page-embed .video-js-root-embed .video-js.vjs-user-inactive:not(.vjs-paused):not(.vjs-ended) .vjs-progress-control {
+    opacity: 0 !important;
 }
 
 .video-chapter {