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';