ID fix and styling fix

src/js/plyr.js

@@ -397,6 +397,15 @@
         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     }
 
+    // Determine if we're in an iframe
+    function inFrame() {
+        try {
+            return window.self !== window.top;
+        } catch (e) {
+            return true;
+        }
+    }
+
     // Element exists in an array
     function inArray(haystack, needle) {
         return Array.prototype.indexOf && (haystack.indexOf(needle) !== -1);
@@ -985,15 +994,6 @@
             return getElements(selector)[0];
         }
 
-        // Determine if we're in an iframe
-        function inFrame() {
-            try {
-                return window.self !== window.top;
-            } catch (e) {
-                return true;
-            }
-        }
-
         // Trap focus inside container
         function focusTrap() {
             var tabbables = getElements('input:not([disabled]), button:not([disabled])');
@@ -1171,17 +1171,14 @@
 
         // Create an <input type='range'>
         function createRange(type, attributes) {
-            var id = 'plyr-' + type + (is.object(attributes) && 'id' in attributes ? '-' + attributes.id : '');
-
             // Seek label
             var label = createElement('label', {
-                for: id,
+                for: attributes.id,
                 class: config.classes.hidden
             }, config.i18n[type]);
 
             // Seek input
             var input = createElement('input', extend(getAttributesFromSelector(config.selectors.inputs[type]), {
-                id: id,
                 type: 'range',
                 min: 0,
                 max: 100,
@@ -1278,7 +1275,7 @@
 
                 // Seek range slider
                 var seek = createRange('seek', {
-                    id: data.id
+                    id: 'plyr-seek-' + data.id
                 });
                 container.appendChild(seek.label);
                 container.appendChild(seek.input);
@@ -1329,13 +1326,14 @@
 
                 // Set the attributes
                 var attributes = {
-                    id: data.id,
                     max: 10,
                     value: config.volume
                 };
 
                 // Create the volume range slider
-                var range = createRange('volume', attributes);
+                var range = createRange('volume', extend(attributes, {
+                    id: 'plyr-volume-' + data.id
+                }));
                 volume.appendChild(range.label);
                 volume.appendChild(range.input);
 

src/less/plyr.less

@@ -495,6 +495,7 @@
     // The actual menu container
     &__container {
         position: absolute;
+        z-index: 1;
         bottom: 100%;
         right: -5px;
         margin-bottom: 10px;
@@ -528,7 +529,7 @@
 
         ul {
             margin: 0;
-            padding: 5px;
+            padding: @plyr-control-padding;
             list-style: none;
             overflow: hidden;
         }
@@ -561,10 +562,11 @@
 
             &--back {
                 position: relative;
-                padding-top: floor(@plyr-control-padding * .7);
+                @horizontal-padding: (@plyr-control-padding * 2);
-                padding-bottom: floor(@plyr-control-padding * .7);
+                width: ~"calc(100% - @{horizontal-padding})";
+                margin: @plyr-control-padding;
+                margin-bottom: floor(@plyr-control-padding / 2);
                 padding-left: ceil(@plyr-control-padding * 4);
-                margin-bottom: ceil(@plyr-control-padding * 1.3);
                 font-weight: 500;
 
                 &::after {