4 files changed, 5 insertions, 4 deletions
diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss
index 2e966a32..3a158c1b 100644
--- a/src/sass/components/poster.scss
+++ b/src/sass/components/poster.scss
@@ -3,7 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__poster {
-  background-color: #000;
+  background-color: var(--plyr-video-background, $plyr-video-background);
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: contain;
diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss
index c9f957bb..5f1cb995 100644
--- a/src/sass/components/times.scss
+++ b/src/sass/components/times.scss
@@ -14,7 +14,7 @@
     margin-right: $plyr-control-spacing;
   }
 
-  @media (max-width: calc(#{$plyr-bp-md} - 1px)) {
+  @media (max-width: ($plyr-bp-md - 1px)) {
     display: none;
   }
 }
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index f1364905..a9846b19 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -3,6 +3,7 @@
 // ==========================================================================
 
 $plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
+$plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default;
 
 // Grayscale
 $plyr-color-gray-900: hsl(216, 15%, 16%) !default;
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
index 0cfaeacb..9a10d5ea 100644
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@@ -4,7 +4,7 @@
 
 // Container
 .plyr--video {
-  background: #000;
+  background: var(--plyr-video-background, $plyr-video-background);
   overflow: hidden;
 
   &.plyr--menu-open {
@@ -13,7 +13,7 @@
 }
 
 .plyr__video-wrapper {
-  background: #000;
+  background: var(--plyr-video-background, $plyr-video-background);
   height: 100%;
   margin: auto;
   overflow: hidden;