Merge pull request #1684 from sampotts/develop

v3.5.8

changelog.md

@@ -1,3 +1,13 @@
+### v3.5.8
+
+-   Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS
+-   Cleaned up the organisation of some of the SCSS files (should not effect CSS output)
+-   Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site
+-   Remove all Vimeo controls for Pro & Premium accounts
+-   Improve thumbnail size calculations when size is set per css (thanks @ydylla)
+-   Add previewThumbnails source setter (thanks @ydylla)
+-   More speed setting logic improvements
+
 ### v3.5.7
 
 -   Typescript typings (thanks @ondratra)
@@ -192,7 +202,9 @@ Thanks @friday for the following:
 -   Suggestion: Remove array newline rule
 -   Contributions improvements
 
--   fix: html5.cancelRequest not remove source tag correctly (thanks @a60814billy)
+and other folks for:
+
+-   Fix: html5.cancelRequest not remove source tag correctly (thanks @a60814billy)
 -   remove event listeners in destroy() (thanks @cky917)
 -   Fix markdown in README (thanks @azu)
 -   Some parts of the accessibility improvements outlined in #905 (more on the way...)

demo/index.html

@@ -233,7 +233,8 @@
                     </li>
                     <li class="plyr__cite plyr__cite--vimeo" hidden>
                         <small>
-                            <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
+                            <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a>
+                            on&nbsp;
                             <span class="color--vimeo">
                                 <svg class="icon" role="presentation">
                                     <title>Vimeo</title>

demo/package.json

@@ -5,10 +5,10 @@
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",
     "dependencies": {
-        "core-js": "^3.1.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.5"
+        "url-polyfill": "^1.1.8"
     }
 }

demo/src/js/demo.js

@@ -64,6 +64,10 @@ import toggleClass from './toggle-class';
                         'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
                     ],
                 },
+                vimeo: {
+                    // Prevent Vimeo blocking plyr.io demo site
+                    referrerPolicy: 'no-referrer',
+                }
             });
 
             // Expose for tinkering in the console

demo/src/js/sources.js

@@ -68,7 +68,7 @@ const sources = {
         type: 'video',
         sources: [
             {
-                src: 'https://vimeo.com/383514704',
+                src: 'https://vimeo.com/40648169',
                 provider: 'vimeo',
             },
         ],

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.5.7",
+    "version": "3.5.8",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",

readme.md

@@ -445,6 +445,9 @@ player.source = {
         },
     ],
     poster: '/path/to/poster.jpg',
+    previewThumbnails: {
+        src: '/path/to/thumbnails.vtt'
+    },
     tracks: [
         {
             kind: 'captions',
@@ -515,12 +518,13 @@ player.source = {
 _Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL.
 
 | Property                  | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                    |
-| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `type`                    | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources.                                                                                                                                                                                                                                                                                                             |
 | `title`                   | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.                                                                                                                                                                                                                                                |
 | `sources`                 | Array  | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required.                                                                                                                                                                                                                                             |
 | `poster`¹            | String | The URL for the poster image (HTML5 video only).                                                                                                                                                                                                                                                                                                                                                               |
 | `tracks`&sup1;            | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
+| `previewThumbnails`&sup1; | Object | The same object like in the `previewThumbnails` constructor option. This means you can either change the thumbnails vtt via the `src` key or disable the thumbnails plugin for the next video by passing `{ enabled: false }`.                                                                                                                                                                                 |
 
 1.  HTML5 only
 

src/js/config/defaults.js

@@ -419,6 +419,11 @@ const defaults = {
         title: false,
         speed: true,
         transparent: false,
+        // These settings require a pro or premium account to work
+        sidedock: false,
+        controls: false,
+        // Custom settings from Plyr
+        referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
     },
 
     // YouTube plugin

src/js/controls.js

@@ -9,7 +9,7 @@ import captions from './captions';
 import html5 from './html5';
 import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
-import { dedupe, fillRange } from './utils/arrays';
+import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
 import {
     createElement,
@@ -1053,13 +1053,8 @@ const controls = {
         const type = 'speed';
         const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
 
-        // Determine options to display
+        // Filter out invalid speeds
-        // Vimeo and YouTube limit to 0.5x-2x
+        this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);
-        if (this.isVimeo || this.isYouTube) {
-            this.options.speed = fillRange(0.5, 2, 0.25).filter(s => this.config.speed.options.includes(s));
-        } else {
-            this.options.speed = this.config.speed.options;
-        }
 
         // Toggle the pane and tab
         const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;

src/js/html5.js

@@ -42,13 +42,16 @@ const html5 = {
             .filter(Boolean);
     },
 
-    extend() {
+    setup() {
         if (!this.isHTML5) {
             return;
         }
 
         const player = this;
 
+        // Set speed options from config
+        player.options.speed = player.config.speed.options;
+
         // Set aspect ratio if fixed
         if (!is.empty(this.config.ratio)) {
             setAspectRatio.call(player);
@@ -93,7 +96,6 @@ const html5 = {
                     if (preload !== 'none' || readyState) {
                         // Restore time
                         player.once('loadedmetadata', () => {
-
                             player.speed = playbackRate;
                             player.currentTime = currentTime;
 

src/js/media.js

@@ -49,7 +49,7 @@ const media = {
         }
 
         if (this.isHTML5) {
-            html5.extend.call(this);
+            html5.setup.call(this);
         } else if (this.isYouTube) {
             youtube.setup.call(this);
         } else if (this.isVimeo) {

src/js/plugins/preview-thumbnails.js

@@ -104,7 +104,7 @@ class PreviewThumbnails {
     }
 
     load() {
-        // Togglethe regular seek tooltip
+        // Toggle the regular seek tooltip
         if (this.player.elements.display.seekTooltip) {
             this.player.elements.display.seekTooltip.hidden = this.enabled;
         }
@@ -328,6 +328,15 @@ class PreviewThumbnails {
         this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
     }
 
+    destroy() {
+        if (this.elements.thumb.container) {
+            this.elements.thumb.container.remove();
+        }
+        if (this.elements.scrubbing.container) {
+            this.elements.scrubbing.container.remove();
+        }
+    }
+
     showImageAtCurrentTime() {
         if (this.mouseDown) {
             this.setScrubbingContainerSize();
@@ -561,6 +570,11 @@ class PreviewThumbnails {
             return height;
         }
 
+        // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+        if (this.sizeSpecifiedInCSS) {
+            return this.elements.thumb.imageContainer.clientHeight;
+        }
+
         return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
     }
 
@@ -601,7 +615,7 @@ class PreviewThumbnails {
     }
 
     determineContainerAutoSizing() {
-        if (this.elements.thumb.imageContainer.clientHeight > 20) {
+        if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
             // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
             this.sizeSpecifiedInCSS = true;
         }
@@ -613,6 +627,12 @@ 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) {
+            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) {
+            const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+            this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
         }
 
         this.setThumbContainerPos();

src/js/plugins/vimeo.js

@@ -42,23 +42,28 @@ function assurePlaybackState(play) {
 
 const vimeo = {
     setup() {
+        const player = this;
+
         // Add embed class for responsive
-        toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
+        toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
+
+        // Set speed options from config
+        player.options.speed = player.config.speed.options;
 
         // Set intial ratio
-        setAspectRatio.call(this);
+        setAspectRatio.call(player);
 
         // Load the SDK if not already
         if (!is.object(window.Vimeo)) {
-            loadScript(this.config.urls.vimeo.sdk)
+            loadScript(player.config.urls.vimeo.sdk)
                 .then(() => {
-                    vimeo.ready.call(this);
+                    vimeo.ready.call(player);
                 })
                 .catch(error => {
-                    this.debug.warn('Vimeo SDK (player.js) failed to load', error);
+                    player.debug.warn('Vimeo SDK (player.js) failed to load', error);
                 });
         } else {
-            vimeo.ready.call(this);
+            vimeo.ready.call(player);
         }
     },
 
@@ -99,6 +104,11 @@ const vimeo = {
         iframe.setAttribute('allowtransparency', '');
         iframe.setAttribute('allow', 'autoplay');
 
+        // Set the referrer policy if required
+        if (!is.empty(config.referrerPolicy)) {
+            iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+        }
+
         // Get poster, if already set
         const { poster } = player;
         // Inject the package
@@ -191,9 +201,7 @@ const vimeo = {
                 return speed;
             },
             set(input) {
-                player.embed
+                player.embed.setPlaybackRate(input).then(() => {
-                    .setPlaybackRate(input)
-                    .then(() => {
                     speed = input;
                     triggerEvent.call(player, player.media, 'ratechange');
                 });

src/js/plugins/youtube.js

@@ -297,7 +297,9 @@ const youtube = {
                     });
 
                     // Get available speeds
-                    player.options.speed = instance.getAvailablePlaybackRates();
+                    const speeds = instance.getAvailablePlaybackRates();
+                    // Filter based on config
+                    player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
 
                     // Set the tabindex to avoid focus entering iframe
                     if (player.supported.ui) {

src/js/source.js

@@ -5,6 +5,7 @@
 import { providers } from './config/types';
 import html5 from './html5';
 import media from './media';
+import PreviewThumbnails from './plugins/preview-thumbnails';
 import support from './support';
 import ui from './ui';
 import { createElement, insertElement, removeElement } from './utils/elements';
@@ -130,9 +131,20 @@ const source = {
                     this.media.load();
                 }
 
-                // Reload thumbnails
+                // Update previewThumbnails config & reload plugin
-                if (this.previewThumbnails) {
+                if (!is.empty(input.previewThumbnails)) {
-                    this.previewThumbnails.load();
+                    Object.assign(this.config.previewThumbnails, input.previewThumbnails);
+
+                    // Cleanup previewThumbnails plugin if it was loaded
+                    if (this.previewThumbnails && this.previewThumbnails.loaded) {
+                        this.previewThumbnails.destroy();
+                        this.previewThumbnails = null;
+                    }
+
+                    // Create new instance if it is still enabled
+                    if (this.config.previewThumbnails.enabled) {
+                        this.previewThumbnails = new PreviewThumbnails(this);
+                    }
                 }
 
                 // Update the fullscreen support

src/js/utils/arrays.js

@@ -21,11 +21,3 @@ export function closest(array, value) {
 
     return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
 }
-
-export function fillRange(start, end, step = 1) {
-    const len = Math.floor((end - start) / step) + 1;
-
-    return Array(len)
-        .fill()
-        .map((_, idx) => start + idx * step);
-}

src/sass/base.scss

@@ -8,6 +8,7 @@
     align-items: center;
     direction: ltr;
     display: flex;
+    flex-direction: column;
     font-family: $plyr-font-family;
     font-variant-numeric: tabular-nums; // Force monosace-esque number widths
     font-weight: $plyr-font-weight-regular;

src/sass/components/audio.scss

@@ -1,7 +0,0 @@
-// --------------------------------------------------------------
-// Audio styles
-// --------------------------------------------------------------
-
-.plyr--audio {
-    display: block;
-}

src/sass/components/control.scss

@@ -50,59 +50,3 @@ a.plyr__control {
 .plyr__control.plyr__control--pressed .label--not-pressed {
     display: none;
 }
-
-// Audio control
-.plyr--audio .plyr__control {
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
-        color: $plyr-audio-control-color-hover;
-    }
-}
-
-// Video control
-.plyr--video .plyr__control {
-    // Hover and tab focus
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: $plyr-video-control-bg-hover;
-        color: $plyr-video-control-color-hover;
-    }
-}
-
-// Large play button (video only)
-.plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
-    border: 0;
-    border-radius: 100%;
-    color: $plyr-video-control-color;
-    display: none;
-    left: 50%;
-    padding: ceil($plyr-control-spacing * 1.5);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 2;
-
-    // Offset icon to make the play button look right
-    svg {
-        left: 2px;
-        position: relative;
-    }
-
-    &:hover,
-    &:focus {
-        background: $plyr-video-control-bg-hover;
-    }
-}
-
-.plyr--playing .plyr__control--overlaid {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: block;
-}

src/sass/components/controls.scss

@@ -49,40 +49,6 @@
     }
 }
 
-// Audio controls
-.plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
-    border-radius: inherit;
-    color: $plyr-audio-control-color;
-    padding: $plyr-control-spacing;
-}
-
-// Video controls
-.plyr--video .plyr__controls {
-    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
-    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);
-    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;
-    }
-}
-
-// Hide video controls
-.plyr--video.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%);
-}
-
 // Some options are hidden by default
 .plyr [data-plyr='captions'],
 .plyr [data-plyr='pip'],

src/sass/components/menus.scss

@@ -39,8 +39,7 @@
 
         > div {
             overflow: hidden;
-            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-                width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         // Arrow
@@ -74,8 +73,7 @@
             color: $plyr-menu-color;
             display: flex;
             font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2)
+            padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
-                ceil($plyr-control-padding * 1.5);
             user-select: none;
             width: 100%;
 

src/sass/components/sliders.scss

@@ -19,11 +19,7 @@
 
     &::-webkit-slider-runnable-track {
         @include plyr-range-track();
-        background-image: linear-gradient(
+        background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
-            to right,
-            currentColor var(--value, 0%),
-            transparent var(--value, 0%)
-        );
     }
 
     &::-webkit-slider-thumb {
@@ -96,69 +92,3 @@
         }
     }
 }
-
-// Video range inputs
-.plyr--full-ui.plyr--video input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active();
-        }
-    }
-}
-
-// Audio range inputs
-.plyr--full-ui.plyr--audio input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-    }
-}

src/sass/components/times.scss

@@ -18,7 +18,3 @@
         display: none;
     }
 }
-
-.plyr--video .plyr__time {
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
-}

src/sass/components/video.scss

@@ -1,51 +0,0 @@
-// --------------------------------------------------------------
-// Video styles
-// --------------------------------------------------------------
-
-.plyr--video {
-    background: #000;
-    overflow: hidden;
-
-    // Menu open
-    &.plyr--menu-open {
-        overflow: visible;
-    }
-}
-
-.plyr__video-wrapper {
-    background: #000;
-    height: 100%;
-    margin: auto;
-    overflow: hidden;
-    width: 100%;
-}
-
-// Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
-
-.plyr__video-embed,
-.plyr__video-wrapper--fixed-ratio {
-    height: 0;
-    padding-bottom: to-percentage($embed-padding);
-}
-
-.plyr__video-embed iframe,
-.plyr__video-wrapper--fixed-ratio video {
-    border: 0;
-    left: 0;
-    position: absolute;
-    top: 0;
-}
-
-// If the full custom UI is supported
-.plyr--full-ui .plyr__video-embed {
-    $height: 240;
-    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
-    // Only used for Vimeo
-    > .plyr__video-embed__container {
-        padding-bottom: to-percentage($height);
-        position: relative;
-        transform: translateY(-$offset);
-    }
-}

src/sass/plyr.scss

@@ -25,7 +25,6 @@
 
 @import 'base';
 
-@import 'components/audio';
 @import 'components/badges';
 @import 'components/captions';
 @import 'components/control';
@@ -35,10 +34,12 @@
 @import 'components/poster';
 @import 'components/times';
 @import 'components/tooltips';
-@import 'components/video';
 @import 'components/progress';
 @import 'components/volume';
 
+@import 'types/audio';
+@import 'types/video';
+
 @import 'states/fullscreen';
 
 @import 'plugins/ads';

src/sass/settings/menus.scss

@@ -5,6 +5,6 @@
 $plyr-menu-bg: rgba(#fff, 0.9) !default;
 $plyr-menu-color: $plyr-color-gray-7 !default;
 $plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: $plyr-color-gray-2 !default;
+$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default;
 $plyr-menu-border-shadow-color: #fff !default;
 $plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;

src/sass/types/audio.scss

@@ -0,0 +1,56 @@
+// --------------------------------------------------------------
+// Audio styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--audio {
+    display: block;
+}
+
+// Controls container
+.plyr--audio .plyr__controls {
+    background: $plyr-audio-controls-bg;
+    border-radius: inherit;
+    color: $plyr-audio-control-color;
+    padding: $plyr-control-spacing;
+}
+
+// Control elements
+.plyr--audio .plyr__control {
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: $plyr-audio-control-bg-hover;
+        color: $plyr-audio-control-color-hover;
+    }
+}
+
+// Range inputs
+.plyr--full-ui.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    &::-ms-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+    }
+}

src/sass/types/video.scss

@@ -0,0 +1,157 @@
+// --------------------------------------------------------------
+// Video styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--video {
+    background: #000;
+    overflow: hidden;
+
+    &.plyr--menu-open {
+        overflow: visible;
+    }
+}
+
+.plyr__video-wrapper {
+    background: #000;
+    height: 100%;
+    margin: auto;
+    overflow: hidden;
+    width: 100%;
+}
+
+// Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);
+
+.plyr__video-embed,
+.plyr__video-wrapper--fixed-ratio {
+    height: 0;
+    padding-bottom: to-percentage($embed-padding);
+}
+
+.plyr__video-embed iframe,
+.plyr__video-wrapper--fixed-ratio video {
+    border: 0;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+    $height: 240;
+    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+    // Only used for Vimeo
+    > .plyr__video-embed__container {
+        padding-bottom: to-percentage($height);
+        position: relative;
+        transform: translateY(-$offset);
+    }
+}
+
+// Controls container
+.plyr--video .plyr__controls {
+    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+    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);
+    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;
+    }
+}
+
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(100%);
+}
+
+// Control elements
+.plyr--video .plyr__control {
+    // Hover and tab focus
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: $plyr-video-control-bg-hover;
+        color: $plyr-video-control-color-hover;
+    }
+}
+
+// Large play button (video only)
+.plyr__control--overlaid {
+    background: rgba($plyr-video-control-bg-hover, 0.8);
+    border: 0;
+    border-radius: 100%;
+    color: $plyr-video-control-color;
+    display: none;
+    left: 50%;
+    padding: ceil($plyr-control-spacing * 1.5);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    // Offset icon to make the play button look right
+    svg {
+        left: 2px;
+        position: relative;
+    }
+
+    &:hover,
+    &:focus {
+        background: $plyr-video-control-bg-hover;
+    }
+}
+
+.plyr--playing .plyr__control--overlaid {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.plyr--full-ui.plyr--video .plyr__control--overlaid {
+    display: block;
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-ms-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active();
+        }
+    }
+}
+
+.plyr--video .plyr__time {
+    text-shadow: 0 1px 1px rgba(#000, 0.15);
+}