Audio style fix

src/js/utils/style.js

@@ -56,11 +56,12 @@ export function setAspectRatio(input) {
         return {};
     }
 
+    const { wrapper } = this.elements;
     const ratio = getAspectRatio.call(this, input);
     const [w, h] = is.array(ratio) ? ratio : [0, 0];
     const padding = (100 / w) * h;
 
-    this.elements.wrapper.style.paddingBottom = `${padding}%`;
+    wrapper.style.paddingBottom = `${padding}%`;
 
     // For Vimeo we have an extra <div> to hide the standard controls and UI
     if (this.isVimeo && this.supported.ui) {
@@ -68,7 +69,7 @@ export function setAspectRatio(input) {
         const offset = (height - padding) / (height / 50);
         this.media.style.transform = `translateY(-${offset}%)`;
     } else if (this.isHTML5) {
-        this.elements.wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
+        wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
     }
 
     return { padding, ratio };

src/sass/base.scss

@@ -18,12 +18,12 @@
     position: relative;
     text-shadow: none;
     transition: box-shadow 0.3s ease;
+    z-index: 0; // Force any border radius
 
     // Media elements
     video,
     audio,
     iframe {
-        border-radius: inherit;
         display: block;
         height: 100%;
         width: 100%;

src/sass/components/audio.scss

@@ -0,0 +1,7 @@
+// --------------------------------------------------------------
+// Audio styles
+// --------------------------------------------------------------
+
+.plyr--audio {
+    display: block;
+}

src/sass/components/video.scss

@@ -14,14 +14,10 @@
 
 .plyr__video-wrapper {
     background: #000;
-    border-radius: inherit;
     height: 100%;
     margin: auto;
     overflow: hidden;
-    position: relative;
     width: 100%;
-    // Require z-index to force border-radius
-    z-index: 0;
 }
 
 // Default to 16:9 ratio but this is set by JavaScript based on config

src/sass/plyr.scss

@@ -25,6 +25,7 @@
 
 @import 'base';
 
+@import 'components/audio';
 @import 'components/badges';
 @import 'components/captions';
 @import 'components/control';