fix subtitles css for 'scale to fill' case

source/UI/js/Video/VideoPlayer.js

@@ -71,7 +71,7 @@ Ox.VideoPlayer <f> Generic Video Player
             out <n> Out point (sec)
             text <s> Text
             tracks <[s]> Track names, like "English" or "Director's Commentary"
-        subtitlesOffset <n|0> adds bottom offset below subtitles in % of height
+        subtitlesOffset <n|0> bottom offset for subtitles in % of video height
         subtitlesDefaultTrack <s|'English'> Track name
         subtitlesTrack <s|'English'> Track name
         timeline <s> Timeline image URL
@@ -1509,15 +1509,7 @@ Ox.VideoPlayer = function(options, self) {
                 marginLeft: -self.timelineImageWidth + 'px'
             };
         } else if (element == 'subtitle') {
-            css = {
-                bottom: (Math.floor(self.height / 16)
-                    + Math.floor(self.options.subtitlesOffset/100 * self.height)
-                    + !!self.controlsBottomAreVisible * 16
-                ) + 'px',
-                width: self.width + 'px',
-                fontSize: Math.floor(self.height / 20) + 'px',
-                WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
-            };
+            css = getSubtitlesCSS();
         } else if (element == 'spaceBottom' || element == 'timeline') {
             css = {
                 width: self.timelineWidth + 'px'
@@ -1639,6 +1631,20 @@ Ox.VideoPlayer = function(options, self) {
             : [];
     }
 
+    function getSubtitlesCSS() {
+        return {
+            bottom: (
+                Math.floor(self.height / 16)
+                + Math.floor(self.options.subtitlesOffset / 100 * self.height)
+                + (self.options.subtitlesOffset ? getVideoCSS().top : 0)
+                + !!self.controlsBottomAreVisible * 16
+            ) + 'px',
+            width: self.width + 'px',
+            fontSize: Math.floor(self.height / 20) + 'px',
+            WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
+        };
+    }
+
     function getTimeline() {
         var $timeline = Ox.SmallVideoTimeline({
                 //_offset: getTimelineLeft(),
@@ -1727,6 +1733,16 @@ Ox.VideoPlayer = function(options, self) {
 
     function getVideoCSS(videoWidth, videoHeight) {
         // optional arguments allow for this function to be used for poster CSS
+        var dimensions = getVideoDimensions(videoWidth, videoHeight);
+        return {
+            left: Math.floor((self.width - dimensions[0]) / 2),
+            top: Math.floor((self.height - dimensions[1]) / 2),
+            width: dimensions[0],
+            height: dimensions[1]
+        };
+    }
+
+    function getVideoDimensions(videoWidth, videoHeight) {
         var playerWidth = self.width,
             playerHeight = self.height,
             playerRatio = playerWidth / playerHeight,
@@ -1742,14 +1758,7 @@ Ox.VideoPlayer = function(options, self) {
             width = videoIsWider ? playerWidth : playerHeight * videoRatio;
             height = videoIsWider ? playerWidth / videoRatio : playerHeight;
         }
-        width = Math.round(width);
-        height = Math.round(height);
-        return {
-            left: Math.floor((playerWidth - width) / 2),
-            top: Math.floor((playerHeight - height) / 2),
-            width: width,
-            height: height
-        };
+        return [Math.round(width), Math.round(height)];
     }
 
     function getVolumeImage() {