diff --git a/assets/vendor/plyr/.editorconfig b/assets/vendor/plyr/.editorconfig index dd9beec..8c580cb 100644 --- a/assets/vendor/plyr/.editorconfig +++ b/assets/vendor/plyr/.editorconfig @@ -4,7 +4,7 @@ root = true [*] charset = utf-8 end_of_line = lf -indent_size = 4 +indent_size = 2 indent_style = space insert_final_newline = true trim_trailing_whitespace = true diff --git a/assets/vendor/plyr/.github/issue_template.md b/assets/vendor/plyr/.github/issue_template.md index 54f4550..44e1fcb 100644 --- a/assets/vendor/plyr/.github/issue_template.md +++ b/assets/vendor/plyr/.github/issue_template.md @@ -1,3 +1,3 @@ PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions. -Our issue tracker is not for support questions. If you need help, follow our support instructions: https://github.com/sampotts/plyr/blob/master/contributing.md#support +Our issue tracker is not for support questions. If you need help, follow our support instructions: https://github.com/sampotts/plyr/blob/master/CONTRIBUTING.md#support diff --git a/assets/vendor/plyr/.gitpod.yml b/assets/vendor/plyr/.gitpod.yml new file mode 100644 index 0000000..c4a6705 --- /dev/null +++ b/assets/vendor/plyr/.gitpod.yml @@ -0,0 +1,6 @@ +tasks: + - before: npm install && npm i gulp -g + command: gulp +ports: + - port: 3000 + onOpen: open-preview diff --git a/assets/vendor/plyr/.npmignore b/assets/vendor/plyr/.npmignore index 34fa175..1caa61f 100644 --- a/assets/vendor/plyr/.npmignore +++ b/assets/vendor/plyr/.npmignore @@ -9,4 +9,4 @@ yarn.lock package-lock.json *.mp4 *.webm -!dist/blank.mp4 \ No newline at end of file +!dist/blank.mp4 diff --git a/assets/vendor/plyr/.nvmrc b/assets/vendor/plyr/.nvmrc index 12591bd..4e8c43e 100644 --- a/assets/vendor/plyr/.nvmrc +++ b/assets/vendor/plyr/.nvmrc @@ -1 +1 @@ -v13.8.0 \ No newline at end of file +v13.8.0 diff --git a/assets/vendor/plyr/.prettierrc b/assets/vendor/plyr/.prettierrc index cee783d..ed20200 100644 --- a/assets/vendor/plyr/.prettierrc +++ b/assets/vendor/plyr/.prettierrc @@ -1,7 +1,7 @@ { - "useTabs": false, - "tabWidth": 4, - "singleQuote": true, - "trailingComma": "all", - "printWidth": 120 + "useTabs": false, + "tabWidth": 2, + "singleQuote": true, + "trailingComma": "all", + "printWidth": 120 } diff --git a/assets/vendor/plyr/.stylelintrc.json b/assets/vendor/plyr/.stylelintrc.json index 83175ed..fc13954 100644 --- a/assets/vendor/plyr/.stylelintrc.json +++ b/assets/vendor/plyr/.stylelintrc.json @@ -1,25 +1,25 @@ { - "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"], - "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"], - "rules": { - "selector-class-pattern": null, - "selector-no-qualifying-type": [ - true, - { - "ignore": ["attribute", "class"] - } - ], - "string-no-newline": null, - "indentation": 4, - "string-quotes": "single", - "max-nesting-depth": 2, - "plugin/selector-bem-pattern": { - "preset": "bem", - "componentName": "(([a-z0-9]+(?!-$)-?)+)", - "componentSelectors": { - "initial": "\\.{componentName}(((__|--)(([a-z0-9\\[\\]'=]+(?!-$)-?)+))+)?$" - }, - "ignoreSelectors": [".*\\.has-.*", ".*\\.is-.*"] - } + "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"], + "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"], + "rules": { + "selector-class-pattern": null, + "selector-no-qualifying-type": [ + true, + { + "ignore": ["attribute", "class"] + } + ], + "string-no-newline": null, + "indentation": 2, + "string-quotes": "single", + "max-nesting-depth": 2, + "plugin/selector-bem-pattern": { + "preset": "bem", + "componentName": "(([a-z0-9]+(?!-$)-?)+)", + "componentSelectors": { + "initial": "\\.{componentName}(((__|--)(([a-z0-9\\[\\]'=]+(?!-$)-?)+))+)?$" + }, + "ignoreSelectors": [".*\\.has-.*", ".*\\.is-.*"] } + } } diff --git a/assets/vendor/plyr/changelog.md b/assets/vendor/plyr/changelog.md index 077b899..c268bd1 100644 --- a/assets/vendor/plyr/changelog.md +++ b/assets/vendor/plyr/changelog.md @@ -1,201 +1,231 @@ +### v3.6.2 + +- Fixes for CSS Custom Property related errors in some build tools (thanks @Bashev) +- Fixes for custom controls as element (thanks @taylorchu) +- Added missing TypeScript interface for preview thumbnail options (thanks @taylorchu) + +### v3.6.1 + +- Safari bug fix + +## v3.6.0 + +- You can now easily change colors using CSS Custom Properties. See the [README](README.md#customizing-the-css). +- Bug fix for Vimeo fullscreen. +- Various typos (thanks @likev) +- Preload TextTracks as per default video element (thanks @theprojectsomething) +- Features/fullscreen container (thanks @theprojectsomething) +- Ignore internal play promises (thanks @ydylla) +- Ads plugin fixes to allow multiple VAST requests (thanks @Steejo) +- Fix shadowroot (thanks @jnoordsij) +- Add financial contributors for Open Collective (thanks @monkeywithacupcake) +- Update the gitpod setup description to be more precise. (thanks @nisarhassan12) +- Completely hide SVG icons to screen readers (thanks @LeBenLeBen) +- Preview thumbnails via src:callback() (thanks @doublex) +- Add missing Typescripts types and options (thanks @hug963) +- Use number instead of string in TS quality definitions (thanks @mogzol) +- Fix Vimeo playback rate (thanks @hug963) +- Fix issue when controls config is string or element (thanks @CzBiX) +- Simplify contributions by fully automating the dev setup with gitpod (thanks @nisarhassan12) + ### v3.5.10 -- iOS volume display fix +- iOS volume display fix ### v3.5.9 -- Fix for regression with volume control width -- Ensure poster image is not downloaded again for HTML5 videos +- Fix for regression with volume control width +- Ensure poster image is not downloaded again for HTML5 videos ### v3.5.8 -- Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS -- Cleaned up the organisation of some of the SCSS files (should not effect CSS output) -- Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site -- Remove all Vimeo controls for Pro & Premium accounts -- Improve thumbnail size calculations when size is set per css (thanks @ydylla) -- Add previewThumbnails source setter (thanks @ydylla) -- More speed setting logic improvements +- Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS +- Cleaned up the organisation of some of the SCSS files (should not effect CSS output) +- Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site +- Remove all Vimeo controls for Pro & Premium accounts +- Improve thumbnail size calculations when size is set per css (thanks @ydylla) +- Add previewThumbnails source setter (thanks @ydylla) +- More speed setting logic improvements ### v3.5.7 -- Typescript typings (thanks @ondratra) -- `togglePlay` now also returns a `Promise` (thanks @azizhk) -- Documentation improvements and typo fixes (thanks @ffpetrovic, @skerbis, @ayunami2000, @pjbaert, @MaxGiting, @0xflotus and @thatrobotdev) -- Accessibility tweak for the play button (thanks @lunika) -- Fix for ads configuration (thanks @SoftCreatR) -- Fix handling listener return value (thanks @taion) -- Added localisation key for PIP (picture-in-picture) (thanks @lmislm) -- Preserve viewBox attribute in SVG sprite symbols (thanks @bseib) -- Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh) -- Fixed Plyr container not resizing responsively (thanks @shravan2x) -- Change vimeo demo video (thanks @thatrobotdev) -- Fix for `Uncaught RangeError: Maximum call stack size exceeded` (thanks @laukstein) -- Improve fullscreen experience on some devices (thanks @savroff) -- Improvements to buffering state for embedded players (thanks @doostinharrell) -- Prevents IE11 with resetOnEnd option set to true to play video again (thanks @Felipe K. De Boni) -- Fix for multiple poster image downloads (use the native poster only for HTML5 videos) -- Various presentational fixes -- Removed logic to hide/show volume controls based on audio track detection due to it's problematic nature. If you want to hide volume control, use the `controls` option to do so. -- Fix preview thumbnail scrubbing not working on mobile touch devices (thanks @ydylla) -- Add download attribute to download button (thanks @Code1110) -- Trap keyboard focus only when fullscreen (thanks @k-jensen) -- Improvements to speed options - you can now specify all options in the UI (YouTube and Vimeo only accept 0.5-2) (thanks @ydylla) -- Improve/fix quality change state restoring (thanks @ydylla) +- Typescript typings (thanks @ondratra) +- `togglePlay` now also returns a `Promise` (thanks @azizhk) +- Documentation improvements and typo fixes (thanks @ffpetrovic, @skerbis, @ayunami2000, @pjbaert, @MaxGiting, @0xflotus and @thatrobotdev) +- Accessibility tweak for the play button (thanks @lunika) +- Fix for ads configuration (thanks @SoftCreatR) +- Fix handling listener return value (thanks @taion) +- Added localisation key for PIP (picture-in-picture) (thanks @lmislm) +- Preserve viewBox attribute in SVG sprite symbols (thanks @bseib) +- Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh) +- Fixed Plyr container not resizing responsively (thanks @shravan2x) +- Change vimeo demo video (thanks @thatrobotdev) +- Fix for `Uncaught RangeError: Maximum call stack size exceeded` (thanks @laukstein) +- Improve fullscreen experience on some devices (thanks @savroff) +- Improvements to buffering state for embedded players (thanks @doostinharrell) +- Prevents IE11 with resetOnEnd option set to true to play video again (thanks @Felipe K. De Boni) +- Fix for multiple poster image downloads (use the native poster only for HTML5 videos) +- Various presentational fixes +- Removed logic to hide/show volume controls based on audio track detection due to it's problematic nature. If you want to hide volume control, use the `controls` option to do so. +- Fix preview thumbnail scrubbing not working on mobile touch devices (thanks @ydylla) +- Add download attribute to download button (thanks @Code1110) +- Trap keyboard focus only when fullscreen (thanks @k-jensen) +- Improvements to speed options - you can now specify all options in the UI (YouTube and Vimeo only accept 0.5-2) (thanks @ydylla) +- Improve/fix quality change state restoring (thanks @ydylla) _Note:_ This update contains CSS changes. ### v3.5.6 -- Another Edge fix (thanks Nick Hawk via Slack) +- Another Edge fix (thanks Nick Hawk via Slack) ### v3.5.5 -- YouTube fix for when there are other embeds on the page (thanks @aFarkas) -- Separated demo dependencies into their own package.json -- Fix for Edge controls flexbox issue when resizing the player (thanks Nick Hawk via Slack) -- More aspect ratio fixes +- YouTube fix for when there are other embeds on the page (thanks @aFarkas) +- Separated demo dependencies into their own package.json +- Fix for Edge controls flexbox issue when resizing the player (thanks Nick Hawk via Slack) +- More aspect ratio fixes ### v3.5.4 -- Added: Set download URL via new setter -- Improvement: The order of the `controls` option now effects the order in the DOM - i.e. you can re-order the controls - Note: this may break any custom CSS you have setup. Please see the changes in the PR to the default SASS -- Fixed issue with empty controls and preview thumbs -- Fixed issue with setGutter call (from Sentry) -- Fixed issue with initial selected speed not working -- Added notes on `autoplay` config option and browser compatibility -- Fixed issue with ads volume not matching current content volume -- Fixed race condition where ads were loading during source change -- Improvement: Automatic aspect ratio for YouTube is now supported, meaning all aspect ratios are set based on media content - Note: we're now using a different API to get YouTube video metadata so you may need to adjust any CSPs you have setup -- Fix for menu in the Shadow DOM (thanks @emielbeinema) +- Added: Set download URL via new setter +- Improvement: The order of the `controls` option now effects the order in the DOM - i.e. you can re-order the controls - Note: this may break any custom CSS you have setup. Please see the changes in the PR to the default SASS +- Fixed issue with empty controls and preview thumbs +- Fixed issue with setGutter call (from Sentry) +- Fixed issue with initial selected speed not working +- Added notes on `autoplay` config option and browser compatibility +- Fixed issue with ads volume not matching current content volume +- Fixed race condition where ads were loading during source change +- Improvement: Automatic aspect ratio for YouTube is now supported, meaning all aspect ratios are set based on media content - Note: we're now using a different API to get YouTube video metadata so you may need to adjust any CSPs you have setup +- Fix for menu in the Shadow DOM (thanks @emielbeinema) ### v3.5.3 -- Improved the usage of the `ratio` config option; it now works as expected and for all video types. The default has not changed, it is to dynamically, where possible (except YouTube where 16:9 is used) determine the ratio from the media source so this is not a breaking change. -- Added new `ratio` getter and setter -- Fix: Properly clear all timeouts on destroy -- Fix: Allow absolute paths in preview thumbnails -- Improvement: Allow optional hours and ms in VTT parser in preview thumbnails +- Improved the usage of the `ratio` config option; it now works as expected and for all video types. The default has not changed, it is to dynamically, where possible (except YouTube where 16:9 is used) determine the ratio from the media source so this is not a breaking change. +- Added new `ratio` getter and setter +- Fix: Properly clear all timeouts on destroy +- Fix: Allow absolute paths in preview thumbnails +- Improvement: Allow optional hours and ms in VTT parser in preview thumbnails ### v3.5.2 -- Fixed issue where the preview thumbnail was present while scrubbing +- Fixed issue where the preview thumbnail was present while scrubbing ### v3.5.1 -- Fixed build issues with babel and browserslist +- Fixed build issues with babel and browserslist ## v3.5.0 -- Preview seek/scrubbing thumbnails (thanks @jamesoflol) -- Fixes for proxy listeners (thanks @gurupras) -- Fix for buffer progress transition on WebKit (thanks @samuelgozi) -- Fix for error when mime type not specified (fixes #1274) -- Support YouTube noCookie (thanks Omar Khatib) -- Add Angular plugin reference (thanks @smnbbrv) -- Use `Math.trunc` instead of `parseInt` (thanks @taion) -- Many fixes for fullscreen in embedded players with non 16:9 screens or videos -- Added 'force' fallback option for fullscreen -- [RangeTouch](https://rangetouch.com) is now bundled with Plyr as a dependency to fix the scrubber on touch devices +- Preview seek/scrubbing thumbnails (thanks @jamesoflol) +- Fixes for proxy listeners (thanks @gurupras) +- Fix for buffer progress transition on WebKit (thanks @samuelgozi) +- Fix for error when mime type not specified (fixes #1274) +- Support YouTube noCookie (thanks Omar Khatib) +- Add Angular plugin reference (thanks @smnbbrv) +- Use `Math.trunc` instead of `parseInt` (thanks @taion) +- Many fixes for fullscreen in embedded players with non 16:9 screens or videos +- Added 'force' fallback option for fullscreen +- [RangeTouch](https://rangetouch.com) is now bundled with Plyr as a dependency to fix the scrubber on touch devices ### v3.4.8 -- Calling customized controls function with proper arguments (thanks @a60814billy) +- Calling customized controls function with proper arguments (thanks @a60814billy) ### v3.4.7 -- Fix for Vimeo fullscreen with non native aspect ratios (fixes #854) +- Fix for Vimeo fullscreen with non native aspect ratios (fixes #854) ### v3.4.6 -- Added picture-in-picture support for Chrome 70+ -- Fixed issue with versioning the SVG sprite in the gulp build script +- Added picture-in-picture support for Chrome 70+ +- Fixed issue with versioning the SVG sprite in the gulp build script ### v3.4.5 -- Added download button option to download either current source or a custom URL you specify in options -- Prevent immediate hiding of controls on mobile (thanks @jamesoflol) -- Don't hide controls on focusout event (fixes #1122) (thanks @jamesoflol) -- Fix HTML5 quality settings being incorrectly set in local storage (thanks @TechGuard) +- Added download button option to download either current source or a custom URL you specify in options +- Prevent immediate hiding of controls on mobile (thanks @jamesoflol) +- Don't hide controls on focusout event (fixes #1122) (thanks @jamesoflol) +- Fix HTML5 quality settings being incorrectly set in local storage (thanks @TechGuard) ### v3.4.4 -- Fixed issue with double binding for `click` and `touchstart` for `clickToPlay` option -- Improved "faux" fullscreen on iPhone X/XS phones with notch -- Babel 7 upgrade (which reduced the polyfilled build by ~10kb!) +- Fixed issue with double binding for `click` and `touchstart` for `clickToPlay` option +- Improved "faux" fullscreen on iPhone X/XS phones with notch +- Babel 7 upgrade (which reduced the polyfilled build by ~10kb!) ### v3.4.3 -- Fixed issue with nodeList for custom playback controls +- Fixed issue with nodeList for custom playback controls ### v3.4.2 -- Fix play/pause button state +- Fix play/pause button state ### v3.4.1 -- Bug fix for custom controls (fixes #1161) +- Bug fix for custom controls (fixes #1161) ## v3.4.0 -- Accessibility improvements (see #905) -- Improvements to the way the controls work on iOS -- Demo code clean up -- YouTube quality selection removed due to their poor support for it. As a result, the `qualityrequested` event has been removed -- Controls spacing improvements -- Fix for pressed property missing with custom controls (Fixes #1062) -- Fix #1153: Captions language fallback (thanks @friday) -- Fix for setting pressed property of undefined (Fixes #1102) +- Accessibility improvements (see #905) +- Improvements to the way the controls work on iOS +- Demo code clean up +- YouTube quality selection removed due to their poor support for it. As a result, the `qualityrequested` event has been removed +- Controls spacing improvements +- Fix for pressed property missing with custom controls (Fixes #1062) +- Fix #1153: Captions language fallback (thanks @friday) +- Fix for setting pressed property of undefined (Fixes #1102) ### v3.3.23 -- Add support for YouTube's hl param (thanks @renaudleo) -- Fix for captions positioning when no controls (thanks @friday and @mjfwebb) -- Fix #1108: Make sure youtube.onReady doesn't run twice (thanks @friday) -- Fix for WebKit repaint loop on the `` elements +- Add support for YouTube's hl param (thanks @renaudleo) +- Fix for captions positioning when no controls (thanks @friday and @mjfwebb) +- Fix #1108: Make sure youtube.onReady doesn't run twice (thanks @friday) +- Fix for WebKit repaint loop on the `` elements ### v3.3.22 -- Travis & CI improvements (thanks @friday) -- Add navigator.languages fallback for iOS 9 (thanks @friday) +- Travis & CI improvements (thanks @friday) +- Add navigator.languages fallback for iOS 9 (thanks @friday) ### v3.3.21 -- Hide currentTime and progress for streams (thanks @mimse) -- Fixed condition check (thanks @mimse) -- Handle undefined this.player.elements.buttons.play (thanks @klassicd) -- Fix captions.toggle() if there is no toggle button (thanks @friday) +- Hide currentTime and progress for streams (thanks @mimse) +- Fixed condition check (thanks @mimse) +- Handle undefined this.player.elements.buttons.play (thanks @klassicd) +- Fix captions.toggle() if there is no toggle button (thanks @friday) ### v3.3.20 -- Fix for bug where controls wouldn't show on hover over YouTube video +- Fix for bug where controls wouldn't show on hover over YouTube video ### v3.3.19 -- Remove `pointer-events: none` on embed ` + ``` @@ -91,12 +95,12 @@ Much the same as YouTube above. ```html
- +
``` @@ -121,7 +125,7 @@ Alternatively you can include the `plyr.js` script before the closing `` ```html ``` @@ -130,13 +134,13 @@ See [initialising](#initialising) for more information on advanced setups. You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build. ```html - + ``` ...or... ```html - + ``` ## CSS @@ -150,30 +154,127 @@ Include the `plyr.css` stylsheet into your ``. If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following: ```html - + ``` ## SVG Sprite The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For -reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.10/plyr.svg`. +reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.6.2/plyr.svg`. # Ads Plyr has partnered up with [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy: -- [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio) -- Grab your publisher ID from the code snippet -- Enable ads in the [config options](#options) and enter your publisher ID +- [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio) +- Grab your publisher ID from the code snippet +- Enable ads in the [config options](#options) and enter your publisher ID Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues. +If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#options). + # Advanced -## SASS +## Customizing the CSS + +If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). + +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-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` | +| `--plyr-badge-border-radius` | The border radius used for badges. | `2px` | +| `--plyr-tab-focus-color` | The color used to highlight tab (keyboard) focus. | `--plyr-color-main` | +| `--plyr-captions-background` | The color for the background of captions. | `rgba(0, 0, 0, 0.8)` | +| `--plyr-captions-text-color` | The color used for the captions text. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-control-icon-size` | The size of the icons used in the controls. | `18px` | +| `--plyr-control-spacing` | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`). | `10px` | +| `--plyr-control-padding` | The padding inside controls. | `--plyr-control-spacing * 0.7` (`7px`) | +| `--plyr-control-radius` | The border radius used on controls. | `3px` | +| `--plyr-control-toggle-checked-background` | The background color used for checked menu items. | `--plyr-color-main` | +| `--plyr-video-controls-background` | The background for the video controls. | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))` | +| `--plyr-video-control-color` | The text/icon color for video controls. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-video-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` | +| `--plyr-audio-controls-background` | The background for the audio controls. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-audio-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` | +| `--plyr-menu-background` | The background color for menus. | `rgba(255, 255, 255, 0.9)` | +| `--plyr-menu-color` | The text/icon color for menu items. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-menu-shadow` | The shadow used on menus. | `0 1px 2px rgba(0, 0, 0, 0.15)` | +| `--plyr-menu-radius` | The border radius on the menu. | `4px` | +| `--plyr-menu-arrow-size` | The size of the arrow on the bottom of the menu. | `6px` | +| `--plyr-menu-item-arrow-color` | The color of the arrows in the menu. | ![#728197](https://placehold.it/15/728197/000000?text=+) `#728197` | +| `--plyr-menu-item-arrow-size` | The size of the arrows in the menu. | `4px` | +| `--plyr-menu-border-color` | The border color for the bottom of the back button in the top of the sub menu pages. | ![#dcdfe5](https://placehold.it/15/dcdfe5/000000?text=+) `#dcdfe5` | +| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-progress-loading-size` | The size of the stripes in the loading state in the scrubber. | `25px` | +| `--plyr-progress-loading-background` | The background color on the loading state in the scrubber. | `rgba(35, 40, 47, 0.6)` | +| `--plyr-video-progress-buffered-background` | The fill color for the buffer indication in the scrubber for video. | `rgba(255, 255, 255, 0.25)` | +| `--plyr-audio-progress-buffered-background` | The fill color for the buffer indication in the scrubber for audio. | `rgba(193, 200, 209, 0.6)` | +| `--plyr-range-thumb-height` | The height of the scrubber handle/thumb. | `13px` | +| `--plyr-range-thumb-background` | The background of the scrubber handle/thumb. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` | +| `--plyr-range-thumb-shadow` | The shadow of the scrubber handle/thumb. | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` | +| `--plyr-range-thumb-active-shadow-width` | The width of the shadow when the scrubber handle/thumb is `:active` (pressed). | `3px` | +| `--plyr-range-track-height` | The height of the scrubber/progress track. | `5px` | +| `--plyr-range-fill-background` | The fill color of the scrubber/progress. | `--plyr-color-main` | +| `--plyr-video-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` | +| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed). | `rgba(255, 255, 255, 0.5)` | +| `--plyr-audio-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` | +| `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed). | `rgba(215, 26, 18, 0.1)` | +| `--plyr-tooltip-background` | The background color for tooltips. | `rgba(255, 255, 255, 0.9)` | +| `--plyr-tooltip-color` | The text color for tooltips. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` | +| `--plyr-tooltip-padding` | The padding for tooltips. | `calc(var(--plyr-control-spacing) / 2))` | +| `--plyr-tooltip-arrow-size` | The size of the arrow under tooltips. | `4px` | +| `--plyr-tooltip-radius` | The border radius on tooltips. | `3px` | +| `--plyr-tooltip-shadow` | The shadow on tooltips. | `0 1px 2px rgba(0, 0, 0, 0.15)` | +| `--plyr-font-family` | The font family used in the player. | | +| `--plyr-font-size-base` | The base font size. Mainly used for captions. | `15px` | +| `--plyr-font-size-small` | The smaller font size. Mainly used for captions. | `13px` | +| `--plyr-font-size-large` | The larger font size. Mainly used for captions. | `18px` | +| `--plyr-font-size-xlarge` | The even larger font size. Mainly used for captions. | `21px` | +| `--plyr-font-size-time` | The font size for the time. | `--plyr-font-size-small` | +| `--plyr-font-size-menu` | The font size used in the menu. | `--plyr-font-size-small` | +| `--plyr-font-size-badge` | The font size used for badges. | `9px` | +| `--plyr-font-weight-regular` | The regular font weight. | `400` | +| `--plyr-font-weight-bold` | The bold font weight. | `600` | +| `--plyr-line-height` | The line height used within the player. | `1.7` | +| `--plyr-font-smoothing` | Whether to enable font antialiasing within the player. | `false` | + +You can set them in your CSS for all players: + +```css +:root { + --plyr-color-main: #1ac266; +} +``` + +...or for a specific class name: + +```css +.player { + --plyr-color-main: #1ac266; +} +``` -You can use `bundle.scss` file included in `/src` as part of your build and change variables to suit your design. The SASS require you to -use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should be already!) as all declarations use the W3C definitions. +...or in your HTML: + +```html +