7 files changed, 21 insertions, 35 deletions
diff --git a/src/sass/base.scss b/src/sass/base.scss
index 9bb9d98a..811c762d 100644
--- a/src/sass/base.scss
+++ b/src/sass/base.scss
@@ -5,24 +5,27 @@
 // Base
 .plyr {
     @include plyr-font-smoothing($plyr-font-smoothing);
-
+    align-items: center;
     direction: ltr;
+    display: flex;
     font-family: $plyr-font-family;
     font-variant-numeric: tabular-nums; // Force monosace-esque number widths
     font-weight: $plyr-font-weight-regular;
+    height: 100%;
     line-height: $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%;
     }
 
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/controls.scss b/src/sass/components/controls.scss
index 8abee204..cc07ef7f 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -41,14 +41,6 @@
         &.plyr__time + .plyr__time {
             padding-left: 0;
         }
-
-        &.plyr__volume {
-            padding-right: ($plyr-control-spacing / 2);
-        }
-
-        &.plyr__volume:first-child {
-            padding-right: 0;
-        }
     }
 
     // Hide empty controls
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
index fdcf4f2d..e5f6fe87 100644
--- a/src/sass/components/video.scss
+++ b/src/sass/components/video.scss
@@ -14,11 +14,10 @@
 
 .plyr__video-wrapper {
     background: #000;
-    border-radius: inherit;
+    height: 100%;
+    margin: auto;
     overflow: hidden;
-    position: relative;
-    // Require z-index to force border-radius
-    z-index: 0;
+    width: 100%;
 }
 
 // Default to 16:9 ratio but this is set by JavaScript based on config
@@ -33,12 +32,9 @@ $embed-padding: ((100 / 16) * 9);
 .plyr__video-embed iframe,
 .plyr__video-wrapper--fixed-ratio video {
     border: 0;
-    height: 100%;
     left: 0;
     position: absolute;
     top: 0;
-    user-select: none;
-    width: 100%;
 }
 
 // If the full custom UI is supported
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index 82a6dd36..8afd76b0 100644
--- a/src/sass/components/volume.scss
+++ b/src/sass/components/volume.scss
@@ -5,11 +5,11 @@
 .plyr__volume {
     align-items: center;
     display: flex;
-    flex: 1;
     position: relative;
 
     input[type='range'] {
         margin-left: ($plyr-control-spacing / 2);
+        margin-right: ($plyr-control-spacing / 2);
         position: relative;
         z-index: 2;
     }
@@ -22,16 +22,3 @@
         max-width: 110px;
     }
 }
-
-// Hide sound controls on iOS
-// It's not supported to change volume using JavaScript:
-// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-.plyr--is-ios .plyr__volume {
-    display: none !important;
-}
-
-// Vimeo has no toggle mute method so hide mute button
-// https://github.com/vimeo/player.js/issues/236#issuecomment-384663183
-.plyr--is-ios.plyr--vimeo [data-plyr='mute'] {
-    display: none !important;
-}
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';
diff --git a/src/sass/states/fullscreen.scss b/src/sass/states/fullscreen.scss
index 5632a60f..73dffd29 100644
--- a/src/sass/states/fullscreen.scss
+++ b/src/sass/states/fullscreen.scss
@@ -24,8 +24,8 @@
 // Fallback for unsupported browsers
 .plyr--fullscreen-fallback {
     @include plyr-fullscreen-active();
-
     bottom: 0;
+    display: block;
     left: 0;
     position: fixed;
     right: 0;