diff --git a/src/js/utils/style.js b/src/js/utils/style.js
index 941db8f2..17a033fe 100644
--- a/src/js/utils/style.js
+++ b/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
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 };
diff --git a/src/sass/base.scss b/src/sass/base.scss
index 2aefd909..811c762d 100644
--- a/src/sass/base.scss
+++ b/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%;
diff --git a/src/sass/components/audio.scss b/src/sass/components/audio.scss
new file mode 100644
index 00000000..285d34f9
--- /dev/null
+++ b/src/sass/components/audio.scss
@@ -0,0 +1,7 @@
+// --------------------------------------------------------------
+// Audio styles
+// --------------------------------------------------------------
+
+.plyr--audio {
+ display: block;
+}
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
index ef70c104..e5f6fe87 100644
--- a/src/sass/components/video.scss
+++ b/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
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 144297f7..445ca1ea 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -25,6 +25,7 @@
@import 'base';
+@import 'components/audio';
@import 'components/badges';
@import 'components/captions';
@import 'components/control';