From 97d9228bed639f0c20b1f21468dd3f181af6b262 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 3 Jun 2019 20:13:16 +1000
Subject: [PATCH] Aspect ratio tweaks

---
 src/js/html5.js          |  6 ++++--
 src/js/listeners.js      |  9 +++++++--
 src/js/utils/elements.js |  7 ++-----
 src/js/utils/style.js    | 11 ++---------
 src/sass/lib/mixins.scss |  3 ++-
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/js/html5.js b/src/js/html5.js
index e538e922..b03e9c26 100644
--- a/src/js/html5.js
+++ b/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', {
diff --git a/src/js/listeners.js b/src/js/listeners.js
index fe8d7d3c..c5076ff3 100644
--- a/src/js/listeners.js
+++ b/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;
             }
 
diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js
index 98b44f13..4f10938e 100644
--- a/src/js/utils/elements.js
+++ b/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
diff --git a/src/js/utils/style.js b/src/js/utils/style.js
index 6f3069c9..941db8f2 100644
--- a/src/js/utils/style.js
+++ b/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
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index 554c66a5..5a1ca753 100644
--- a/src/sass/lib/mixins.scss
+++ b/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%);
     }