Merge pull request #1134 from mjfwebb/hide-empty-controls

Hide empty controls

2 files changed, 11 insertions, 6 deletions

diff --git a/src/js/controls.js b/src/js/controls.js
index 2bc8b4de..e95cfc86 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -1455,12 +1455,9 @@ const controls = {
             target = this.elements.container;
         }
 
-        // Inject controls HTML
-        if (is.element(container)) {
-            target.appendChild(container);
-        } else if (container) {
-            target.insertAdjacentHTML('beforeend', container);
-        }
+        // Inject controls HTML (needs to be before captions, hence "afterbegin")
+        const insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML';
+        target[insertMethod]('afterbegin', container);
 
         // Find the elements if need be
         if (!is.element(this.elements.controls)) {
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 9b203f43..d06cb232 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -109,3 +109,11 @@
 .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
     display: inline-block;
 }
+
+.plyr__controls:empty {
+    display: none;
+    
+    ~ .plyr__captions {
+        transform: translateY(0);
+    }
+}