Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss

1 files changed, 9 insertions, 5 deletions

diff --git a/src/sass/base.scss b/src/sass/base.scss
index 84861e99..74dbb70f 100644
--- a/src/sass/base.scss
+++ b/src/sass/base.scss
@@ -5,24 +5,28 @@
 // Base
 .plyr {
     @include plyr-font-smoothing($plyr-font-smoothing);
-
+    align-items: center;
     direction: ltr;
+    display: flex;
+    flex-direction: column;
     font-family: var(--plyr-font-family);
     font-variant-numeric: tabular-nums; // Force monosace-esque number widths
     font-weight: var(--plyr-font-weight-regular);
+    height: 100%;
     line-height: var(--plyr-line-height);
     max-width: 100%;
     min-width: 200px;
     position: relative;
     text-shadow: none;
     transition: box-shadow 0.3s ease;
+    z-index: 0; // Force any border radius
 
     // Media elements
     video,
-    audio {
-        border-radius: inherit;
-        height: auto;
-        vertical-align: middle;
+    audio,
+    iframe {
+        display: block;
+        height: 100%;
         width: 100%;
     }