Compare commits
3 Commits
Author | SHA1 | Date | |
---|---|---|---|
351e1540c5 | |||
b3299b4641 | |||
be2e7d4c99 |
@ -1,5 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
# v1.6.16
|
||||
- Always hide standard controls (Fixes #225)
|
||||
- Fix for Tooltips overflowing (fixes #230)
|
||||
|
||||
## v1.6.15
|
||||
- Restore scroll position when exiting full screen (fixes #236)
|
||||
|
||||
|
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.6.15",
|
||||
"version": "1.6.16",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
|
10
readme.md
10
readme.md
@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
||||
## Implementation
|
||||
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
||||
|
||||
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.15/plyr.js` to `https://cdn.plyr.io/1.6.15/plyr.js`
|
||||
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.16/plyr.js` to `https://cdn.plyr.io/1.6.16/plyr.js`
|
||||
|
||||
### npm
|
||||
|
||||
@ -71,11 +71,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
|
||||
If you want to use our CDN, you can use the following:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.15/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.6.15/plyr.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.16/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.6.16/plyr.js"></script>
|
||||
```
|
||||
|
||||
The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.15/plyr.svg`.
|
||||
The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.16/plyr.svg`.
|
||||
|
||||
### CSS & Styling
|
||||
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.scss` file included in `/src` in your build to save a request.
|
||||
@ -163,7 +163,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
|
||||
Here's an example of a default setup:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/1.6.15/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/1.6.16/plyr.js"></script>
|
||||
<script>plyr.setup();</script>
|
||||
```
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.6.15
|
||||
// plyr.js v1.6.16
|
||||
// https://github.com/selz/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -44,7 +44,7 @@
|
||||
displayDuration: true,
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/1.6.15/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/1.6.16/plyr.svg',
|
||||
clickToPlay: true,
|
||||
hideControls: true,
|
||||
showPosterOnEnd: false,
|
||||
|
@ -246,6 +246,11 @@
|
||||
|
||||
// Controls
|
||||
// --------------------------------------------------------------
|
||||
// Hide native controls
|
||||
.plyr ::-webkit-media-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Playback controls
|
||||
.plyr__controls {
|
||||
display: flex;
|
||||
@ -280,7 +285,7 @@
|
||||
flex-shrink: 0;
|
||||
overflow: visible; // IE11
|
||||
vertical-align: middle;
|
||||
padding: (@plyr-control-spacing * .7);
|
||||
padding: @plyr-control-padding;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
@ -289,8 +294,8 @@
|
||||
color: inherit;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: @plyr-control-icon-size;
|
||||
height: @plyr-control-icon-size;
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
}
|
||||
@ -480,6 +485,40 @@
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// First tooltip
|
||||
.plyr__controls button:first-child .plyr__tooltip {
|
||||
left: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform-origin: 0 100%;
|
||||
|
||||
&::before {
|
||||
left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// Last tooltip
|
||||
.plyr__controls button:last-child .plyr__tooltip {
|
||||
right: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform-origin: 100% 100%;
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__controls button:first-child,
|
||||
.plyr__controls button:last-child {
|
||||
&:hover .plyr__tooltip,
|
||||
&.tab-focus:focus .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Playback progress
|
||||
// --------------------------------------------------------------
|
||||
// <progress> element
|
||||
|
@ -16,14 +16,16 @@
|
||||
@plyr-font-size-base: 16px;
|
||||
|
||||
// Captions
|
||||
@plyr-captions-bg: fade(#000, 70%);
|
||||
@plyr-captions-color: #fff;
|
||||
@plyr-captions-bg: fade(#000, 70%);
|
||||
@plyr-captions-color: #fff;
|
||||
@plyr-font-size-captions-base: @plyr-font-size-base;
|
||||
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
|
||||
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
|
||||
|
||||
// Controls
|
||||
@plyr-control-icon-size: 18px;
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-control-padding: (@plyr-control-spacing * .7);
|
||||
@plyr-video-controls-bg: #000;
|
||||
@plyr-video-control-color: #fff;
|
||||
@plyr-video-control-color-hover: #fff;
|
||||
@ -37,7 +39,7 @@
|
||||
|
||||
// Tooltips
|
||||
@plyr-tooltip-bg: fade(#000, 70%);
|
||||
@plyr-tooltip-color: #fff;
|
||||
@plyr-tooltip-color: #fff;
|
||||
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
|
||||
@plyr-tooltip-arrow-size: 4px;
|
||||
@plyr-tooltip-radius: 3px;
|
||||
@ -62,7 +64,7 @@
|
||||
@plyr-range-thumb-active-scale: 1.25;
|
||||
@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
|
||||
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
|
||||
@plyr-range-selected-bg: @plyr-color-main;
|
||||
@plyr-range-selected-bg: @plyr-color-main;
|
||||
|
||||
// Breakpoints
|
||||
@plyr-bp-screen-sm: 480px;
|
||||
|
@ -245,6 +245,11 @@
|
||||
|
||||
// Controls
|
||||
// --------------------------------------------------------------
|
||||
// Hide native controls
|
||||
.plyr ::-webkit-media-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Playback controls
|
||||
.plyr__controls {
|
||||
display: flex;
|
||||
@ -479,6 +484,40 @@
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// First tooltip
|
||||
.plyr__controls button:first-child .plyr__tooltip {
|
||||
$tooltip-arrow-offset: ;
|
||||
left: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform-origin: 0 100%;
|
||||
|
||||
&::before {
|
||||
left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// Last tooltip
|
||||
.plyr__controls button:last-child .plyr__tooltip {
|
||||
right: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform-origin: 100% 100%;
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__controls button:first-child,
|
||||
.plyr__controls button:last-child {
|
||||
&:hover .plyr__tooltip,
|
||||
&.tab-focus:focus .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Playback progress
|
||||
// --------------------------------------------------------------
|
||||
// <progress> element
|
||||
|
@ -17,14 +17,16 @@ $plyr-font-size-small: 14px !default;
|
||||
$plyr-font-size-base: 16px !default;
|
||||
|
||||
// Captions
|
||||
$plyr-captions-bg: transparentize(#000, .3) !default;
|
||||
$plyr-captions-color: #fff !default;
|
||||
$plyr-captions-bg: transparentize(#000, .3) !default;
|
||||
$plyr-captions-color: #fff !default;
|
||||
$plyr-font-size-captions-base: $plyr-font-size-base !default;
|
||||
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
|
||||
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
|
||||
|
||||
// Controls
|
||||
$plyr-control-icon-size: 18px !default;
|
||||
$plyr-control-spacing: 10px !default;
|
||||
$plyr-control-padding: ($plyr-control-spacing * .7) !default;
|
||||
$plyr-video-controls-bg: #000 !default;
|
||||
$plyr-video-control-color: #fff !default;
|
||||
$plyr-video-control-color-hover: #fff !default;
|
||||
@ -63,7 +65,7 @@ $plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default;
|
||||
$plyr-range-thumb-active-scale: 1.25 !default;
|
||||
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
|
||||
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
|
||||
$plyr-range-selected-bg: $plyr-color-main !default;
|
||||
$plyr-range-selected-bg: $plyr-color-main !default;
|
||||
|
||||
// Breakpoints
|
||||
$plyr-bp-screen-sm: 480px !default;
|
||||
|
Reference in New Issue
Block a user