diff options
| -rw-r--r-- | CONTRIBUTING.md | 4 | ||||
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | src/sass/components/poster.scss | 2 | ||||
| -rw-r--r-- | src/sass/settings/colors.scss | 1 | ||||
| -rw-r--r-- | 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. @@ -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. |  `#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` | | `--plyr-badge-text-color` | The text color for badges. |  `#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; |