Use getComputedStyle for player dimensions when filtering variants. Closes #326

@@ -4,6 +4,7 @@ CHANGELOG
 ## HEAD (Unreleased)
 ## HEAD (Unreleased)
 * @dmlap improved video duration calculation. ([view](https://github.com/videojs/videojs-contrib-hls/pull/321))
 * @dmlap improved video duration calculation. ([view](https://github.com/videojs/videojs-contrib-hls/pull/321))
 * Clamp seeks to the seekable range ([view](https://github.com/videojs/videojs-contrib-hls/pull/327))
 * Clamp seeks to the seekable range ([view](https://github.com/videojs/videojs-contrib-hls/pull/327))
+* Use getComputedStyle for player dimensions when filtering variants ([view](https://github.com/videojs/videojs-contrib-hls/pull/326))
 
 
 --------------------
 --------------------
 
 

@@ -502,7 +502,9 @@ videojs.Hls.prototype.selectPlaylist = function () {
     oldvariant,
     oldvariant,
     bandwidthBestVariant,
     bandwidthBestVariant,
     resolutionPlusOne,
     resolutionPlusOne,
-    resolutionBestVariant;
+    resolutionBestVariant,
+    playerWidth,
+    playerHeight;
 
 
   sortedPlaylists.sort(videojs.Hls.comparePlaylistBandwidth);
   sortedPlaylists.sort(videojs.Hls.comparePlaylistBandwidth);
 
 
@@ -538,6 +540,9 @@ videojs.Hls.prototype.selectPlaylist = function () {
   // (this could be the lowest bitrate rendition as  we go through all of them above)
   // (this could be the lowest bitrate rendition as  we go through all of them above)
   variant = null;
   variant = null;
 
 
+  playerWidth = parseInt(getComputedStyle(player.el()).width, 10);
+  playerHeight = parseInt(getComputedStyle(player.el()).height, 10);
+
   // iterate through the bandwidth-filtered playlists and find
   // iterate through the bandwidth-filtered playlists and find
   // best rendition by player dimension
   // best rendition by player dimension
   while (i--) {
   while (i--) {
@@ -555,14 +560,14 @@ videojs.Hls.prototype.selectPlaylist = function () {
 
 
     // since the playlists are sorted, the first variant that has
     // since the playlists are sorted, the first variant that has
     // dimensions less than or equal to the player size is the best
     // dimensions less than or equal to the player size is the best
-    if (variant.attributes.RESOLUTION.width === player.width() &&
-        variant.attributes.RESOLUTION.height === player.height()) {
+    if (variant.attributes.RESOLUTION.width === playerWidth &&
+        variant.attributes.RESOLUTION.height === playerHeight) {
       // if we have the exact resolution as the player use it
       // if we have the exact resolution as the player use it
       resolutionPlusOne = null;
       resolutionPlusOne = null;
       resolutionBestVariant = variant;
       resolutionBestVariant = variant;
       break;
       break;
-    } else if (variant.attributes.RESOLUTION.width < player.width() &&
-        variant.attributes.RESOLUTION.height < player.height()) {
+    } else if (variant.attributes.RESOLUTION.width < playerWidth &&
+        variant.attributes.RESOLUTION.height < playerHeight) {
       // if we don't have an exact match, see if we have a good higher quality variant to use
       // if we don't have an exact match, see if we have a good higher quality variant to use
       if (oldvariant && oldvariant.attributes && oldvariant.attributes.RESOLUTION &&
       if (oldvariant && oldvariant.attributes && oldvariant.attributes.RESOLUTION &&
           oldvariant.attributes.RESOLUTION.width && oldvariant.attributes.RESOLUTION.height) {
           oldvariant.attributes.RESOLUTION.width && oldvariant.attributes.RESOLUTION.height) {