diff --git a/ui/component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss b/ui/component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss
index 2fb3d5824..5f409b88c 100644
--- a/ui/component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss
+++ b/ui/component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss
@@ -1,4 +1,4 @@
-/*.video-js {
+.video-js {
   $bottom: 3.5em;
   $nudge: 5px;
   $middle: 50%;
@@ -81,161 +81,4 @@
   .vjs-no-flex .vjs-overlay-right {
     margin-top: $offset-v;
   }
-}*/
-
-.video-js {
-  font-size: 12px;
-  overflow: hidden;
-
-  // Control Bar (container)
-  .vjs-control-bar {
-    background: none;
-
-    &::before {
-      position: absolute;
-      bottom: 0;
-      content: '';
-      height: 5rem;
-      width: 100%;
-      background: rgba(20, 20, 20, 0.45);
-      background: linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 100%);
-    }
-  }
-
-  // Progress Bar
-  .vjs-progress-control.vjs-control {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 1rem;
-    bottom: 90%;
-
-    // Circle play head
-    .vjs-play-progress::before {
-      transform: scale(0);
-      transition: transform .3s;
-    }
-
-    &:hover {
-      .vjs-play-progress::before {
-        transform: scale(1);
-      }
-    }
-
-    // Progress Slider
-    .vjs-slider {
-      margin: 0 1rem;
-    }
-  }
-
-  // Load progress color
-  .vjs-load-progress,
-  .vjs-load-progress div {
-    background-color: rgba(160, 160, 160, 0.5);
-  }
-
-  // Progress Bar Background
-  .vjs-slider {
-    background-color: rgba(60, 60, 60, 0.5);
-  }
-
-  // Primary Color Progress
-  .vjs-slider-bar {
-    background-color: var(--color-primary);
-  }
-
-  // Inner Progress Bar
-  .vjs-play-progress {
-    background-color: var(--color-primary);
-    color: var(--color-primary);
-  }
-
-  // Spacer
-  .vjs-custom-control-spacer {
-    display: flex;
-    flex: auto;
-  }
-
-  // Transcoding menu
-  /*.vjs-tech {
-    height: auto !important;
-    position: absolute !important;
-  }*/
-
-  // Menu size
-  .vjs-playback-rate .vjs-menu .vjs-menu-content {
-    width: 125%;
-    font-size: 10px;
-  }
-
-  // Volume slider
-  .vjs-volume-panel {
-    &.vjs-control {
-      transition: .2s;
-    }
-
-    .vjs-volume-control.vjs-volume-horizontal {
-      transition: .2s;
-    }
-  }
-}
-
-
-// Tooltip
-.vjs-mouse-display .vjs-time-tooltip {
-  color: var(--color-primary);
-}
-
-// Tooltip
-.video-js {
-  .vjs-progress-control{
-    .vjs-play-progress {
-      .vjs-time-tooltip {
-        display: none;
-      }
-    }
-  }
-}
-
-
-// Transitions control bar between active / inactive
-.vjs-has-started {
-  .vjs-control-bar {
-    opacity: 1;
-    transition: .1s;
-  }
-
-  &.vjs-user-inactive.vjs-playing {
-    .vjs-control-bar {
-      opacity: 0;
-      transition: .3s;
-    }
-  }
-
-  &.vjs-user-active.vjs-playing {
-    .vjs-control-bar {
-
-    }
-  }
-}
-
-
-// Button glow
-.video-js {
-  .vjs-control,
-  .vjs-time-divider {
-    user-select: none;
-
-    &:focus:before,
-    &:hover:before,
-    &:focus {
-      // Disable builtin button glow
-      text-shadow: none;
-    }
-  }
-}
-
-.bottom-gradient {
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
 }
diff --git a/ui/component/viewers/videoViewer/videojs.scss b/ui/component/viewers/videoViewer/videojs.scss
new file mode 100644
index 000000000..78dde5394
--- /dev/null
+++ b/ui/component/viewers/videoViewer/videojs.scss
@@ -0,0 +1,156 @@
+.video-js {
+  font-size: 12px;
+  overflow: hidden;
+
+  // Control Bar (container)
+  .vjs-control-bar {
+    background: none;
+
+    &::before {
+      position: absolute;
+      bottom: 0;
+      content: '';
+      height: 5rem;
+      width: 100%;
+      background: rgba(20, 20, 20, 0.45);
+      background: linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 100%);
+    }
+  }
+
+  // Progress Bar
+  .vjs-progress-control.vjs-control {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 1rem;
+    bottom: 90%;
+
+    // Circle play head
+    .vjs-play-progress::before {
+      transform: scale(0);
+      transition: transform .3s;
+    }
+
+    &:hover {
+      .vjs-play-progress::before {
+        transform: scale(1);
+      }
+    }
+
+    // Progress Slider
+    .vjs-slider {
+      margin: 0 1rem;
+    }
+  }
+
+  // Load progress color
+  .vjs-load-progress,
+  .vjs-load-progress div {
+    background-color: rgba(160, 160, 160, 0.5);
+  }
+
+  // Progress Bar Background
+  .vjs-slider {
+    background-color: rgba(60, 60, 60, 0.5);
+  }
+
+  // Primary Color Progress
+  .vjs-slider-bar {
+    background-color: var(--color-primary);
+  }
+
+  // Inner Progress Bar
+  .vjs-play-progress {
+    background-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+
+  // Spacer
+  .vjs-custom-control-spacer {
+    display: flex;
+    flex: auto;
+  }
+
+  // Transcoding menu
+  /*.vjs-tech {
+    height: auto !important;
+    position: absolute !important;
+  }*/
+
+  // Menu size
+  .vjs-playback-rate .vjs-menu .vjs-menu-content {
+    width: 125%;
+    font-size: 10px;
+  }
+
+  // Volume slider
+  .vjs-volume-panel {
+    &.vjs-control {
+      transition: .2s;
+    }
+
+    .vjs-volume-control.vjs-volume-horizontal {
+      transition: .2s;
+    }
+  }
+}
+
+
+// Tooltip
+.vjs-mouse-display .vjs-time-tooltip {
+  color: var(--color-primary);
+}
+
+// Tooltip
+.video-js {
+  .vjs-progress-control{
+    .vjs-play-progress {
+      .vjs-time-tooltip {
+        display: none;
+      }
+    }
+  }
+}
+
+
+// Transitions control bar between active / inactive
+.vjs-has-started {
+  .vjs-control-bar {
+    opacity: 1;
+    transition: .1s;
+  }
+
+  &.vjs-user-inactive.vjs-playing {
+    .vjs-control-bar {
+      opacity: 0;
+      transition: .3s;
+    }
+  }
+
+  &.vjs-user-active.vjs-playing {
+    .vjs-control-bar {
+
+    }
+  }
+}
+
+
+// Button glow
+.video-js {
+  .vjs-control,
+  .vjs-time-divider {
+    user-select: none;
+
+    &:focus:before,
+    &:hover:before,
+    &:focus {
+      // Disable builtin button glow
+      text-shadow: none;
+    }
+  }
+}
+
+.bottom-gradient {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
+}
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index b446f0c73..cbbd93891 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -13,6 +13,7 @@ import FileViewerEmbeddedEnded from 'web/component/fileViewerEmbeddedEnded';
 import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
 import LoadingScreen from 'component/common/loading-screen';
 import { addTheaterModeButton } from './internal/theater-mode';
+import './videojs.scss';
 
 const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
 const PLAY_TIMEOUT_LIMIT = 2000;