Merge branch 'develop' into a11y-improvements

# Conflicts:
#	demo/dist/demo.css
#	dist/plyr.css
#	dist/plyr.js.map
#	dist/plyr.min.js
#	dist/plyr.min.js.map
#	dist/plyr.polyfilled.js.map
#	dist/plyr.polyfilled.min.js
#	dist/plyr.polyfilled.min.js.map
#	package.json
#	src/js/plyr.js

src/js/controls.js

@@ -1550,12 +1550,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)) {

src/js/plugins/youtube.js

@@ -188,6 +188,7 @@ const youtube = {
             videoId,
             playerVars: {
                 autoplay: player.config.autoplay ? 1 : 0, // Autoplay
+                hl: player.config.hl, // iframe interface language
                 controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
                 rel: 0, // No related vids
                 showinfo: 0, // Hide info
@@ -239,6 +240,10 @@ const youtube = {
                     triggerEvent.call(player, player.media, 'ratechange');
                 },
                 onReady(event) {
+                    // Bail if onReady has already been called. See issue #1108
+                    if (is.function(player.media.play)) {
+                        return;
+                    }
                     // Get the instance
                     const instance = event.target;
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.22
+// plyr.js v3.3.23
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -178,7 +178,7 @@ class Plyr {
                     this.elements.container.className = '';
 
                     // Get attributes from URL and set config
-                    if (url.searchParams.length) {
+                    if (url.search.length) {
                         const truthy = ['1', 'true'];
 
                         if (truthy.includes(url.searchParams.get('autoplay'))) {
@@ -191,8 +191,8 @@ class Plyr {
                         // TODO: replace fullscreen.iosNative with this playsinline config option
                         // YouTube requires the playsinline in the URL
                         if (this.isYouTube) {
-                            this.config.playsinline = truthy.includes(
-                                url.searchParams.get('playsinline'),
+                            this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
+                            this.config.hl = url.searchParams.get('hl');
                             );
                         } else {
                             this.config.playsinline = true;

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.3.22
+// plyr.js v3.3.23
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

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