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); + } +}