diff options
| author | Nepomuk Leutschacher <864660+nepomuc@users.noreply.github.com> | 2021-01-24 06:43:36 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-01-24 16:43:36 +1100 |
| commit | 77503140580aa3028ce12aab072fd596a45ad2ef (patch) | |
| tree | a7c953bb63ab8de5980c8b05a3716155bf84ff22 /src | |
| parent | 16c134fc1e1c1a6938c2d86d8e884530a0ad4711 (diff) | |
| download | plyr-77503140580aa3028ce12aab072fd596a45ad2ef.tar.lz plyr-77503140580aa3028ce12aab072fd596a45ad2ef.tar.xz plyr-77503140580aa3028ce12aab072fd596a45ad2ef.zip | |
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)
Diffstat (limited to 'src')
| -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 |
3 files changed, 4 insertions, 3 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/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; |