diff --git a/assets/css/player.css b/assets/css/player.css
index 551ce8d9..b568ef25 100644
--- a/assets/css/player.css
+++ b/assets/css/player.css
@@ -285,6 +285,20 @@ video.video-js {
 	backdrop-filter: blur(2.5px);
 }*/
 
+
+#player::before {
+	display: flex;
+	content: "";
+	background-image: linear-gradient(32.5deg, rgba(17,17,17,.65), rgba(94,149,183,1));
+	position: relative;
+	top: calc(100% - 7.5em);
+	width: 100%;
+	backdrop-filter: blur(2.5px);
+	box-shadow: 0.3em 0.3em 0.5em rgba(32,32,32,0.8), 0em -0.15em 0.25em rgba(230,230,230,0.35);
+	height: 45px;
+	z-index: 10;
+}
+
 #player {
 	border-radius: 13px;
 	border: 3px solid rgba(255,255,255,1);
@@ -292,12 +306,9 @@ video.video-js {
 	background-color: rgba(0,0,0,0.8) !important;
 	backdrop-filter: blur(2.5px);
 	aspect-ratio: 16 / 9 !important;
-	height: calc(100vh - 140px) !important;
-	left: calc((100vh - 140px) * 0.5625 * 0.5);
-	--posBannerHeight: calc(100vh - 140px);
-	--posBannerWidth: calc((100vh - 140px) * 1.78);
-	--posBannerLeft: calc((100vh - 140px) * 0.5625 * 0.5);
-	width: auto !important;
+	height: var(--posPlayerHeight) !important;
+	left: var(--posBannerLeft) !important;
+	width: var(--posBannerWidth) !important;
 }
 
 #player::after {
@@ -347,19 +358,6 @@ video.video-js {
   top: 1.5em;
 }
 
-#player::before {
-	display: flex;
-	content: "";
-	background-image: linear-gradient(32.5deg, rgba(17,17,17,.65), rgba(94,149,183,1));
-	position: relative;
-	top: calc(100% - 7.5em);
-	width: 100%;
-	backdrop-filter: blur(2.5px);
-	box-shadow: 0.3em 0.3em 0.5em rgba(32,32,32,0.8), 0em -0.15em 0.25em rgba(230,230,230,0.35);
-	height: 45px;
-	z-index: 10;
-}
-
 #contents #player-container ~ .h-box {
 	position: relative;
 	display: flex;