Aspect ratio tweaks

Author: sampotts

src/js/html5.js

@@ -44,8 +44,10 @@ const html5 = {
 
         const player = this;
 
-        // Set aspect ratio if set
-        setAspectRatio.call(player);
+        // Set aspect ratio if fixed
+        if (!is.empty(this.config.ratio)) {
+            setAspectRatio.call(player);
+        }
 
         // Quality
         Object.defineProperty(player.media, 'quality', {

src/js/listeners.js

@@ -336,8 +336,13 @@ class Listeners {
         on.call(player, elements.container, 'enterfullscreen exitfullscreen', event => {
             const { target, usingNative } = player.fullscreen;
 
-            // Ignore for iOS native
-            if (!player.isEmbed || target !== elements.container) {
+            // Ignore events not from target
+            if (target !== elements.container) {
+                return;
+            }
+
+            // If it's not an embed and no ratio specified
+            if (!player.isEmbed && is.empty(player.config.ratio)) {
                 return;
             }
 

src/js/utils/elements.js

@@ -192,11 +192,8 @@ export function toggleHidden(element, hidden) {
         hide = !element.hidden;
     }
 
-    if (hide) {
-        element.setAttribute('hidden', '');
-    } else {
-        element.removeAttribute('hidden');
-    }
+    // eslint-disable-next-line no-param-reassign
+    element.hidden = hide;
 }
 
 // Mirror Element.classList.toggle, with IE compatibility for "force" argument

src/js/utils/style.js

@@ -27,15 +27,8 @@ export function reduceAspectRatio(ratio) {
 }
 
 export function getAspectRatio(input) {
-    const parse = ratio => {
-        if (!validateRatio(ratio)) {
-            return null;
-        }
-
-        return ratio.split(':').map(Number);
-    };
-
-    // Provided ratio
+    const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null);
+    // Try provided ratio
     let ratio = parse(input);
 
     // Get from config

src/sass/lib/mixins.scss

@@ -62,12 +62,13 @@
 
     .plyr__video-wrapper {
         height: 100%;
-        width: 100%;
+        position: static;
     }
 
     // Vimeo requires some different styling
     &.plyr--vimeo .plyr__video-wrapper {
         height: 0;
+        position: relative;
         top: 50%;
         transform: translateY(-50%);
     }