Merge branch 'master' into develop
# Conflicts: # dist/plyr.css # src/less/plyr.less
This commit is contained in:
Sam
commit
4a69ef3874
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.6.4",
|
||||
"version": "1.6.5",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
|
||||
12
readme.md
12
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.4/plyr.js` to `https://cdn.plyr.io/1.6.4/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.5/plyr.js` to `https://cdn.plyr.io/1.6.5/plyr.js`
|
||||
|
||||
### Node Package Manager (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.4/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.6.4/plyr.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.5/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
|
||||
```
|
||||
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.4/sprite.svg`.
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.5/sprite.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.
|
||||
@ -113,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
|
||||
c.innerHTML = a.responseText;
|
||||
b.insertBefore(c, b.childNodes[0]);
|
||||
};
|
||||
})(document, 'https://cdn.plyr.io/1.6.4/sprite.svg');
|
||||
})(document, 'https://cdn.plyr.io/1.6.5/sprite.svg');
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -188,7 +188,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.4/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
|
||||
<script>plyr.setup();</script>
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.6.4
|
||||
// plyr.js v1.6.5
|
||||
// https://github.com/selz/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
@ -8,18 +8,22 @@
|
||||
min-width: 200px;
|
||||
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
|
||||
// border-box everything
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
&,
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
& when (@plyr-border-box = true) {
|
||||
// border-box everything
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
&,
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix 300ms delay
|
||||
a, button, input, label {
|
||||
touch-action: manipulation;
|
||||
& when (@plyr-touch-action = true) {
|
||||
// Fix 300ms delay
|
||||
a, button, input, label {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
|
||||
// Media elements
|
||||
|
||||
@ -4,11 +4,22 @@
|
||||
|
||||
// Screen reader only elements
|
||||
.plyr__sr-only {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
|
||||
// !important is not always needed
|
||||
& when (@plyr-sr-only-important = true) {
|
||||
position: absolute !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
& when (@plyr-sr-only-important = false) {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,11 @@
|
||||
// Variables
|
||||
// ==========================================================================
|
||||
|
||||
// Settings
|
||||
@plyr-border-box: true;
|
||||
@plyr-touch-action: true;
|
||||
@plyr-sr-only-important: true;
|
||||
|
||||
// Colors
|
||||
@plyr-color-main: #3498db;
|
||||
|
||||
|
||||
@ -21,18 +21,22 @@
|
||||
min-width: 200px;
|
||||
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
|
||||
// border-box everything
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
&,
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
@if $plyr-border-box == true {
|
||||
// border-box everything
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
&,
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix 300ms delay
|
||||
a, button, input, label {
|
||||
@if $plyr-touch-action == true {
|
||||
// Fix 300ms delay
|
||||
a, button, input, label {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
|
||||
// Media elements
|
||||
@ -138,13 +142,23 @@
|
||||
|
||||
// Screen reader only elements
|
||||
.plyr__sr-only {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
|
||||
// !important is not always needed
|
||||
@if $plyr-sr-only-important == true {
|
||||
position: absolute !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
} @else {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Video
|
||||
@ -629,6 +643,7 @@
|
||||
// --------------------------------------------------------------
|
||||
.plyr .plyr__volume {
|
||||
display: none;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
input[type="range"] {
|
||||
|
||||
@ -4,6 +4,11 @@
|
||||
// https://robots.thoughtbot.com/sass-default
|
||||
// ==========================================================================
|
||||
|
||||
// Settings
|
||||
$plyr-border-box: true !default;
|
||||
$plyr-touch-action: true !default;
|
||||
$plyr-sr-only-important: true !default;
|
||||
|
||||
// Colors
|
||||
$plyr-color-main: #3498db !default;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user