aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/config/defaults.js5
-rw-r--r--src/js/controls.js11
-rw-r--r--src/js/html5.js6
-rw-r--r--src/js/media.js2
-rw-r--r--src/js/plugins/preview-thumbnails.js24
-rw-r--r--src/js/plugins/vimeo.js32
-rw-r--r--src/js/plugins/youtube.js4
-rw-r--r--src/js/source.js18
-rw-r--r--src/js/utils/arrays.js8
-rw-r--r--src/sass/base.scss1
-rw-r--r--src/sass/components/audio.scss7
-rw-r--r--src/sass/components/control.scss56
-rw-r--r--src/sass/components/controls.scss34
-rw-r--r--src/sass/components/menus.scss6
-rw-r--r--src/sass/components/sliders.scss72
-rw-r--r--src/sass/components/times.scss4
-rw-r--r--src/sass/components/video.scss51
-rw-r--r--src/sass/plyr.scss5
-rw-r--r--src/sass/settings/menus.scss2
-rw-r--r--src/sass/types/audio.scss56
-rw-r--r--src/sass/types/video.scss157
21 files changed, 294 insertions, 267 deletions
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index bf0f8c42..be289e6a 100644
--- a/src/js/config/defaults.js
+++ b/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
diff --git a/src/js/controls.js b/src/js/controls.js
index 1cce51f6..66ec7139 100644
--- a/src/js/controls.js
+++ b/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
- // Vimeo and YouTube limit to 0.5x-2x
- 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;
- }
+ // Filter out invalid speeds
+ this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);
// Toggle the pane and tab
const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
diff --git a/src/js/html5.js b/src/js/html5.js
index d1e82489..0591a709 100644
--- a/src/js/html5.js
+++ b/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;
diff --git a/src/js/media.js b/src/js/media.js
index cd1533d0..8c08456d 100644
--- a/src/js/media.js
+++ b/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) {
diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js
index 6cd09ef2..86eeebc8 100644
--- a/src/js/plugins/preview-thumbnails.js
+++ b/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();
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 9529f2cd..fa965d8e 100644
--- a/src/js/plugins/vimeo.js
+++ b/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,12 +201,10 @@ const vimeo = {
return speed;
},
set(input) {
- player.embed
- .setPlaybackRate(input)
- .then(() => {
- speed = input;
- triggerEvent.call(player, player.media, 'ratechange');
- });
+ player.embed.setPlaybackRate(input).then(() => {
+ speed = input;
+ triggerEvent.call(player, player.media, 'ratechange');
+ });
},
});
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index ba5d8de9..8c65b1dc 100644
--- a/src/js/plugins/youtube.js
+++ b/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) {
diff --git a/src/js/source.js b/src/js/source.js
index 0173cc9e..cb806746 100644
--- a/src/js/source.js
+++ b/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
- if (this.previewThumbnails) {
- this.previewThumbnails.load();
+ // Update previewThumbnails config & reload plugin
+ if (!is.empty(input.previewThumbnails)) {
+ 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
diff --git a/src/js/utils/arrays.js b/src/js/utils/arrays.js
index c0d69626..69ef242c 100644
--- a/src/js/utils/arrays.js
+++ b/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);
-}
diff --git a/src/sass/base.scss b/src/sass/base.scss
index 811c762d..05e77bb1 100644
--- a/src/sass/base.scss
+++ b/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;
diff --git a/src/sass/components/audio.scss b/src/sass/components/audio.scss
deleted file mode 100644
index 285d34f9..00000000
--- a/src/sass/components/audio.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// --------------------------------------------------------------
-// Audio styles
-// --------------------------------------------------------------
-
-.plyr--audio {
- display: block;
-}
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 0022d17b..64390dbd 100644
--- a/src/sass/components/control.scss
+++ b/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;
-}
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index cc07ef7f..50333701 100644
--- a/src/sass/components/controls.scss
+++ b/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'],
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index b8c85284..be354e46 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -39,8 +39,7 @@
> div {
overflow: hidden;
- transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
- width 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);
}
// Arrow
@@ -74,8 +73,7 @@
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: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
user-select: none;
width: 100%;
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index ee64271b..7b519fc6 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -19,11 +19,7 @@
&::-webkit-slider-runnable-track {
@include plyr-range-track();
- background-image: linear-gradient(
- to right,
- currentColor var(--value, 0%),
- transparent var(--value, 0%)
- );
+ background-image: linear-gradient(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
- );
- }
- }
-}
diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss
index 240d3528..7d7a50f1 100644
--- a/src/sass/components/times.scss
+++ b/src/sass/components/times.scss
@@ -18,7 +18,3 @@
display: none;
}
}
-
-.plyr--video .plyr__time {
- text-shadow: 0 1px 1px rgba(#000, 0.15);
-}
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
deleted file mode 100644
index e5f6fe87..00000000
--- a/src/sass/components/video.scss
+++ /dev/null
@@ -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);
- }
-}
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 445ca1ea..cb8a3921 100644
--- a/src/sass/plyr.scss
+++ b/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';
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 420ebb03..5e232d19 100644
--- a/src/sass/settings/menus.scss
+++ b/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;
diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss
new file mode 100644
index 00000000..5d779a61
--- /dev/null
+++ b/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);
+ }
+ }
+}
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
new file mode 100644
index 00000000..cf3ee9c8
--- /dev/null
+++ b/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);
+}