diff --git a/src/controllers/playback/video/index.html b/src/controllers/playback/video/index.html
index 6651fc3da2..26407cf95e 100644
--- a/src/controllers/playback/video/index.html
+++ b/src/controllers/playback/video/index.html
@@ -13,11 +13,11 @@
             <div class="osdTextContainer osdSecondaryMediaInfo"></div>
 
             <div class="flex flex-direction-row align-items-center">
-                <div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
+                <div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
                 <div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
                     <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
                 </div>
-                <div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
+                <div class="osdTextContainer endTimeText osdDurationText" style="margin: 0 0 0 .25em;"></div>
             </div>
 
             <div class="buttons focuscontainer-x">
@@ -46,8 +46,6 @@
                 </button>
 
                 <div class="osdTimeText">
-                    <span class="osdPositionText"></span>
-                    <span class="osdDurationText"></span>
                     <span class="endsAtText"></span>
                 </div>
 
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index ae48446212..0cc37fa985 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -764,7 +764,7 @@ import { appRouter } from '../../../components/appRouter';
                     }
 
                     if (runtimeTicks && positionTicks != null && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && currentItem.Type !== 'Recording') {
-                        endsAtText.innerHTML = '&nbsp;&nbsp;-&nbsp;&nbsp;' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
+                        endsAtText.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
                     } else {
                         endsAtText.innerHTML = '';
                     }
@@ -774,8 +774,20 @@ import { appRouter } from '../../../components/appRouter';
                     nowPlayingPositionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks);
                 }
 
-                updateTimeText(nowPlayingPositionText, positionTicks);
-                updateTimeText(nowPlayingDurationText, runtimeTicks, true);
+                if (positionTicks >= 0) {
+                    updateTimeText(nowPlayingPositionText, positionTicks);
+                    nowPlayingPositionText.classList.remove('hide');
+                } else {
+                    nowPlayingPositionText.classList.add('hide');
+                }
+
+                const leftTicks = runtimeTicks - positionTicks;
+                if (leftTicks >= 0) {
+                    updateTimeText(nowPlayingDurationText, leftTicks);
+                    nowPlayingDurationText.classList.remove('hide');
+                } else {
+                    nowPlayingPositionText.classList.add('hide');
+                }
             }
         }
 
diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 01221b6cae..f7503d4fd5 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -157,7 +157,7 @@
 }
 
 .mdl-slider-background-flex {
-    background: #333;
+    background: rgba(255, 255, 255, 0.3);
     height: 0.2em;
     margin-top: -0.1em;
     width: 100%;
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index a38045694e..828237a63d 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -442,7 +442,7 @@ import '../emby-input/emby-input';
             position = (position / runtime) * 100;
         }
 
-        for (const range in ranges) {
+        for (const range of ranges) {
             if (position != null) {
                 if (position >= range.end) {
                     continue;
diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js
index 0ee3b5e147..b976c47461 100644
--- a/src/plugins/htmlVideoPlayer/plugin.js
+++ b/src/plugins/htmlVideoPlayer/plugin.js
@@ -1741,13 +1741,13 @@ function tryRemoveElement(elem) {
 
     getSupportedAspectRatios() {
         return [{
-            name: 'Auto',
+            name: globalize.translate('Auto'),
             id: 'auto'
         }, {
-            name: 'Cover',
+            name: globalize.translate('AspectRatioCover'),
             id: 'cover'
         }, {
-            name: 'Fill',
+            name: globalize.translate('AspectRatioFill'),
             id: 'fill'
         }];
     }
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 2cb3b1203a..778d4d11f8 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -1430,6 +1430,8 @@
     "Preview": "Preview",
     "LabelMaxMuxingQueueSize": "Max muxing queue size:",
     "LabelMaxMuxingQueueSizeHelp": "Maximum number of packets that can be buffered while waiting for all streams to initialize. Try to increase it if you still encounter \"Too many packets buffered for output stream\" error in ffmpeg logs. The recommended value is 2048.",
+    "AspectRatioCover": "Cover",
+    "AspectRatioFill": "Fill",
     "Remuxing": "Remuxing",
     "RemuxHelp1": "The media is in an incompatible file container (MKV, AVI, WMV, etc) but both the video stream and audio stream are compatible with the device. The media will be repackaged losslessly on the fly before being sent to the device.",
     "RemuxHelp2": "Remux uses very little processing power with a completely lossless media quality.",
diff --git a/src/strings/zh-cn.json b/src/strings/zh-cn.json
index ff10f7c3af..23ddb4aea7 100644
--- a/src/strings/zh-cn.json
+++ b/src/strings/zh-cn.json
@@ -1433,6 +1433,8 @@
     "HeaderDeleteDevices": "删除所有设备",
     "DeleteDevicesConfirmation": "您确定要删除所有设备吗？所有其他会话将被注销。用户下次登录时，设备会重新出现。",
     "DeleteAll": "删除全部",
+    "AspectRatioCover": "覆盖",
+    "AspectRatioFill": "填充",
     "Remuxing": "转封装",
     "RemuxHelp1": "该媒体的载体（mkv、avi、wmv 等）不被设备支持，但视频流和音频流均与您的设备兼容，因此媒体在串流至您的设备之前将被即时无损地再封装。",
     "RemuxHelp2": "转封装只占用很少的 CPU 资源并且媒体将被完全无损地传输。",