4 files changed, 12 insertions, 30 deletions
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 f4559bba..cc07ef7f 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -12,11 +12,11 @@
     align-items: center;
     display: flex;
     justify-content: flex-end;
-    min-width: 0; // Fix for Edge issue where content would overflow
     text-align: center;
 
     .plyr__progress__container {
         flex: 1;
+        min-width: 0; // Fix for Edge issue where content would overflow
     }
 
     // Spacing
@@ -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;
-}