diff --git a/source/UI/js/Video/VideoPlayer.js b/source/UI/js/Video/VideoPlayer.js
index ae1fc174..8c390e3e 100644
--- a/source/UI/js/Video/VideoPlayer.js
+++ b/source/UI/js/Video/VideoPlayer.js
@@ -1323,6 +1323,9 @@ Ox.VideoPlayer = function(options, self) {
                 togglePaused('button');
             }
         }
+        self.$subtitle && self.$subtitle.animate({
+            bottom: getCSS('subtitle').bottom
+        }, 250);
         that.triggerEvent('durationchange', {
             duration: self.options.duration
         });
@@ -1509,14 +1512,20 @@ Ox.VideoPlayer = function(options, self) {
                 marginLeft: -self.timelineImageWidth + 'px'
             };
         } else if (element == 'subtitle') {
+            var offset = 0,
+                videoCSS;
+            if (self.options.subtitlesOffset) {
+                videoCSS = getVideoCSS();
+                offset = Math.floor((
+                    self.options.subtitlesOffset / 100
+                ) * videoCSS.height) + videoCSS.top;
+                offset = Math.max(offset, 0);
+            }
             css = {
                 bottom: (
                     Math.floor(self.height / 16)
-                    + Math.floor(
-                        self.options.subtitlesOffset / 100 * self.height
-                    )
-                    + (self.options.subtitlesOffset ? getVideoCSS().top : 0)
-                    + !!self.controlsBottomAreVisible * 16
+                    + offset
+                    + (!!self.controlsBottomAreVisible * 16)
                 ) + 'px',
                 width: self.width + 'px',
                 fontSize: Math.floor(self.height / 20) + 'px',
@@ -1949,6 +1958,9 @@ Ox.VideoPlayer = function(options, self) {
         if (self.options.enableKeyboard && self.options.focus == 'load') {
             that.gainFocus();
         }
+        self.$subtitle && self.$subtitle.animate({
+            bottom: getCSS('subtitle').bottom
+        }, 250);
         that.triggerEvent('loadedmetadata');
     }