diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
index c1bedfc1..9ce262e2 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -2516,6 +2516,33 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                     }, 100);
                     // END: Apply control bar styling from config
 
+                    // BEGIN: Apply progress bar colors from config (always applied)
+                    setTimeout(() => {
+                        const progressControl = playerRef.current.getChild('controlBar')?.getChild('progressControl');
+                        const progressEl = progressControl?.el();
+
+                        if (progressEl) {
+                            // Style the progress holder and bars with config colors
+                            const progressHolder = progressEl.querySelector('.vjs-progress-holder');
+                            if (progressHolder) {
+                                progressHolder.style.backgroundColor = PlayerConfig.progressBar.trackColor;
+                            }
+
+                            // Style the play progress bar (the filled part)
+                            const playProgress = progressEl.querySelector('.vjs-play-progress');
+                            if (playProgress) {
+                                playProgress.style.backgroundColor = PlayerConfig.progressBar.color;
+                            }
+
+                            // Style the load progress bar (buffered part)
+                            const loadProgress = progressEl.querySelector('.vjs-load-progress');
+                            if (loadProgress) {
+                                loadProgress.style.backgroundColor = PlayerConfig.progressBar.bufferColor;
+                            }
+                        }
+                    }, 150);
+                    // END: Apply progress bar colors from config
+
                     // Determine the actual position based on device type and config
                     const getActualPosition = () => {
                         if (isTouchDevice) {
@@ -2577,26 +2604,6 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                                 controlBarEl.style.position = 'relative';
                                 controlBarEl.style.width = '100%';
 
-                                // Style the progress holder and bars with config colors
-                                const progressHolder = progressEl.querySelector('.vjs-progress-holder');
-                                if (progressHolder) {
-                                    progressHolder.style.height = '100%';
-                                    progressHolder.style.margin = '0';
-                                    progressHolder.style.backgroundColor = PlayerConfig.progressBar.trackColor;
-                                }
-
-                                // Style the play progress bar (the filled part)
-                                const playProgress = progressEl.querySelector('.vjs-play-progress');
-                                if (playProgress) {
-                                    playProgress.style.backgroundColor = PlayerConfig.progressBar.color;
-                                }
-
-                                // Style the load progress bar (buffered part)
-                                const loadProgress = progressEl.querySelector('.vjs-load-progress');
-                                if (loadProgress) {
-                                    loadProgress.style.backgroundColor = PlayerConfig.progressBar.bufferColor;
-                                }
-
                                 // Store reference for cleanup
                                 customComponents.current.movedProgressControl = progressControl;
                                 customComponents.current.controlsWrapper = wrapper;
@@ -2810,7 +2817,12 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                     // END: Implement custom time display component
 
                     // BEGIN: Add spacer to push right-side buttons to the right
-                    if (controlBar && customRemainingTime && customRemainingTime.el()) {
+                    if (
+                        controlBar &&
+                        customRemainingTime &&
+                        customRemainingTime.el() &&
+                        PlayerConfig.progressBar.nonTouchPosition !== 'default'
+                    ) {
                         // Create spacer element
                         const spacer = document.createElement('div');
                         spacer.className = 'vjs-spacer-control vjs-control';
diff --git a/frontend-tools/video-js/src/config/playerConfig.js b/frontend-tools/video-js/src/config/playerConfig.js
index 699cbe21..1d9eabfc 100644
--- a/frontend-tools/video-js/src/config/playerConfig.js
+++ b/frontend-tools/video-js/src/config/playerConfig.js
@@ -17,7 +17,7 @@ const PlayerConfig = {
         // Position for touch devices: 'top' or 'bottom' (no 'default' option)
         // 'top' - progress bar above control bar
         // 'bottom' - progress bar below control bar (native touch style)
-        touchPosition: 'bottom',
+        touchPosition: 'top',
 
         // Progress bar color (hex, rgb, or CSS color name)
         color: '#019932',
@@ -32,7 +32,7 @@ const PlayerConfig = {
     // Control bar configuration
     controlBar: {
         // Background color
-        backgroundColor: '#FF00000', // 'rgba(0, 0, 0, 0.7)',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
 
         // Height in em units
         height: 3,