9 files changed, 48 insertions, 9 deletions
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js
index 76acbd06..20e958fc 100644
--- a/src/js/fullscreen.js
+++ b/src/js/fullscreen.js
@@ -256,7 +256,11 @@ class Fullscreen {
 
     // iOS native fullscreen doesn't need the request step
     if (browser.isIos && this.player.config.fullscreen.iosNative) {
-      this.target.webkitEnterFullscreen();
+      if (this.player.isVimeo) {
+        this.player.embed.requestFullscreen();
+      } else {
+        this.target.webkitEnterFullscreen();
+      }
     } else if (!Fullscreen.native || this.forceFallback) {
       this.toggleFallback(true);
     } else if (!this.prefix) {
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index b050cc53..5fe41aba 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -104,7 +104,7 @@ const vimeo = {
     const src = format(player.config.urls.vimeo.iframe, id, params);
     iframe.setAttribute('src', src);
     iframe.setAttribute('allowfullscreen', '');
-    iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture');
+    iframe.setAttribute('allow', ['autoplay', 'fullscreen', 'picture-in-picture'].join('; '));
 
     // Set the referrer policy if required
     if (!is.empty(referrerPolicy)) {
diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts
index 4b332aeb..479cfa98 100644
--- a/src/js/plyr.d.ts
+++ b/src/js/plyr.d.ts
@@ -139,9 +139,14 @@ declare class Plyr {
   ratio?: string;
 
   /**
+   * Access Elements cache
+   */
+  elements: Plyr.Elements;
+
+  /**
    * Returns the current video Provider
    */
-  readonly provider: 'html5' | 'vimeo' | 'youtube';
+  readonly provider: Plyr.Provider;
 
   /**
    * Returns the native API for Vimeo or Youtube players
@@ -510,6 +515,8 @@ declare namespace Plyr {
 
   interface QualityOptions {
     default: number;
+    forced?: boolean;
+    onChange?: (quality: number) => void;
     options: number[];
   }
 
@@ -560,6 +567,27 @@ declare namespace Plyr {
     src?: string | string[];
   }
 
+  export interface Elements {
+    buttons: {
+      airplay?: HTMLButtonElement;
+      captions?: HTMLButtonElement;
+      download?: HTMLButtonElement;
+      fastForward?: HTMLButtonElement;
+      fullscreen?: HTMLButtonElement;
+      mute?: HTMLButtonElement;
+      pip?: HTMLButtonElement;
+      play?: HTMLButtonElement | HTMLButtonElement[];
+      restart?: HTMLButtonElement;
+      rewind?: HTMLButtonElement;
+      settings?: HTMLButtonElement;
+    };
+    captions: HTMLElement | null;
+    container: HTMLElement | null;
+    controls: HTMLElement | null;
+    fullscreen: HTMLElement | null;
+    wrapper: HTMLElement | null;
+  }
+
   interface SourceInfo {
     /**
      * Note: YouTube and Vimeo are currently not supported as audio sources.
diff --git a/src/js/plyr.js b/src/js/plyr.js
index b37893bc..e67e29d4 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -206,7 +206,7 @@ class Plyr {
         }
 
         // Unsupported or missing provider
-        if (is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
+        if (is.empty(this.provider) || !Object.values(providers).includes(this.provider)) {
           this.debug.error('Setup failed: Invalid provider');
           return;
         }
diff --git a/src/js/utils/is.js b/src/js/utils/is.js
index 3bb50a00..5a60da06 100644
--- a/src/js/utils/is.js
+++ b/src/js/utils/is.js
@@ -13,7 +13,6 @@ const isFunction = (input) => getConstructor(input) === Function;
 const isArray = (input) => Array.isArray(input);
 const isWeakMap = (input) => instanceOf(input, WeakMap);
 const isNodeList = (input) => instanceOf(input, NodeList);
-const isElement = (input) => instanceOf(input, Element);
 const isTextNode = (input) => getConstructor(input) === Text;
 const isEvent = (input) => instanceOf(input, Event);
 const isKeyboardEvent = (input) => instanceOf(input, KeyboardEvent);
@@ -21,6 +20,13 @@ const isCue = (input) => instanceOf(input, window.TextTrackCue) || instanceOf(in
 const isTrack = (input) => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
 const isPromise = (input) => instanceOf(input, Promise) && isFunction(input.then);
 
+const isElement = (input) =>
+  input !== null && 
+  (typeof input === "object") &&
+  (input.nodeType === 1) &&
+  (typeof input.style === "object") &&
+  (typeof input.ownerDocument === "object");
+
 const isEmpty = (input) =>
   isNullOrUndefined(input) ||
   ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) ||
diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss
index 2e966a32..3a158c1b 100644
--- a/src/sass/components/poster.scss
+++ b/src/sass/components/poster.scss
@@ -3,7 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__poster {
-  background-color: #000;
+  background-color: var(--plyr-video-background, $plyr-video-background);
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: contain;
diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss
index c9f957bb..5f1cb995 100644
--- a/src/sass/components/times.scss
+++ b/src/sass/components/times.scss
@@ -14,7 +14,7 @@
     margin-right: $plyr-control-spacing;
   }
 
-  @media (max-width: calc(#{$plyr-bp-md} - 1px)) {
+  @media (max-width: ($plyr-bp-md - 1px)) {
     display: none;
   }
 }
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index f1364905..a9846b19 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -3,6 +3,7 @@
 // ==========================================================================
 
 $plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
+$plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default;
 
 // Grayscale
 $plyr-color-gray-900: hsl(216, 15%, 16%) !default;
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
index 0cfaeacb..9a10d5ea 100644
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@@ -4,7 +4,7 @@
 
 // Container
 .plyr--video {
-  background: #000;
+  background: var(--plyr-video-background, $plyr-video-background);
   overflow: hidden;
 
   &.plyr--menu-open {
@@ -13,7 +13,7 @@
 }
 
 .plyr__video-wrapper {
-  background: #000;
+  background: var(--plyr-video-background, $plyr-video-background);
   height: 100%;
   margin: auto;
   overflow: hidden;