diff --git a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss
index e94c73b9..d4f3b245 100644
--- a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss
+++ b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss
@@ -33,6 +33,10 @@
   }
 }
 
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  width: 0;
+}
+
 .vjs-custom-progress-bar {
   .vjs-play-progress span svg {
     height: 1em;
diff --git a/src/components/MediaPlayer/VideoJS/videojs-theme.scss b/src/components/MediaPlayer/VideoJS/videojs-theme.scss
index d2a83f77..3aeeabb6 100644
--- a/src/components/MediaPlayer/VideoJS/videojs-theme.scss
+++ b/src/components/MediaPlayer/VideoJS/videojs-theme.scss
@@ -38,25 +38,23 @@
   // Set faded effect background before and after control bar
   &::before {
     content: '';
-    width: 1em;
+    width: 12px;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)),
       linear-gradient(to left, transparent, rgba(0, 0, 0, 0));
     position: absolute;
-    left: 0.215em;
+    left: -12px;
     top: 0em;
-    transform: translateX(-120%);
   }
   &::after {
     content: '';
-    width: 1em;
+    width: 12px;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)),
       linear-gradient(to left, transparent, rgba(0, 0, 0, 0));
     position: absolute;
-    right: -2.215em;
+    right: -12px;
     top: 0em;
-    transform: translateX(-121%);
   }
 }