ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1684 from sampotts/develop

Browse Source 
v3.5.8
This commit is contained in:
Sam Potts 2020-02-10 18:35:42 +00:00 committed by GitHub
commit 841746210a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 328 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
changelog.md
View File

@ -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...)

3
demo/index.html
View File

@ -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>

4
demo/package.json
View File

@ -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"
}
}

4
demo/src/js/demo.js
View File

@ -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

2
demo/src/js/sources.js
View File

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

2
package.json
View File

@ -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>",

18
readme.md
View File

@ -445,6 +445,9 @@ player.source = {
},
],
poster: '/path/to/poster.jpg',
previewThumbnails: {
src: '/path/to/thumbnails.vtt'
},
tracks: [
{
kind: 'captions',
@ -514,13 +517,14 @@ 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`&sup1; | 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. |
| 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`&sup1; | 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

5
src/js/config/defaults.js
View File

@ -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

11
src/js/controls.js vendored
View File

@ -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;

6
src/js/html5.js
View File

@ -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;

2
src/js/media.js
View File

@ -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) {

24
src/js/plugins/preview-thumbnails.js
View File

@ -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();

32
src/js/plugins/vimeo.js
View File

@ -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');
});
},
});

4
src/js/plugins/youtube.js
View File

@ -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) {

18
src/js/source.js
View File

@ -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

8
src/js/utils/arrays.js
View File

@ -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);
}

1
src/sass/base.scss
View File

@ -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;

7
src/sass/components/audio.scss
View File

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

56
src/sass/components/control.scss
View File

@ -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;
}

34
src/sass/components/controls.scss
View File

@ -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'],

6
src/sass/components/menus.scss
View File

@ -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%;

72
src/sass/components/sliders.scss
View File

@ -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
);
}
}
}

4
src/sass/components/times.scss
View File

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

51
src/sass/components/video.scss
View File

@ -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);
}
}

5
src/sass/plyr.scss
View File

@ -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';

2
src/sass/settings/menus.scss
View File

@ -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;

56
src/sass/types/audio.scss Normal file
View File

@ -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);
}
}
}

157
src/sass/types/video.scss Normal file
View File

@ -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);
}