From 77503140580aa3028ce12aab072fd596a45ad2ef Mon Sep 17 00:00:00 2001
From: Nepomuk Leutschacher <864660+nepomuc@users.noreply.github.com>
Date: Sun, 24 Jan 2021 06:43:36 +0100
Subject: [PATCH] Added --plyr-video-background for having control over the
 background of a video with alpha channel (webm) or a poster image with alpha
 channel. (#2076)

---
 CONTRIBUTING.md                 | 4 ++--
 README.md                       | 1 +
 src/sass/components/poster.scss | 2 +-
 src/sass/settings/colors.scss   | 1 +
 src/sass/types/video.scss       | 4 ++--
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 53e096ec..2b3efe9c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -36,8 +36,8 @@ Please follow the instructions in our issue templates. Don't use github issues t
 You can use Gitpod (a free online VS Code-like IDE) for contributing. With a single click it will launch a workspace and automatically:
 
 - clone the plyr repo.
-- install the dependencies.
-- run `gulp` to the start the server.
+- install the dependencies with `yarn install` in root directory and "demo" directory.
+- run `gulp` in root directory to start the dev server.
 
 So that you can start straight away.
 
diff --git a/README.md b/README.md
index 5ec7ad88..5b8a79e3 100644
--- a/README.md
+++ b/README.md
@@ -185,6 +185,7 @@ Here's a list of the properties and what they are used for:
 | Name                                           | Description                                                                                             | Default / Fallback                                                    |
 | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
 | `--plyr-color-main`                            | The primary UI color.                                                                                   | ![#f03c15](https://placehold.it/15/00b3ff/000000?text=+) `#00b3ff`    |
+| `--plyr-video-background`                      | The background color of video and poster wrappers for using alpha channel videos and poster images.     | `rgba(0, 0, 0, 1)`    |
 | `--plyr-tab-focus-color`                       | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus.  | `--plyr-color-main`                                                   |
 | `--plyr-badge-background`                      | The background color for badges in the menu.                                                            | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
 | `--plyr-badge-text-color`                      | The text color for badges.                                                                              | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
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/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;