Don't move caption up when "showing" the lower controls when the controls are empty

2 files changed, 7 insertions, 7 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 4ed5b28a..91f332df 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -112,4 +112,7 @@
 
 .plyr__controls:empty {
     display: none;
-}
\ No newline at end of file
+    ~ .plyr__captions {
+        transform: translateY(0px);
+    }
+}