diff --git a/ui/js/component/video/internal/loading-screen.jsx b/ui/js/component/video/internal/loading-screen.jsx
index e1824efd5..591bc0f9f 100644
--- a/ui/js/component/video/internal/loading-screen.jsx
+++ b/ui/js/component/video/internal/loading-screen.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 
 const LoadingScreen = ({ status }) =>
-  <div className="video--loading--screen">
-    <div className="loading--screen--content">
-      <div className="loading--spinner" />
+  <div className="video--loading-screen">
+    <div className="video--loading-screen-content">
+      <div className="video--loading-spinner" />
 
-      <div className="video--loading--status">
+      <div className="video--loading-status">
         {status}
       </div>
     </div>
diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss
index 3b480eb4d..b440c0f29 100644
--- a/ui/scss/component/_video.scss
+++ b/ui/scss/component/_video.scss
@@ -28,74 +28,72 @@ video {
     /*background: none;*/
   }
 
-  .video--loading--screen {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .loading--screen--content {
-      .loading--spinner {
-        position: relative;
-        width: 11em;
-        height: 11em;
-        margin: 20px auto;
-        font-size: 3px;
-        border-radius: 50%;
-
-        background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%);
-        animation: spin 1.4s infinite linear;
-        transform: translateZ(0);
-
-        @keyframes spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-
-        &:before,
-        &:after {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-        }
-
-        &:before {
-          width: 50%;
-          height: 50%;
-          background: #ffffff;
-          border-radius: 100% 0 0 0;
-        }
-
-        &:after {
-          height: 75%;
-          width: 75%;
-          margin: auto;
-          bottom: 0;
-          right: 0;
-          background: black;
-          border-radius: 50%;
-        }
-      }
-
-
-      .video--loading--status {
-        padding-top: 20px;
-        color: white;
-      }
-    }
-  }
-
   .plyr {
     top: 50%;
     transform: translateY(-50%);
   }
 }
 
+
+.video--loading-screen {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.video--loading-spinner {
+  position: relative;
+  width: 11em;
+  height: 11em;
+  margin: 20px auto;
+  font-size: 3px;
+  border-radius: 50%;
+
+  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%);
+  animation: spin 1.4s infinite linear;
+  transform: translateZ(0);
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:before {
+    width: 50%;
+    height: 50%;
+    background: #ffffff;
+    border-radius: 100% 0 0 0;
+  }
+
+  &:after {
+    height: 75%;
+    width: 75%;
+    margin: auto;
+    bottom: 0;
+    right: 0;
+    background: black;
+    border-radius: 50%;
+  }
+}
+
+.video--loading-status {
+  padding-top: 20px;
+  color: white;
+}
+
 .video__cover {
   text-align: center;
   height: 100%;