Merge branch 'develop' of github.com:sampotts/plyr into develop

# Conflicts:
#	package.json
#	yarn.lock

.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

.prettierrc

@@ -1,6 +1,6 @@
 {
   "useTabs": false,
-    "tabWidth": 4,
+  "tabWidth": 2,
   "singleQuote": true,
   "trailingComma": "all",
   "printWidth": 120

.stylelintrc.json

@@ -10,7 +10,7 @@
       }
     ],
     "string-no-newline": null,
-        "indentation": 4,
+    "indentation": 2,
     "string-quotes": "single",
     "max-nesting-depth": 2,
     "plugin/selector-bem-pattern": {

demo/index.html

@@ -18,10 +18,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" />
 
     <!-- Open Graph -->
-        <meta
+    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player" />
-            property="og:title"
-            content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player"
-        />
     <meta property="og:site_name" content="Plyr" />
     <meta property="og:url" content="https://plyr.io" />
     <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" />
@@ -133,14 +130,13 @@
           </a>
         </div>
       </header>
-
       <main>
         <div id="container">
           <video
             controls
             crossorigin
             playsinline
-                        poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
             id="player"
           >
             <!-- Video files -->
@@ -176,9 +172,7 @@
             />
 
             <!-- Fallback for browsers that don't support the <video> element -->
-                        <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download
+            <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
-                            >Download</a
-                        >
           </video>
         </div>
 
@@ -191,9 +185,7 @@
                   d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                 ></path>
               </svg>
-                            <a
+              <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
-                                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
-                                target="_blank"
                 >View From A Blue Moon</a
               >
               &copy; Brainfarm
@@ -215,9 +207,7 @@
           </li>
           <li class="plyr__cite plyr__cite--youtube" hidden>
             <small>
-                            <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank"
+              <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a>
-                                >View From A Blue Moon</a
-                            >
               on&nbsp;
               <span class="color--youtube">
                 <svg class="icon" role="presentation">

demo/package.json

@@ -5,9 +5,9 @@
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",
     "dependencies": {
+        "@sentry/browser": "^5.15.4",
         "core-js": "^3.6.4",
         "custom-event-polyfill": "^1.0.7",
-        "raven-js": "^3.27.2",
         "shr-buttons": "2.0.3",
         "url-polyfill": "^1.1.8"
     }

demo/src/js/demo.js

@@ -8,7 +8,7 @@ import './tab-focus';
 import 'custom-event-polyfill';
 import 'url-polyfill';
 
-import Raven from 'raven-js';
+import * as Sentry from '@sentry/browser';
 import Shr from 'shr-buttons';
 
 import Plyr from '../../../src/js/plyr';
@@ -16,14 +16,17 @@ import sources from './sources';
 import toggleClass from './toggle-class';
 
 (() => {
-    const { host } = window.location;
+  const production = 'plyr.io';
-    const env = {
+
-        prod: host === 'plyr.io',
+  // Sentry for demo site (https://plyr.io) only
-        dev: host === 'dev.plyr.io',
+  if (window.location.host === production) {
-    };
+    Sentry.init({
+      dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
+      whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
+    });
+  }
 
   document.addEventListener('DOMContentLoaded', () => {
-        Raven.context(() => {
     const selector = '#player';
 
     // Setup share buttons
@@ -51,15 +54,12 @@ import toggleClass from './toggle-class';
         active: true,
       },
       ads: {
-                    enabled: env.prod || env.dev,
+        enabled: window.location.host.includes(production),
         publisherId: '918848828995742',
       },
       previewThumbnails: {
         enabled: true,
-                    src: [
+        src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
-                        'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
-                        'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
-                    ],
       },
       vimeo: {
         // Prevent Vimeo blocking plyr.io demo site
@@ -75,7 +75,7 @@ import toggleClass from './toggle-class';
     const types = Object.keys(sources);
     const historySupport = Boolean(window.history && window.history.pushState);
     let currentType = window.location.hash.substring(1);
-            const hasCurrentType = !currentType.length;
+    const hasInitialType = currentType.length;
 
     function render(type) {
       // Remove active classes
@@ -96,11 +96,7 @@ import toggleClass from './toggle-class';
     // Set a new source
     function setSource(type, init) {
       // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-                if (
+      if (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
-                    !types.includes(type) ||
-                    (!init && type === currentType) ||
-                    (!currentType.length && type === 'video')
-                ) {
         return;
       }
 
@@ -134,13 +130,13 @@ import toggleClass from './toggle-class';
     });
 
     // If there's no current type set, assume video
-            if (hasCurrentType) {
+    if (!hasInitialType) {
       currentType = 'video';
     }
 
     // Replace current history state
     if (historySupport && types.includes(currentType)) {
-                window.history.replaceState({ type: currentType }, '', hasCurrentType ? '' : `#${currentType}`);
+      window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
     }
 
     // If it's not video, load the source
@@ -150,11 +146,4 @@ import toggleClass from './toggle-class';
 
     render(currentType);
   });
-    });
-
-    // Raven / Sentry
-    // For demo site (https://plyr.io) only
-    if (env.prod) {
-        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-    }
 })();

demo/src/sass/bundles/demo.scss

@@ -3,6 +3,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import '../../../../src/sass/lib/css-vars';
+$css-vars-use-native: true;
+
 // Settings
 @import '../settings/breakpoints';
 @import '../settings/colors';

demo/src/sass/components/players.scss

@@ -28,7 +28,7 @@
 
 // Style full supported player
 .plyr__cite {
-    color: $color-gray-5;
+  color: $color-gray-500;
 
   .icon {
     margin-right: ceil($spacing-base / 6);

demo/src/sass/settings/colors.scss

@@ -3,22 +3,22 @@
 // ==========================================================================
 
 // Grayscale
-$color-gray-9: hsl(210, 15%, 16%);
+$color-gray-900: hsl(210, 15%, 16%);
-$color-gray-8: lighten($color-gray-9, 9%);
+$color-gray-800: lighten($color-gray-900, 9%);
-$color-gray-7: lighten($color-gray-8, 9%);
+$color-gray-700: lighten($color-gray-800, 9%);
-$color-gray-6: lighten($color-gray-7, 9%);
+$color-gray-600: lighten($color-gray-700, 9%);
-$color-gray-5: lighten($color-gray-6, 9%);
+$color-gray-500: lighten($color-gray-600, 9%);
-$color-gray-4: lighten($color-gray-5, 9%);
+$color-gray-400: lighten($color-gray-500, 9%);
-$color-gray-3: lighten($color-gray-4, 9%);
+$color-gray-300: lighten($color-gray-400, 9%);
-$color-gray-2: lighten($color-gray-3, 9%);
+$color-gray-200: lighten($color-gray-300, 9%);
-$color-gray-1: lighten($color-gray-2, 9%);
+$color-gray-100: lighten($color-gray-200, 9%);
-$color-gray-0: lighten($color-gray-1, 9%);
+$color-gray-50: lighten($color-gray-100, 9%);
 
 // Branding
 $color-brand-primary: hsl(198, 100%, 50%);
 
 // Text
-$color-text: $color-gray-7;
+$color-text: $color-gray-700;
 $color-headings: $color-brand-primary;
 
 // Brands
@@ -36,7 +36,7 @@ $color-button-background: $color-brand-primary;
 $color-button-text: #fff;
 $color-button-background-hover: hsl(198, 100%, 55%);
 $color-button-count-background: #fff;
-$color-button-count-text: $color-gray-6;
+$color-button-count-text: $color-gray-600;
 
 // Focus
 $tab-focus-default-color: #fff;

demo/src/sass/settings/plyr.scss

@@ -2,24 +2,17 @@
 // Plyr Settings
 // ==========================================================================
 
-// Font
+@include css-vars(
-$plyr-font-family: inherit;
+  (
-
+    --plyr-color-main: $color-brand-primary,
-// Sizes
+    --plyr-font-size-base: 13px,
-$plyr-font-size-base: 13px;
+    --plyr-font-size-small: 12px,
-$plyr-font-size-small: 12px;
+    --plyr-font-size-time: 11px,
-$plyr-font-size-time: 11px;
+    --plyr-font-size-badges: 9px,
-$plyr-font-size-badges: 9px;
+    --plyr-font-size-menu: var(--plyr-font-size-base),
-
+    --plyr-font-weight-regular: 500,
-// Other
+    --plyr-font-weight-bold: 600,
-$plyr-font-smoothing: true;
+    --plyr-font-size-captions-medium: 18px,
-
+    --plyr-font-size-captions-large: 21px,
-// Colors
+  )
-$plyr-color-main: $color-brand-primary;
+);
-
-// Captions
-$plyr-font-size-captions-base: $plyr-font-size-base;
-$plyr-font-size-captions-small: $plyr-font-size-small;
-$plyr-font-size-captions-medium: 18px;
-$plyr-font-size-captions-large: 21px;
-$plyr-font-size-menu: $plyr-font-size-base;

demo/yarn.lock

@@ -2,27 +2,79 @@
 # yarn lockfile v1
 
 
-core-js@^3.1.4:
+"@sentry/browser@^5.15.4":
-  version "3.1.4"
+  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.15.4.tgz#5a7e7bad088556665ed8e69bceb0e18784e4f6c7"
-  integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
+  integrity sha512-l/auT1HtZM3KxjCGQHYO/K51ygnlcuOrM+7Ga8gUUbU9ZXDYw6jRi0+Af9aqXKmdDw1naNxr7OCSy6NBrLWVZw==
+  dependencies:
+    "@sentry/core" "5.15.4"
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/core@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.15.4.tgz#08b617e093a636168be5aebad141d1f744217085"
+  integrity sha512-9KP4NM4SqfV5NixpvAymC7Nvp36Zj4dU2fowmxiq7OIbzTxGXDhwuN/t0Uh8xiqlkpkQqSECZ1OjSFXrBldetQ==
+  dependencies:
+    "@sentry/hub" "5.15.4"
+    "@sentry/minimal" "5.15.4"
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/hub@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.15.4.tgz#cb64473725a60eec63b0be58ed1143eaaf894bee"
+  integrity sha512-1XJ1SVqadkbUT4zLS0TVIVl99si7oHizLmghR8LMFl5wOkGEgehHSoOydQkIAX2C7sJmaF5TZ47ORBHgkqclUg==
+  dependencies:
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/minimal@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.15.4.tgz#113f01fefb86b7830994c3dfa7ad4889ba7b2003"
+  integrity sha512-GL4GZ3drS9ge+wmxkHBAMEwulaE7DMvAEfKQPDAjg2p3MfcCMhAYfuY4jJByAC9rg9OwBGGehz7UmhWMFjE0tw==
+  dependencies:
+    "@sentry/hub" "5.15.4"
+    "@sentry/types" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/types@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.15.4.tgz#37f30e35b06e8e12ad1101f1beec3e9b88ca1aab"
+  integrity sha512-quPHPpeAuwID48HLPmqBiyXE3xEiZLZ5D3CEbU3c3YuvvAg8qmfOOTI6z4Z3Eedi7flvYpnx3n7N3dXIEz30Eg==
+
+"@sentry/utils@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.15.4.tgz#02865ab3c9b745656cea0ab183767ec26c96f6e6"
+  integrity sha512-lO8SLBjrUDGADl0LOkd55R5oL510d/1SaI08/IBHZCxCUwI4TiYo5EPECq8mrj3XGfgCyq9osw33bymRlIDuSQ==
+  dependencies:
+    "@sentry/types" "5.15.4"
+    tslib "^1.9.3"
+
+core-js@^3.6.4:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
+  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
 
 custom-event-polyfill@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
   integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
 
-raven-js@^3.27.2:
-  version "3.27.2"
-  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.2.tgz#6c33df952026cd73820aa999122b7b7737a66775"
-  integrity sha512-mFWQcXnhRFEQe5HeFroPaEghlnqy7F5E2J3Fsab189ondqUzcjwSVi7el7F36cr6PvQYXoZ1P2F5CSF2/azeMQ==
-
 shr-buttons@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/shr-buttons/-/shr-buttons-2.0.3.tgz#2ffd021fc3d789e1510ce2736b938bd09ea1da5a"
   integrity sha512-sPAgHiw4uaIt9TnxTfyZEedDChcldSVtnBHE44cpe/mSC7rqm4IEKZRLYqnVlTcGM+FSDNBPUNpSf50Q2ntd+w==
 
-url-polyfill@^1.1.5:
+tslib@^1.9.3:
-  version "1.1.5"
+  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.5.tgz#bec79b72b5407dba6d8cced2e32e4ab273aa9fb1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
-  integrity sha512-9XjIJ6nwrU+nGd8t90Ze0Zs7t8A+SU0gqsqPttj6j3zAVe5q0HFcuv37nDBdVSPpi4aTHTfbUF/i+ZVD+o2EbA==
+  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+
+url-polyfill@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.8.tgz#21eb58ad61192f52b77dcac8ab5293ae7bc67060"
+  integrity sha512-Ey61F4FEqhcu1vHSOMmjl0Vd/RPRLEjMj402qszD/dhMBrVfoUsnIj8KSZo2yj+eIlxJGKFdnm6ES+7UzMgZ3Q==

dist/plyr.js

@@ -1334,19 +1334,19 @@ typeof navigator === "object" && (function (global, factory) {
     return (current / max * 100).toFixed(2);
   } // Replace all occurances of a string in a string
 
-  function replaceAll() {
+  var replaceAll = function replaceAll() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-  } // Convert to title case
+  }; // Convert to title case
 
-  function toTitleCase() {
+  var toTitleCase = function toTitleCase() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return input.toString().replace(/\w\S*/g, function (text) {
       return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
     });
-  } // Convert string to pascalCase
+  }; // Convert string to pascalCase
 
   function toPascalCase() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

dist/plyr.mjs

@@ -1328,19 +1328,19 @@ function getPercentage(current, max) {
   return (current / max * 100).toFixed(2);
 } // Replace all occurances of a string in a string
 
-function replaceAll() {
+var replaceAll = function replaceAll() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-} // Convert to title case
+}; // Convert to title case
 
-function toTitleCase() {
+var toTitleCase = function toTitleCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return input.toString().replace(/\w\S*/g, function (text) {
     return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
   });
-} // Convert string to pascalCase
+}; // Convert string to pascalCase
 
 function toPascalCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

dist/plyr.polyfilled.js

@@ -7640,19 +7640,19 @@ typeof navigator === "object" && (function (global, factory) {
     return (current / max * 100).toFixed(2);
   } // Replace all occurances of a string in a string
 
-  function replaceAll() {
+  var replaceAll = function replaceAll() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-  } // Convert to title case
+  }; // Convert to title case
 
-  function toTitleCase() {
+  var toTitleCase = function toTitleCase() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return input.toString().replace(/\w\S*/g, function (text) {
       return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
     });
-  } // Convert string to pascalCase
+  }; // Convert string to pascalCase
 
   function toPascalCase() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

dist/plyr.polyfilled.mjs

@@ -7634,19 +7634,19 @@ function getPercentage(current, max) {
   return (current / max * 100).toFixed(2);
 } // Replace all occurances of a string in a string
 
-function replaceAll() {
+var replaceAll = function replaceAll() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-} // Convert to title case
+}; // Convert to title case
 
-function toTitleCase() {
+var toTitleCase = function toTitleCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return input.toString().replace(/\w\S*/g, function (text) {
     return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
   });
-} // Convert string to pascalCase
+}; // Convert string to pascalCase
 
 function toPascalCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

readme.md

@@ -42,7 +42,7 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 ### HTML5 Video
 
 ```html
-<video poster="/path/to/poster.jpg" id="player" playsinline controls>
+<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
   <source src="/path/to/video.mp4" type="video/mp4" />
   <source src="/path/to/video.webm" type="video/webm" />
 
@@ -51,6 +51,8 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 </video>
 ```
 
+**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.
+
 ### HTML5 Audio
 
 ```html
@@ -174,7 +176,102 @@ If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#option
 
 # 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;
+}
+```
+
+...or in your HTML:
+
+```html
+<video class="player" style="--plyr-color-main: #1ac266;">
+    ...
+</vieo>
+```
+
+### SASS
 
 You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The SASS requires you to
 use [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions.

src/js/config/defaults.js

@@ -422,16 +422,16 @@ const defaults = {
     title: false,
     speed: true,
     transparent: false,
-        // These settings require a pro or premium account to work
+    // Whether the owner of the video has a Pro or Business account
-        sidedock: false,
+    // (which allows us to properly hide controls without CSS hacks, etc)
-        controls: false,
+    premium: false,
     // Custom settings from Plyr
     referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
   },
 
   // YouTube plugin
   youtube: {
-        noCookie: false, // Whether to use an alternative version of YouTube without cookies
+    noCookie: true, // Whether to use an alternative version of YouTube without cookies
     rel: 0, // No related vids
     showinfo: 0, // Hide info
     iv_load_policy: 3, // Hide annotations

src/js/controls.js

@@ -84,9 +84,7 @@ const controls = {
 
       // Seek tooltip
       if (is.element(this.elements.progress)) {
-                this.elements.display.seekTooltip = this.elements.progress.querySelector(
+        this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`);
-                    `.${this.config.classNames.tooltip}`,
-                );
       }
 
       return true;

src/js/fullscreen.js

@@ -27,8 +27,8 @@ class Fullscreen {
 
     // Get the fullscreen element
     // Checks container is an ancestor, defaults to null
-        this.player.elements.fullscreen = player.config.fullscreen.container
+    this.player.elements.fullscreen =
-            && closest(this.player.elements.container, player.config.fullscreen.container);
+      player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container);
 
     // Register event listeners
     // Handle event (incase user presses escape etc)
@@ -207,10 +207,7 @@ class Fullscreen {
 
     // Get the current focused element
     const focused = document.activeElement;
-        const focusable = getElements.call(
+    const focusable = getElements.call(this.player, 'a[href], button:not(:disabled), input:not(:disabled), [tabindex]');
-            this.player,
-            'a[href], button:not(:disabled), input:not(:disabled), [tabindex]',
-        );
     const [first] = focusable;
     const last = focusable[focusable.length - 1];
 

src/js/listeners.js

@@ -229,6 +229,7 @@ class Listeners {
 
     // Delay the adding of classname until the focus has changed
     // This event fires before the focusin event
+    if (event.type !== 'focusout') {
       this.focusTimer = setTimeout(() => {
         const focused = document.activeElement;
 
@@ -240,6 +241,7 @@ class Listeners {
         toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
       }, 10);
     }
+  }
 
   // Global window & document listeners
   global(toggle = true) {
@@ -257,7 +259,7 @@ class Listeners {
     once.call(player, document.body, 'touchstart', this.firstTouch);
 
     // Tab focus detection
-        toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
+    toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
   }
 
   // Container listeners
@@ -304,7 +306,7 @@ class Listeners {
 
     // Set a gutter for Vimeo
     const setGutter = (ratio, padding, toggle) => {
-            if (!player.isVimeo) {
+      if (!player.isVimeo || player.config.vimeo.premium) {
         return;
       }
 
@@ -354,7 +356,7 @@ class Listeners {
       // Set Vimeo gutter
       setGutter(ratio, padding, isEnter);
 
-            // If not using native fullscreen, we need to check for resizes of viewport
+      // If not using native browser fullscreen API, we need to check for resizes of viewport
       if (!usingNative) {
         if (isEnter) {
           on.call(player, window, 'resize', resized);

src/js/media.js

@@ -38,15 +38,13 @@ const media = {
       // Wrap the video in a container
       wrap(this.media, this.elements.wrapper);
 
-            // Faux poster container
+      // Poster image container
-            if (this.isEmbed) {
       this.elements.poster = createElement('div', {
         class: this.config.classNames.poster,
       });
 
       this.elements.wrapper.appendChild(this.elements.poster);
     }
-        }
 
     if (this.isHTML5) {
       html5.setup.call(this);

src/js/plugins/preview-thumbnails.js

@@ -417,8 +417,7 @@ class PreviewThumbnails {
       this.player.debug.log(`Loading image: ${thumbUrl}`);
 
       // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...
-            previewImage.onload = () =>
+      previewImage.onload = () => this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
-                this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
       this.loadingImage = previewImage;
       this.removeOldImages(previewImage);
     } else {
@@ -512,8 +511,7 @@ class PreviewThumbnails {
                 previewImage.src = thumbURL;
                 previewImage.onload = () => {
                   this.player.debug.log(`Preloaded thumb filename: ${newThumbFilename}`);
-                                    if (!this.loadedImages.includes(newThumbFilename))
+                  if (!this.loadedImages.includes(newThumbFilename)) this.loadedImages.push(newThumbFilename);
-                                        this.loadedImages.push(newThumbFilename);
 
                   // We don't resolve until the thumb is loaded
                   resolve();
@@ -640,10 +638,16 @@ class PreviewThumbnails {
       const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
       this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-        } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+    } else if (
+      this.elements.thumb.imageContainer.clientHeight > 20 &&
+      this.elements.thumb.imageContainer.clientWidth < 20
+    ) {
       const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-        } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+    } else if (
+      this.elements.thumb.imageContainer.clientHeight < 20 &&
+      this.elements.thumb.imageContainer.clientWidth > 20
+    ) {
       const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
     }

src/js/plugins/vimeo.js

@@ -10,7 +10,6 @@ import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
 import loadScript from '../utils/load-script';
-import { extend } from '../utils/objects';
 import { format, stripHTML } from '../utils/strings';
 import { setAspectRatio } from '../utils/style';
 import { buildUrlParams } from '../utils/urls';
@@ -71,21 +70,25 @@ const vimeo = {
   ready() {
     const player = this;
     const config = player.config.vimeo;
+    const { premium, referrerPolicy, ...frameParams } = config;
+
+    // If the owner has a pro or premium account then we can hide controls etc
+    if (premium) {
+      Object.assign(frameParams, {
+        controls: false,
+        sidedock: false,
+      });
+    }
 
     // Get Vimeo params for the iframe
-        const params = buildUrlParams(
+    const params = buildUrlParams({
-            extend(
-                {},
-                {
       loop: player.config.loop.active,
       autoplay: player.autoplay,
       muted: player.muted,
       gesture: 'media',
       playsinline: !this.config.fullscreen.iosNative,
-                },
+      ...frameParams,
-                config,
+    });
-            ),
-        );
 
     // Get the source URL or ID
     let source = player.media.getAttribute('src');
@@ -101,20 +104,23 @@ const vimeo = {
     const src = format(player.config.urls.vimeo.iframe, id, params);
     iframe.setAttribute('src', src);
     iframe.setAttribute('allowfullscreen', '');
-        iframe.setAttribute('allowtransparency', '');
+    iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture');
-        iframe.setAttribute('allow', 'autoplay');
 
     // Set the referrer policy if required
-        if (!is.empty(config.referrerPolicy)) {
+    if (!is.empty(referrerPolicy)) {
-            iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+      iframe.setAttribute('referrerPolicy', referrerPolicy);
     }
 
-        // Get poster, if already set
-        const { poster } = player;
     // Inject the package
-        const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
+    const { poster } = player;
+    if (premium) {
+      iframe.setAttribute('data-poster', poster);
+      player.media = replaceElement(iframe, player.media);
+    } else {
+      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
       wrapper.appendChild(iframe);
       player.media = replaceElement(wrapper, player.media);
+    }
 
     // Get poster image
     fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
@@ -201,10 +207,13 @@ const vimeo = {
         return speed;
       },
       set(input) {
-                player.embed.setPlaybackRate(input).then(() => {
+        player.embed
+          .setPlaybackRate(input)
+          .then(() => {
             speed = input;
             triggerEvent.call(player, player.media, 'ratechange');
-                }).catch(() => {
+          })
+          .catch(() => {
             // Cannot set Playback Rate, Video is probably not on Pro account
             player.options.speed = [1];
           });

src/js/plugins/youtube.js

@@ -124,7 +124,7 @@ const youtube = {
     // Get poster, if already set
     const { poster } = player;
     // Replace media element
-        const container = createElement('div', { id, poster });
+    const container = createElement('div', { id, 'data-poster': poster });
     player.media = replaceElement(container, player.media);
 
     // Id to poster wrapper

src/js/plyr.js

@@ -270,6 +270,9 @@ class Plyr {
       wrap(this.media, this.elements.container);
     }
 
+    // Migrate custom properties from media to container (so they work 😉)
+    ui.migrateStyles.call(this);
+
     // Add style hook
     ui.addStyleHook.call(this);
 
@@ -887,7 +890,7 @@ class Plyr {
       return null;
     }
 
-        return this.media.getAttribute('poster');
+    return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');
   }
 
   /**

src/js/ui.js

@@ -170,12 +170,7 @@ const ui = {
     }
 
     // Set property synchronously to respect the call order
-        this.media.setAttribute('poster', poster);
+    this.media.setAttribute('data-poster', poster);
-
-        // HTML5 uses native poster attribute
-        if (this.isHTML5) {
-            return Promise.resolve(poster);
-        }
 
     // Wait until ui is ready
     return (
@@ -264,16 +259,31 @@ const ui = {
       // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
       this.toggleControls(
         Boolean(
-                    force ||
+          force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek,
-                        this.loading ||
-                        this.paused ||
-                        controlsElement.pressed ||
-                        controlsElement.hover ||
-                        recentTouchSeek,
         ),
       );
     }
   },
+
+  // Migrate any custom properties from the media to the parent
+  migrateStyles() {
+    // Loop through values (as they are the keys when the object is spread 🤔)
+    Object.values({ ...this.media.style })
+      // We're only fussed about Plyr specific properties
+      .filter(key => key.startsWith('--plyr'))
+      .forEach(key => {
+        // Set on the container
+        this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
+
+        // Clean up from media element
+        this.media.style.removeProperty(key);
+      });
+
+    // Remove attribute if empty
+    if (is.empty(this.media.style)) {
+      this.media.removeAttribute('style');
+    }
+  },
 };
 
 export default ui;

src/js/utils/elements.js

@@ -221,7 +221,7 @@ export function hasClass(element, className) {
 
 // Element matches selector
 export function matches(element, selector) {
-    const {prototype} = Element;
+  const { prototype } = Element;
 
   function match() {
     return Array.from(document.querySelectorAll(selector)).includes(this);
@@ -239,7 +239,7 @@ export function matches(element, selector) {
 
 // Closest ancestor element matching selector (also tests element itself)
 export function closest(element, selector) {
-    const {prototype} = Element;
+  const { prototype } = Element;
 
   // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
   function closestElement() {
@@ -252,9 +252,7 @@ export function closest(element, selector) {
     return null;
   }
 
-    const method =
+  const method = prototype.closest || closestElement;
-        prototype.closest ||
-        closestElement;
 
   return method.call(element, selector);
 }

src/js/utils/events.js

@@ -90,7 +90,7 @@ export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
   // Create and dispatch the event
   const event = new CustomEvent(type, {
     bubbles,
-        detail: { ...detail, plyr: this,},
+    detail: { ...detail, plyr: this },
   });
 
   // Dispatch the event

src/js/utils/strings.js

@@ -28,17 +28,12 @@ export function getPercentage(current, max) {
 }
 
 // Replace all occurances of a string in a string
-export function replaceAll(input = '', find = '', replace = '') {
+export const replaceAll = (input = '', find = '', replace = '') =>
-    return input.replace(
+  input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-        new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'),
-        replace.toString(),
-    );
-}
 
 // Convert to title case
-export function toTitleCase(input = '') {
+export const toTitleCase = (input = '') =>
-    return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
+  input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
-}
 
 // Convert string to pascalCase
 export function toPascalCase(input = '') {

src/js/utils/style.js

@@ -64,9 +64,10 @@ export function setAspectRatio(input) {
   wrapper.style.paddingBottom = `${padding}%`;
 
   // For Vimeo we have an extra <div> to hide the standard controls and UI
-    if (this.isVimeo && this.supported.ui) {
+  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
-        const height = 240;
+    const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
     const offset = (height - padding) / (height / 50);
+
     this.media.style.transform = `translateY(-${offset}%)`;
   } else if (this.isHTML5) {
     wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);

src/sass/components/badges.scss

@@ -3,9 +3,9 @@
 // --------------------------------------------------------------
 
 .plyr__badge {
-    background: $plyr-badge-bg;
+  background: $plyr-badge-background;
-    border-radius: 2px;
+  border-radius: $plyr-badge-border-radius;
-    color: $plyr-badge-color;
+  color: $plyr-badge-text-color;
   font-size: $plyr-font-size-badge;
   line-height: 1;
   padding: 3px 4px;

src/sass/components/captions.scss

@@ -10,7 +10,6 @@
 .plyr__captions {
   animation: plyr-fade-in 0.3s ease;
   bottom: 0;
-    color: $plyr-captions-color;
   display: none;
   font-size: $plyr-font-size-captions-small;
   left: 0;
@@ -20,27 +19,13 @@
   transition: transform 0.4s ease-in-out;
   width: 100%;
 
-    .plyr__caption {
-        background: $plyr-captions-bg;
-        border-radius: 2px;
-        box-decoration-break: clone;
-        line-height: 185%;
-        padding: 0.2em 0.5em;
-        white-space: pre-wrap;
-
-        // Firefox adds a <div> when using getCueAsHTML()
-        div {
-            display: inline;
-        }
-    }
-
   span:empty {
     display: none;
   }
 
   @media (min-width: $plyr-bp-sm) {
     font-size: $plyr-font-size-captions-base;
-        padding: ($plyr-control-spacing * 2);
+    padding: calc(#{$plyr-control-spacing} * 2);
   }
 
   @media (min-width: $plyr-bp-md) {
@@ -54,6 +39,20 @@
 
 // If the lower controls are shown and not empty
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 4));
+  transform: translateY(calc(#{$plyr-control-spacing} * -4));
 }
 
+.plyr__caption {
+  background: $plyr-captions-background;
+  border-radius: 2px;
+  box-decoration-break: clone;
+  color: $plyr-captions-text-color;
+  line-height: 185%;
+  padding: 0.2em 0.5em;
+  white-space: pre-wrap;
+
+  // Firefox adds a <div> when using getCueAsHTML()
+  div {
+    display: inline;
+  }
+}

src/sass/components/controls.scss

@@ -21,7 +21,7 @@
 
   // Spacing
   .plyr__controls__item {
-        margin-left: ($plyr-control-spacing / 4);
+    margin-left: calc(#{$plyr-control-spacing} / 4);
 
     &:first-child {
       margin-left: 0;
@@ -29,11 +29,11 @@
     }
 
     &.plyr__progress__container {
-            padding-left: ($plyr-control-spacing / 4);
+      padding-left: calc(#{$plyr-control-spacing} / 4);
     }
 
     &.plyr__time {
-            padding: 0 ($plyr-control-spacing / 2);
+      padding: 0 calc(#{$plyr-control-spacing} / 2);
     }
 
     &.plyr__progress__container:first-child,

src/sass/components/menus.scss

@@ -24,7 +24,7 @@
   // The actual menu container
   &__container {
     animation: plyr-popup 0.2s ease;
-        background: $plyr-menu-bg;
+    background: $plyr-menu-background;
     border-radius: 4px;
     bottom: 100%;
     box-shadow: $plyr-menu-shadow;
@@ -44,12 +44,12 @@
 
     // Arrow
     &::after {
-            border: 4px solid transparent;
+      border: $plyr-menu-arrow-size solid transparent;
-            border-top-color: $plyr-menu-bg;
+      border-top-color: $plyr-menu-background;
       content: '';
       height: 0;
       position: absolute;
-            right: 15px;
+      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
       top: 100%;
       width: 0;
     }
@@ -73,7 +73,10 @@
       color: $plyr-menu-color;
       display: flex;
       font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
+      padding-bottom: calc(#{$plyr-control-padding} / 1.5);
+      padding-left: calc(#{$plyr-control-padding} * 1.5);
+      padding-right: calc(#{$plyr-control-padding} * 1.5);
+      padding-top: calc(#{$plyr-control-padding} / 1.5);
       user-select: none;
       width: 100%;
 
@@ -84,7 +87,7 @@
       }
 
       &::after {
-                border: 4px solid transparent;
+        border: $plyr-menu-item-arrow-size solid transparent;
         content: '';
         position: absolute;
         top: 50%;
@@ -92,11 +95,11 @@
       }
 
       &--forward {
-                padding-right: ceil($plyr-control-padding * 4);
+        padding-right: calc(#{$plyr-control-padding} * 4);
 
         &::after {
-                    border-left-color: rgba($plyr-menu-color, 0.8);
+          border-left-color: $plyr-menu-item-arrow-color;
-                    right: 5px;
+          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &.plyr__tab-focus::after,
@@ -106,26 +109,25 @@
       }
 
       &--back {
-                $horizontal-padding: ($plyr-control-padding * 2);
         font-weight: $plyr-font-weight-regular;
         margin: $plyr-control-padding;
-                margin-bottom: floor($plyr-control-padding / 2);
+        margin-bottom: calc(#{$plyr-control-padding} / 2);
-                padding-left: ceil($plyr-control-padding * 4);
+        padding-left: calc(#{$plyr-control-padding} * 4);
         position: relative;
-                width: calc(100% - #{$horizontal-padding});
+        width: calc(100% - (#{$plyr-control-padding} * 2));
 
         &::after {
-                    border-right-color: rgba($plyr-menu-color, 0.8);
+          border-right-color: $plyr-menu-item-arrow-color;
-                    left: $plyr-control-padding;
+          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &::before {
-                    background: $plyr-menu-border-color;
+          background: $plyr-menu-back-border-color;
-                    box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
           content: '';
           height: 1px;
           left: 0;
-                    margin-top: ceil($plyr-control-padding / 2);
+          margin-top: calc(#{$plyr-control-padding} / 2);
           overflow: hidden;
           position: absolute;
           right: 0;
@@ -172,7 +174,7 @@
 
       &[aria-checked='true'] {
         &::before {
-                    background: $plyr-color-main;
+          background: $plyr-control-toggle-checked-background;
         }
         &::after {
           opacity: 1;
@@ -182,7 +184,7 @@
 
       &.plyr__tab-focus::before,
       &:hover::before {
-                background: rgba(#000, 0.1);
+        background: rgba($plyr-color-gray-900, 0.1);
       }
     }
 
@@ -191,9 +193,9 @@
       align-items: center;
       display: flex;
       margin-left: auto;
-            margin-right: -($plyr-control-padding - 2);
+      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
       overflow: hidden;
-            padding-left: ceil($plyr-control-padding * 3.5);
+      padding-left: calc(#{$plyr-control-padding} * 3.5);
       pointer-events: none;
     }
   }

src/sass/components/progress.scss

@@ -6,14 +6,14 @@
 $plyr-progress-offset: $plyr-range-thumb-height;
 
 .plyr__progress {
-    left: $plyr-progress-offset / 2;
+  left: calc(#{$plyr-progress-offset} * 0.5);
   margin-right: $plyr-progress-offset;
   position: relative;
 
   input[type='range'],
   &__buffer {
-        margin-left: -($plyr-progress-offset / 2);
+    margin-left: calc(#{$plyr-progress-offset} * -0.5);
-        margin-right: -($plyr-progress-offset / 2);
+    margin-right: calc(#{$plyr-progress-offset} * -0.5);
     width: calc(100% + #{$plyr-progress-offset});
   }
 
@@ -36,7 +36,7 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   border-radius: 100px;
   height: $plyr-range-track-height;
   left: 0;
-    margin-top: -($plyr-range-track-height / 2);
+  margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
   padding: 0;
   position: absolute;
   top: 50%;
@@ -72,11 +72,11 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   animation: plyr-progress 1s linear infinite;
   background-image: linear-gradient(
     -45deg,
-        $plyr-progress-loading-bg 25%,
+    $plyr-progress-loading-background 25%,
     transparent 25%,
     transparent 50%,
-        $plyr-progress-loading-bg 50%,
+    $plyr-progress-loading-background 50%,
-        $plyr-progress-loading-bg 75%,
+    $plyr-progress-loading-background 75%,
     transparent 75%,
     transparent
   );
@@ -86,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
 }
 
 .plyr--video.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-video-progress-buffered-bg;
+  background-color: $plyr-video-progress-buffered-background;
 }
 
 .plyr--audio.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-audio-progress-buffered-bg;
+  background-color: $plyr-audio-progress-buffered-background;
 }

src/sass/components/sliders.scss

@@ -7,11 +7,11 @@
   -webkit-appearance: none; /* stylelint-disable-line */
   background: transparent;
   border: 0;
-    border-radius: ($plyr-range-thumb-height * 2);
+  border-radius: calc(#{$plyr-range-thumb-height} * 2);
-    // color is used in JS to populate lower fill for WebKit
+  // `color` property is used in JS to populate lower fill for WebKit
-    color: $plyr-range-fill-bg;
+  color: $plyr-range-fill-background;
   display: block;
-    height: $plyr-range-max-height;
+  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
   margin: 0;
   padding: 0;
   transition: box-shadow 0.3s ease;
@@ -25,7 +25,7 @@
   &::-webkit-slider-thumb {
     @include plyr-range-thumb();
     -webkit-appearance: none; /* stylelint-disable-line */
-        margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
+    margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
   }
 
   // Mozilla
@@ -39,7 +39,7 @@
 
   &::-moz-range-progress {
     background: currentColor;
-        border-radius: ($plyr-range-track-height / 2);
+    border-radius: calc(#{$plyr-range-track-height} / 2);
     height: $plyr-range-track-height;
   }
 

src/sass/components/times.scss

@@ -14,7 +14,7 @@
     margin-right: $plyr-control-spacing;
   }
 
-    @media (max-width: $plyr-bp-sm-max) {
+  @media (max-width: calc(#{$plyr-bp-md} - 1)) {
     display: none;
   }
 }

src/sass/components/tooltips.scss

@@ -3,7 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__tooltip {
-    background: $plyr-tooltip-bg;
+  background: $plyr-tooltip-background;
   border-radius: $plyr-tooltip-radius;
   bottom: 100%;
   box-shadow: $plyr-tooltip-shadow;
@@ -12,9 +12,9 @@
   font-weight: $plyr-font-weight-regular;
   left: 50%;
   line-height: 1.3;
-    margin-bottom: ($plyr-tooltip-padding * 2);
+  margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
   opacity: 0;
-    padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
+  padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
   pointer-events: none;
   position: absolute;
   transform: translate(-50%, 10px) scale(0.8);
@@ -27,8 +27,8 @@
   &::before {
     border-left: $plyr-tooltip-arrow-size solid transparent;
     border-right: $plyr-tooltip-arrow-size solid transparent;
-        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
+    border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
-        bottom: -$plyr-tooltip-arrow-size;
+    bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
     content: '';
     height: 0;
     left: 50%;
@@ -59,7 +59,7 @@
   transform-origin: 0 100%;
 
   &::before {
-        left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
   }
 }
 
@@ -72,7 +72,7 @@
 
   &::before {
     left: auto;
-        right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
     transform: translateX(50%);
   }
 }

src/sass/components/volume.scss

@@ -11,8 +11,8 @@
   width: 20%;
 
   input[type='range'] {
-        margin-left: ($plyr-control-spacing / 2);
+    margin-left: calc(#{$plyr-control-spacing} / 2);
-        margin-right: ($plyr-control-spacing / 2);
+    margin-right: calc(#{$plyr-control-spacing} / 2);
     position: relative;
     z-index: 2;
   }

src/sass/lib/css-vars.scss

@@ -0,0 +1,100 @@
+// Downloaded from https://github.com/malyw/css-vars (and modified)
+
+// global map to be filled via variables
+$css-vars: ();
+
+// the variable may be set to "true" anywhere in the code,
+// so native CSS custom properties will be used instead of the Sass global map
+$css-vars-use-native: false !default;
+
+///
+// Assigns a variable to the global map
+///
+@function css-var-assign($varName: null, $varValue: null) {
+  @return map-merge(
+    $css-vars,
+    (
+      $varName: $varValue,
+    )
+  );
+}
+
+///
+// Emulates var() CSS native function behavior
+//
+// $args[0] {String} "--" + variable name
+// [$args[1]] Optional default value if variable is not assigned yet
+//
+// E.G.:
+// color: var(--main-color);
+// background: var(--main-background, green);
+///
+@function var($args...) {
+  // CHECK PARAMS
+  @if (length($args) ==0) {
+    @error 'Variable name is expected to be passed to the var() function';
+  }
+  @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
+    @error "Variable name is expected to start from '--'";
+  }
+
+  // PROCESS
+  $var-name: nth($args, 1);
+  $var-value: map-get($css-vars, $var-name);
+
+  @if ($css-vars-use-native) {
+    // CSS variables
+    // Native CSS: don't process function in case of native
+    @return unquote('var(' + $args + ')');
+  } @else {
+    @if ($var-value == null) {
+      // variable is not provided so far
+      @if (length($args) == 2) {
+        $var-value: nth($args, 2);
+      }
+    }
+
+    // Sass: return value from the map
+    @return $var-value;
+  }
+}
+
+///
+// SASS mixin to provide variables
+// E.G.:
+// @include css-vars((
+//    --color: rebeccapurple,
+//    --height: 68px,
+//    --margin-top: calc(2vh + 20px)
+// ));
+///
+@mixin css-vars($var-map: null) {
+  // CHECK PARAMS
+  @if ($var-map == null) {
+    @error 'Map of variables is expected, instead got: null';
+  }
+  @if (type_of($var-map) != map) {
+    @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
+  }
+
+  // PROCESS
+  @if ($css-vars-use-native) {
+    // CSS variables
+    // Native CSS: assign CSS custom properties to the global scope
+    @at-root :root {
+      @each $var-name, $var-value in $var-map {
+        @if (type_of($var-value) == string) {
+          #{$var-name}: $var-value; // to prevent quotes interpolation
+        } @else {
+          #{$var-name}: #{$var-value};
+        }
+      }
+    }
+  } @else {
+    // Sass or debug
+    // merge variables and values to the global map (provides no output)
+    @each $var-name, $var-value in $var-map {
+      $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
+    }
+  }
+}

src/sass/lib/mixins.scss

@@ -4,9 +4,11 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
+@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
-    box-shadow: 0 0 0 5px rgba($color, 0.5);
+  outline-color: $color;
-    outline: 0;
+  outline-offset: 2px;
+  outline-style: dotted;
+  outline-width: 3px;
 }
 
 // Font smoothing
@@ -15,9 +17,6 @@
   @if $mode {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    } @else {
-        -moz-osx-font-smoothing: auto;
-        -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -26,14 +25,14 @@
 @mixin plyr-range-track() {
   background: transparent;
   border: 0;
-    border-radius: ($plyr-range-track-height / 2);
+  border-radius: calc(#{$plyr-range-track-height} / 2);
   height: $plyr-range-track-height;
   transition: box-shadow 0.3s ease;
   user-select: none;
 }
 
 @mixin plyr-range-thumb() {
-    background: $plyr-range-thumb-bg;
+  background: $plyr-range-thumb-background;
   border: 0;
   border-radius: 100%;
   box-shadow: $plyr-range-thumb-shadow;
@@ -43,7 +42,7 @@
   width: $plyr-range-thumb-height;
 }
 
-@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
+@mixin plyr-range-thumb-active($color) {
   box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }
 
@@ -69,8 +68,6 @@
   &.plyr--vimeo .plyr__video-wrapper {
     height: 0;
     position: relative;
-        top: 50%;
-        transform: translateY(-50%);
   }
 
   // Display correct icon

src/sass/plugins/ads.scss

@@ -23,7 +23,7 @@
 
   // The countdown label
   &::after {
-        background: rgba($plyr-color-gray-9, 0.8);
+    background: $plyr-color-gray-900;
     border-radius: 2px;
     bottom: $plyr-control-spacing;
     color: #fff;

src/sass/plugins/preview-thumbnails.scss

@@ -1,118 +0,0 @@
-// --------------------------------------------------------------
-// Preview Thumbnails
-// --------------------------------------------------------------
-
-$plyr-preview-padding: $plyr-tooltip-padding !default;
-$plyr-preview-bg: $plyr-tooltip-bg !default;
-$plyr-preview-radius: $plyr-tooltip-radius !default;
-$plyr-preview-shadow: $plyr-tooltip-shadow !default;
-$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
-$plyr-preview-image-bg: $plyr-color-gray-2 !default;
-$plyr-preview-time-font-size: $plyr-font-size-time !default;
-$plyr-preview-time-padding: 3px 6px !default;
-$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
-$plyr-preview-time-color: #fff;
-$plyr-preview-time-bottom-offset: 6px;
-
-.plyr__preview-thumb {
-    background-color: $plyr-preview-bg;
-    border-radius: 3px;
-    bottom: 100%;
-    box-shadow: $plyr-preview-shadow;
-    margin-bottom: $plyr-preview-padding * 2;
-    opacity: 0;
-    padding: $plyr-preview-radius;
-    pointer-events: none;
-    position: absolute;
-    transform: translate(0, 10px) scale(0.8);
-    transform-origin: 50% 100%;
-    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
-    z-index: 2;
-
-    &--is-shown {
-        opacity: 1;
-        transform: translate(0, 0) scale(1);
-    }
-
-    // The background triangle
-    &::before {
-        border-left: $plyr-preview-arrow-size solid transparent;
-        border-right: $plyr-preview-arrow-size solid transparent;
-        border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
-        bottom: -$plyr-preview-arrow-size;
-        content: '';
-        height: 0;
-        left: 50%;
-        position: absolute;
-        transform: translateX(-50%);
-        width: 0;
-        z-index: 2;
-    }
-
-    &__image-container {
-        background: $plyr-preview-image-bg;
-        border-radius: ($plyr-preview-radius - 1px);
-        overflow: hidden;
-        position: relative;
-        z-index: 0;
-
-        img {
-            height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
-            left: 0;
-            max-height: none;
-            max-width: none;
-            position: absolute;
-            top: 0;
-            width: 100%;
-        }
-    }
-
-    // Seek time text
-    &__time-container {
-        bottom: $plyr-preview-time-bottom-offset;
-        left: 0;
-        position: absolute;
-        right: 0;
-        white-space: nowrap;
-        z-index: 3;
-
-        span {
-            background-color: $plyr-preview-time-bg;
-            border-radius: ($plyr-preview-radius - 1px);
-            color: $plyr-preview-time-color;
-            font-size: $plyr-preview-time-font-size;
-            padding: $plyr-preview-time-padding;
-        }
-    }
-}
-
-.plyr__preview-scrubbing {
-    bottom: 0;
-    filter: blur(1px);
-    height: 100%;
-    left: 0;
-    margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
-    opacity: 0;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity 0.3s ease;
-    width: 100%;
-    z-index: 1;
-
-    &--is-shown {
-        opacity: 1;
-    }
-
-    img {
-        height: 100%;
-        left: 0;
-        max-height: none;
-        max-width: none;
-        object-fit: contain;
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-}

src/sass/plugins/preview-thumbnails/index.scss

@@ -0,0 +1,109 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+@import './settings';
+
+.plyr__preview-thumb {
+  background-color: $plyr-preview-background;
+  border-radius: 3px;
+  bottom: 100%;
+  box-shadow: $plyr-preview-shadow;
+  margin-bottom: calc(#{$plyr-preview-padding} * 2);
+  opacity: 0;
+  padding: $plyr-preview-radius;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+  z-index: 2;
+
+  &--is-shown {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+
+  // The background triangle
+  &::before {
+    border-left: $plyr-preview-arrow-size solid transparent;
+    border-right: $plyr-preview-arrow-size solid transparent;
+    border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
+    bottom: calc(#{$plyr-preview-arrow-size} * -1);
+    content: '';
+    height: 0;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 0;
+    z-index: 2;
+  }
+
+  &__image-container {
+    background: $plyr-preview-image-background;
+    border-radius: calc(#{$plyr-preview-radius} - 1px);
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+
+    img {
+      height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
+      left: 0;
+      max-height: none;
+      max-width: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  // Seek time text
+  &__time-container {
+    bottom: $plyr-preview-time-bottom-offset;
+    left: 0;
+    position: absolute;
+    right: 0;
+    white-space: nowrap;
+    z-index: 3;
+
+    span {
+      background-color: $plyr-preview-time-background;
+      border-radius: calc(#{$plyr-preview-radius} - 1px);
+      color: $plyr-preview-time-color;
+      font-size: $plyr-preview-time-font-size;
+      padding: $plyr-preview-time-padding;
+    }
+  }
+}
+
+.plyr__preview-scrubbing {
+  bottom: 0;
+  filter: blur(1px);
+  height: 100%;
+  left: 0;
+  margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.3s ease;
+  width: 100%;
+  z-index: 1;
+
+  &--is-shown {
+    opacity: 1;
+  }
+
+  img {
+    height: 100%;
+    left: 0;
+    max-height: none;
+    max-width: none;
+    object-fit: contain;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}

src/sass/plugins/preview-thumbnails/settings.scss

@@ -0,0 +1,15 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+$plyr-preview-padding: $plyr-tooltip-padding !default;
+$plyr-preview-background: $plyr-tooltip-background !default;
+$plyr-preview-radius: $plyr-tooltip-radius !default;
+$plyr-preview-shadow: $plyr-tooltip-shadow !default;
+$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
+$plyr-preview-image-background: $plyr-color-gray-200 !default;
+$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-time-padding: 3px 6px !default;
+$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-color: #fff;
+$plyr-preview-time-bottom-offset: 6px;

src/sass/plyr.scss

@@ -5,6 +5,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import 'lib/css-vars';
+$css-vars-use-native: true;
+
 @import 'settings/breakpoints';
 @import 'settings/colors';
 @import 'settings/cosmetics';
@@ -43,7 +46,7 @@
 @import 'states/fullscreen';
 
 @import 'plugins/ads';
-@import 'plugins/preview-thumbnails';
+@import 'plugins/preview-thumbnails/index';
 
 @import 'utils/animation';
 @import 'utils/hidden';

src/sass/settings/badges.scss

@@ -2,5 +2,6 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-bg: $plyr-color-gray-7 !default;
+$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
-$plyr-badge-color: #fff !default;
+$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
+$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;

src/sass/settings/breakpoints.scss

@@ -1,12 +1,9 @@
 // ==========================================================================
 // Breakpoints
+// NOTE: we can't use CSS variables for breakpoints unfortunately
+// https://www.w3.org/TR/css-variables-1/#using-variables
 // ==========================================================================
 
 $plyr-bp-sm: 480px !default;
 $plyr-bp-md: 768px !default;
 $plyr-bp-lg: 1024px !default;
-
-// Max-width media queries
-$plyr-bp-xs-max: ($plyr-bp-sm - 1);
-$plyr-bp-sm-max: ($plyr-bp-md - 1);
-$plyr-bp-md-max: ($plyr-bp-lg - 1);

src/sass/settings/captions.scss

@@ -2,8 +2,9 @@
 // Captions
 // ==========================================================================
 
-$plyr-captions-bg: rgba(#000, 0.8) !default;
+$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
-$plyr-captions-color: #fff !default;
+$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
+
 $plyr-font-size-captions-base: $plyr-font-size-base !default;
 $plyr-font-size-captions-small: $plyr-font-size-small !default;
 $plyr-font-size-captions-medium: $plyr-font-size-large !default;

src/sass/settings/colors.scss

@@ -2,16 +2,16 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: hsl(198, 100%, 50%) !default;
+$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
 
 // Grayscale
-$plyr-color-gray-9: hsl(210, 15%, 16%);
+$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
-$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
+$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
-$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
+$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
-$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
+$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
-$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
+$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
-$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
+$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
-$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
+$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
-$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
+$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
-$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
+$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
-$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);
+$plyr-color-gray-50: hsl(216, 15%, 97%) !default;

src/sass/settings/controls.scss

@@ -2,17 +2,31 @@
 // Controls
 // ==========================================================================
 
-$plyr-control-icon-size: 18px !default;
+$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
-$plyr-control-spacing: 10px !default;
+$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
-$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
+$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
-$plyr-control-radius: 3px !default;
+$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
 
-$plyr-video-controls-bg: #000 !default;
+$plyr-control-toggle-checked-background: var(
-$plyr-video-control-color: #fff !default;
+  --plyr-control-toggle-checked-background,
-$plyr-video-control-color-hover: #fff !default;
+  var(--plyr-color-main, $plyr-color-main)
-$plyr-video-control-bg-hover: $plyr-color-main !default;
+) !default;
 
-$plyr-audio-controls-bg: #fff !default;
+$plyr-video-controls-background: var(
-$plyr-audio-control-color: $plyr-color-gray-7 !default;
+  --plyr-video-controls-background,
-$plyr-audio-control-color-hover: #fff !default;
+  linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
-$plyr-audio-control-bg-hover: $plyr-color-main !default;
+) !default;
+$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
+$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
+$plyr-video-control-background-hover: var(
+  --plyr-video-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
+
+$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
+$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
+$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
+$plyr-audio-control-background-hover: var(
+  --plyr-audio-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;

src/sass/settings/cosmetics.scss

@@ -2,4 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-default-color: $plyr-color-main !default;
+$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;

src/sass/settings/menus.scss

@@ -2,9 +2,14 @@
 // Menus
 // ==========================================================================
 
-$plyr-menu-bg: rgba(#fff, 0.9) !default;
+$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
-$plyr-menu-color: $plyr-color-gray-7 !default;
+$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
-$plyr-menu-arrow-size: 6px !default;
+$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
-$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default;
+$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
-$plyr-menu-border-shadow-color: #fff !default;
+$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
-$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+
+$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
+
+$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
+$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;

src/sass/settings/progress.scss

@@ -3,9 +3,12 @@
 // ==========================================================================
 
 // Loading
-$plyr-progress-loading-size: 25px !default;
+$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
+$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
 
 // Buffered
-$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
+$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
+$plyr-audio-progress-buffered-background: var(
+  --plyr-audio-progress-buffered-background,
+  rgba($plyr-color-gray-200, 0.6)
+) !default;

src/sass/settings/sliders.scss

@@ -2,23 +2,39 @@
 // Sliders
 // ==========================================================================
 
-// Active state
-$plyr-range-thumb-active-shadow-width: 3px !default;
-
 // Thumb
-$plyr-range-thumb-height: 13px !default;
+$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
-$plyr-range-thumb-bg: #fff !default;
+$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
-$plyr-range-thumb-border: 2px solid transparent !default;
+$plyr-range-thumb-shadow: var(
-$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
+  --plyr-range-thumb-shadow,
+  0 1px 1px rgba($plyr-color-gray-900, 0.15),
+  0 0 0 1px rgba($plyr-color-gray-900, 0.2)
+) !default;
+
+// Active state
+$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
 
 // Track
-$plyr-range-track-height: 5px !default;
+$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
-$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
 
 // Fill
-$plyr-range-fill-bg: $plyr-color-main !default;
+$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
 
 // Type specific
-$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
+$plyr-video-range-track-background: var(
-$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
+  --plyr-video-range-track-background,
-$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
+  $plyr-video-progress-buffered-background
+) !default;
+$plyr-video-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba(#fff, 0.5)
+) !default;
+
+$plyr-audio-range-track-background: var(
+  --plyr-audio-range-track-background,
+  $plyr-audio-progress-buffered-background
+) !default;
+$plyr-audio-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba($plyr-color-gray-900, 0.1)
+) !default;

src/sass/settings/tooltips.scss

@@ -2,9 +2,9 @@
 // Tooltips
 // ==========================================================================
 
-$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
+$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
-$plyr-tooltip-color: $plyr-color-gray-7 !default;
+$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
-$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
+$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
-$plyr-tooltip-arrow-size: 4px !default;
+$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
-$plyr-tooltip-radius: 3px !default;
+$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
-$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;

src/sass/settings/type.scss

@@ -2,19 +2,19 @@
 // Typography
 // ==========================================================================
 
-$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
+$plyr-font-family: var(--plyr-font-family, inherit) !default;
-$plyr-font-size-base: 16px !default;
+$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
-$plyr-font-size-small: 14px !default;
+$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
-$plyr-font-size-large: 18px !default;
+$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
-$plyr-font-size-xlarge: 21px !default;
+$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
 
-$plyr-font-size-time: $plyr-font-size-small !default;
+$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
-$plyr-font-size-badge: 9px !default;
+$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
-$plyr-font-size-menu: $plyr-font-size-small !default;
+$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
 
-$plyr-font-weight-regular: 500 !default;
+$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
-$plyr-font-weight-bold: 600 !default;
+$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
 
-$plyr-line-height: 1.7 !default;
+$plyr-line-height: var(--plyr-line-height, 1.7) !default;
 
-$plyr-font-smoothing: false !default;
+$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;

src/sass/types/audio.scss

@@ -9,7 +9,7 @@
 
 // Controls container
 .plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
+  background: $plyr-audio-controls-background;
   border-radius: inherit;
   color: $plyr-audio-control-color;
   padding: $plyr-control-spacing;
@@ -20,7 +20,7 @@
   &.plyr__tab-focus,
   &:hover,
   &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
+    background: $plyr-audio-control-background-hover;
     color: $plyr-audio-control-color-hover;
   }
 }
@@ -28,34 +28,34 @@
 // Range inputs
 .plyr--full-ui.plyr--audio input[type='range'] {
   &::-webkit-slider-runnable-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   &::-moz-range-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   &::-ms-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
   }
 }
 
 // Progress
 .plyr--audio .plyr__progress__buffer {
-    color: $plyr-audio-progress-buffered-bg;
+  color: $plyr-audio-progress-buffered-background;
 }

src/sass/types/video.scss

@@ -17,6 +17,7 @@
   height: 100%;
   margin: auto;
   overflow: hidden;
+  position: relative;
   width: 100%;
 }
 
@@ -52,20 +53,22 @@ $embed-padding: ((100 / 16) * 9);
 
 // Controls container
 .plyr--video .plyr__controls {
-    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+  background: $plyr-video-controls-background;
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
   bottom: 0;
   color: $plyr-video-control-color;
   left: 0;
-    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
+  padding: calc(#{$plyr-control-spacing} / 2);
+  padding-top: calc(#{$plyr-control-spacing} * 2);
   position: absolute;
   right: 0;
   transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
   z-index: 3;
 
   @media (min-width: $plyr-bp-sm) {
-        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    padding: $plyr-control-spacing;
+    padding-top: calc(#{$plyr-control-spacing} * 3.5);
   }
 }
 
@@ -82,23 +85,25 @@ $embed-padding: ((100 / 16) * 9);
   &.plyr__tab-focus,
   &:hover,
   &[aria-expanded='true'] {
-        background: $plyr-video-control-bg-hover;
+    background: $plyr-video-control-background-hover;
     color: $plyr-video-control-color-hover;
   }
 }
 
 // Large play button (video only)
 .plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
+  background: $plyr-video-control-background-hover;
   border: 0;
   border-radius: 100%;
   color: $plyr-video-control-color;
   display: none;
   left: 50%;
-    padding: ceil($plyr-control-spacing * 1.5);
+  opacity: 0.9;
+  padding: calc(#{$plyr-control-spacing} * 1.5);
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
+  transition: 0.3s;
   z-index: 2;
 
   // Offset icon to make the play button look right
@@ -109,7 +114,7 @@ $embed-padding: ((100 / 16) * 9);
 
   &:hover,
   &:focus {
-        background: $plyr-video-control-bg-hover;
+    opacity: 1;
   }
 }
 
@@ -125,34 +130,34 @@ $embed-padding: ((100 / 16) * 9);
 // Video range inputs
 .plyr--full-ui.plyr--video input[type='range'] {
   &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
   }
 }
 
 // Progress
 .plyr--video .plyr__progress__buffer {
-    color: $plyr-video-progress-buffered-bg;
+  color: $plyr-video-progress-buffered-background;
 }

tasks/build.js

@@ -14,8 +14,10 @@ const commonjs = require('rollup-plugin-commonjs');
 const resolve = require('rollup-plugin-node-resolve');
 // CSS
 const sass = require('gulp-sass');
-const clean = require('gulp-clean-css');
+const postcss = require('gulp-postcss');
-const prefix = require('gulp-autoprefixer');
+const autoprefixer = require('autoprefixer');
+const clean = require('postcss-clean');
+const customprops = require('postcss-custom-properties');
 // Images
 const svgstore = require('gulp-svgstore');
 const imagemin = require('gulp-imagemin');
@@ -29,10 +31,8 @@ const size = require('gulp-size');
 const sourcemaps = require('gulp-sourcemaps');
 const browserSync = require('browser-sync').create();
 // Configs
-const pkg = require('../package.json');
 const build = require('../build.json');
 // Info from package
-const { browserslist: browsers } = pkg;
 const minSuffix = '.min';
 // Paths
 const root = path.join(__dirname, '..');
@@ -156,12 +156,7 @@ Object.entries(build.css).forEach(([filename, entry]) => {
             .src(src)
             .pipe(plumber())
             .pipe(sass())
-            .pipe(
+            .pipe(postcss([customprops(), autoprefixer(), clean()]))
-                prefix(browsers, {
-                    cascade: false,
-                }),
-            )
-            .pipe(clean())
             .pipe(size(sizeOptions))
             .pipe(gulp.dest(dist)),
     );