Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c99f20d5d8 | |||
| 5b968c97f4 | |||
| d538cdcdf6 | |||
| cad142fe85 | |||
| b18ed03384 | |||
| 6a0b3dc823 | |||
| 402c45ee2b | |||
| 67f19166ac | |||
| 32b7b6b886 | |||
| 96df8fbc85 | |||
| e742527e65 | |||
| 7d0311fd64 |
@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## v1.5.11
|
||||
- iOS embed bug fixes (fixes #166)
|
||||
- Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)
|
||||
- SASS bug fix for default values (fixes #158)
|
||||
|
||||
## v1.5.9 + v1.5.10
|
||||
- NPM bug fixes
|
||||
|
||||
## v1.5.8
|
||||
- Fix for touch device seek tooltip
|
||||
- Seek improvements
|
||||
|
||||
@ -56,7 +56,7 @@ var controls = ["<div class='plyr__controls'>",
|
||||
"<progress class='plyr__progress--buffer' max='100' value='0'>",
|
||||
"<span>0</span>% buffered",
|
||||
"</progress>",
|
||||
"<span class='plyr__tooltip'>--:--</span>",
|
||||
"<span class='plyr__tooltip'>00:00</span>",
|
||||
"</div>",
|
||||
"<span class='plyr__controls--left'>",
|
||||
"<button type='button' data-plyr='restart'>",
|
||||
@ -85,7 +85,7 @@ var controls = ["<div class='plyr__controls'>",
|
||||
"</span>",
|
||||
"<span class='plyr__time'>",
|
||||
"<span class='plyr__sr-only'>Duration</span>",
|
||||
"<span class='plyr__duration'>--:--</span>",
|
||||
"<span class='plyr__duration'>00:00</span>",
|
||||
"</span>",
|
||||
"</span>",
|
||||
"<span class='plyr__controls--right'>",
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.js
vendored
2
docs/dist/docs.js
vendored
@ -1 +1 @@
|
||||
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,n=arguments.length;for(i=0;n>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",n=e.Element[i],s=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0},duration:100}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(t in n&&(o||t!=s)&&(s.length||t!=n.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),s!==n.video&&t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;s>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],n=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,n=i.length;n>s;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,n=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),n=!0);while(++i<s);n&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,n=i.length,o=!1;do for(e=i[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++s<n);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},n.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{n.defineProperty(s,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,n.defineProperty(s,t,p))}}else n[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,o){if(t in s&&(o||t!=n)&&(n.length||t!=s.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case s.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt","default":!0}]});break;case s.audio:r.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case s.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case s.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}n=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),s={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!n.length;a&&(n=s.video),n in s&&history.replaceState({type:n},"",a?"":"#"+n),n!==s.video&&t(n,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,n,o,r){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=s,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
@ -58,7 +58,7 @@
|
||||
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
|
||||
|
||||
<!-- Text track file -->
|
||||
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt" default>
|
||||
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
|
||||
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
||||
|
||||
@ -13,8 +13,7 @@ plyr.setup('.js-media-player', {
|
||||
},
|
||||
captions: {
|
||||
defaultActive: true
|
||||
},
|
||||
duration: 100
|
||||
}
|
||||
});
|
||||
|
||||
// Setup shr
|
||||
|
||||
20
npm-debug.log
Normal file
20
npm-debug.log
Normal file
@ -0,0 +1,20 @@
|
||||
0 info it worked if it ends with ok
|
||||
1 verbose cli [ '/usr/local/Cellar/node/5.0.0/bin/node',
|
||||
1 verbose cli '/usr/local/bin/npm',
|
||||
1 verbose cli 'version',
|
||||
1 verbose cli '1.5.12' ]
|
||||
2 info using npm@3.3.9
|
||||
3 info using node@v5.0.0
|
||||
4 verbose stack Error: Version not changed
|
||||
4 verbose stack at /usr/local/lib/node_modules/npm/lib/version.js:52:49
|
||||
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:76:16
|
||||
4 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)
|
||||
5 verbose cwd /usr/local/var/www/dev/plyr
|
||||
6 error Darwin 14.5.0
|
||||
7 error argv "/usr/local/Cellar/node/5.0.0/bin/node" "/usr/local/bin/npm" "version" "1.5.12"
|
||||
8 error node v5.0.0
|
||||
9 error npm v3.3.9
|
||||
10 error Version not changed
|
||||
11 error If you need help, you may report this error at:
|
||||
11 error <https://github.com/npm/npm/issues>
|
||||
12 verbose exit [ 1, true ]
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.5.11",
|
||||
"version": "1.5.13",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
|
||||
43
readme.md
43
readme.md
@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
||||
|
||||
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.5.10/plyr.js` to `https://cdn.plyr.io/1.5.10/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.5.13/plyr.js` to `https://cdn.plyr.io/1.5.13/plyr.js`
|
||||
|
||||
### Node Package Manager (NPM)
|
||||
Using NPM, you can grab Plyr:
|
||||
@ -69,11 +69,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.5.10/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.5.10/plyr.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.5.13/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.5.13/plyr.js"></script>
|
||||
```
|
||||
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.10/sprite.svg`.
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.13/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.sass` file included in `/src` in your build to save a request.
|
||||
@ -170,7 +170,7 @@ More info on CORS here:
|
||||
Here's an example of a default setup:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/1.5.10/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/1.5.13/plyr.js"></script>
|
||||
<script>plyr.setup();</script>
|
||||
```
|
||||
|
||||
@ -198,9 +198,14 @@ Passing just the options object:
|
||||
plyr.setup(options);
|
||||
```
|
||||
|
||||
### Captions
|
||||
WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element.
|
||||
|
||||
Be sure to [validate your caption files](https://quuz.org/webvtt/)
|
||||
|
||||
#### Options
|
||||
|
||||
Options must be passed as an object to the `setup()` method as above.
|
||||
Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements (e.g. data-plyr='{ title: "testing" }') - note the single quotes encapsulating the JSON.
|
||||
|
||||
<table class="table" width="100%">
|
||||
<thead>
|
||||
@ -282,7 +287,13 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
<strong>seek</strong>: Display a seek tooltip to indicate on click where the media would seek to.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td><code>duration</code></td>
|
||||
<td>Number</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Specify a custom duration.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>displayDuration</code></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>true</code></td>
|
||||
@ -475,15 +486,15 @@ Here's a list of the methods supported:
|
||||
<br><br>
|
||||
<strong>array</strong><br>
|
||||
<pre><code>.source([
|
||||
{
|
||||
src: "/path/to/video.webm",
|
||||
type: "video/webm",
|
||||
...more attributes...
|
||||
},
|
||||
{
|
||||
src: "/path/to/video.mp4",
|
||||
type: "video/mp4",
|
||||
...more attributes...
|
||||
{
|
||||
src: "/path/to/video.webm",
|
||||
type: "video/webm",
|
||||
...more attributes...
|
||||
},
|
||||
{
|
||||
src: "/path/to/video.mp4",
|
||||
type: "video/mp4",
|
||||
...more attributes...
|
||||
}
|
||||
])`</code></pre><br>
|
||||
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
|
||||
|
||||
885
src/js/plyr.js
885
src/js/plyr.js
File diff suppressed because it is too large
Load Diff
@ -7,57 +7,58 @@
|
||||
// -------------------------------
|
||||
|
||||
// Colors
|
||||
@plyr-blue: #3498DB;
|
||||
@plyr-gray-dark: #343F4A;
|
||||
@plyr-gray: #565D64;
|
||||
@plyr-gray-light: #6B7D86;
|
||||
@plyr-gray-lighter: #CBD0D3;
|
||||
@plyr-off-white: #D6DADD;
|
||||
@plyr-blue: #3498DB;
|
||||
@plyr-gray-dark: #343F4A;
|
||||
@plyr-gray: #565D64;
|
||||
@plyr-gray-light: #6B7D86;
|
||||
@plyr-gray-lighter: #CBD0D3;
|
||||
@plyr-off-white: #D6DADD;
|
||||
|
||||
// Font sizes
|
||||
@plyr-font-size-small: 14px;
|
||||
@plyr-font-size-base: 16px;
|
||||
@plyr-font-size-small: 14px;
|
||||
@plyr-font-size-base: 16px;
|
||||
|
||||
// Captions
|
||||
@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
|
||||
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
|
||||
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
|
||||
@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
|
||||
@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-spacing: 10px;
|
||||
@plyr-controls-bg: #fff;
|
||||
@plyr-control-bg-hover: @plyr-blue;
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-controls-bg: #fff;
|
||||
@plyr-control-bg-hover: @plyr-blue;
|
||||
.contrast-control-color(@plyr-controls-bg);
|
||||
.contrast-control-color-hover(@plyr-control-bg-hover);
|
||||
|
||||
// Tooltips
|
||||
@plyr-tooltip-bg: @plyr-controls-bg;
|
||||
@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 5%), 10%);
|
||||
@plyr-tooltip-border-width: 1px;
|
||||
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
|
||||
@plyr-tooltip-color: @plyr-control-color;
|
||||
@plyr-tooltip-padding: @plyr-control-spacing;
|
||||
@plyr-tooltip-arrow-size: 6px;
|
||||
@plyr-tooltip-radius: 3px;
|
||||
@plyr-tooltip-bg: @plyr-controls-bg;
|
||||
@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 75%), 10%);
|
||||
@plyr-tooltip-arrow-border-color: fade(darken(@plyr-controls-bg, 75%), 20%);
|
||||
@plyr-tooltip-border-width: 1px;
|
||||
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
|
||||
@plyr-tooltip-color: @plyr-control-color;
|
||||
@plyr-tooltip-padding: @plyr-control-spacing;
|
||||
@plyr-tooltip-arrow-size: 6px;
|
||||
@plyr-tooltip-radius: 3px;
|
||||
|
||||
// Progress
|
||||
@plyr-progress-bg: fade(@plyr-gray, 20%);
|
||||
@plyr-progress-playing-bg: @plyr-blue;
|
||||
@plyr-progress-buffered-bg: fade(@plyr-gray, 25%);
|
||||
@plyr-progress-loading-size: 40px;
|
||||
@plyr-progress-loading-bg: fade(#000, 15%);
|
||||
@plyr-progress-bg: fade(@plyr-gray, 20%);
|
||||
@plyr-progress-playing-bg: @plyr-blue;
|
||||
@plyr-progress-buffered-bg: fade(@plyr-gray, 25%);
|
||||
@plyr-progress-loading-size: 40px;
|
||||
@plyr-progress-loading-bg: fade(#000, 15%);
|
||||
|
||||
// Volume
|
||||
@plyr-volume-track-height: 6px;
|
||||
@plyr-volume-track-bg: darken(@plyr-controls-bg, 10%);
|
||||
@plyr-volume-thumb-height: (@plyr-volume-track-height * 2);
|
||||
@plyr-volume-thumb-width: (@plyr-volume-track-height * 2);
|
||||
@plyr-volume-thumb-bg: @plyr-control-color;
|
||||
@plyr-volume-thumb-bg-focus: @plyr-control-bg-hover;
|
||||
@plyr-volume-track-height: 6px;
|
||||
@plyr-volume-track-bg: darken(@plyr-controls-bg, 10%);
|
||||
@plyr-volume-thumb-height: (@plyr-volume-track-height * 2);
|
||||
@plyr-volume-thumb-width: (@plyr-volume-track-height * 2);
|
||||
@plyr-volume-thumb-bg: @plyr-control-color;
|
||||
@plyr-volume-thumb-bg-focus: @plyr-control-bg-hover;
|
||||
|
||||
// Breakpoints
|
||||
@plyr-bp-control-split: 560px; // When controls split into left/right
|
||||
@plyr-bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
@plyr-bp-control-split: 560px; // When controls split into left/right
|
||||
@plyr-bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
|
||||
// Animation
|
||||
// ---------------------------------------
|
||||
@ -166,6 +167,11 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Hide default captions
|
||||
video::-webkit-media-text-track-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Container for embeds
|
||||
&__video-embed {
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
@ -366,7 +372,7 @@
|
||||
@plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
|
||||
bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
|
||||
border-right: @plyr-border-arrow-size solid transparent;
|
||||
border-top: @plyr-border-arrow-size solid @plyr-tooltip-border-color;
|
||||
border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
|
||||
border-left: @plyr-border-arrow-size solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -7,69 +7,71 @@
|
||||
// -------------------------------
|
||||
|
||||
// Colors
|
||||
$plyr-blue: #3498DB !default;
|
||||
$plyr-gray-dark: #343F4A !default;
|
||||
$plyr-gray: #565D64 !default;
|
||||
$plyr-gray-light: #6B7D86 !default;
|
||||
$plyr-gray-lighter: #CBD0D3 !default;
|
||||
$plyr-off-white: #D6DADD !default;
|
||||
$plyr-blue: #3498DB !default;
|
||||
$plyr-gray-dark: #343F4A !default;
|
||||
$plyr-gray: #565D64 !default;
|
||||
$plyr-gray-light: #6B7D86 !default;
|
||||
$plyr-gray-lighter: #CBD0D3 !default;
|
||||
$plyr-off-white: #D6DADD !default;
|
||||
|
||||
// Font sizes
|
||||
$plyr-font-size-small: 14px !default;
|
||||
$plyr-font-size-base: 16px !default;
|
||||
$plyr-font-size-small: 14px !default;
|
||||
$plyr-font-size-base: 16px !default;
|
||||
|
||||
// Captions
|
||||
$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !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;
|
||||
$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !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-spacing: 10px !default;
|
||||
$plyr-controls-bg: #fff !default;
|
||||
$plyr-control-bg-hover: $plyr-blue !default;
|
||||
$plyr-control-spacing: 10px !default;
|
||||
$plyr-controls-bg: #fff !default;
|
||||
$plyr-control-bg-hover: $plyr-blue !default;
|
||||
|
||||
// Contrast
|
||||
@if lightness($plyr-controls-bg) >= 65% {
|
||||
$plyr-control-color: $plyr-gray-light !default;
|
||||
$plyr-control-color: $plyr-gray-light !default;
|
||||
}
|
||||
@else {
|
||||
$plyr-control-color: $plyr-gray-lighter !default;
|
||||
$plyr-control-color: $plyr-gray-lighter !default;
|
||||
}
|
||||
@if lightness($plyr-control-bg-hover) >= 65% {
|
||||
$plyr-control-color-hover: $plyr-gray !default;
|
||||
$plyr-control-color-hover: $plyr-gray !default;
|
||||
}
|
||||
@else {
|
||||
$plyr-control-color-hover: #fff !default;
|
||||
$plyr-control-color-hover: #fff !default;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
$plyr-tooltip-bg: $plyr-controls-bg !default;
|
||||
$plyr-tooltip-border-color: transparentize($plyr-gray-dark, .1) !default;
|
||||
$plyr-tooltip-border-width: 1px;
|
||||
$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
|
||||
$plyr-tooltip-color: $plyr-control-color !default;
|
||||
$plyr-tooltip-padding: $plyr-control-spacing !default;
|
||||
$plyr-tooltip-arrow-size: 6px !default;
|
||||
$plyr-tooltip-radius: 3px !default;
|
||||
$plyr-tooltip-bg: $plyr-controls-bg !default;
|
||||
$plyr-tooltip-border-color: transparentize(darken($plyr-controls-bg, 75%), .1) !default;
|
||||
$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-controls-bg, 75%), .2) !default;
|
||||
|
||||
$plyr-tooltip-border-width: 1px;
|
||||
$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
|
||||
$plyr-tooltip-color: $plyr-control-color !default;
|
||||
$plyr-tooltip-padding: $plyr-control-spacing !default;
|
||||
$plyr-tooltip-arrow-size: 6px !default;
|
||||
$plyr-tooltip-radius: 3px !default;
|
||||
|
||||
// Progress
|
||||
$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
|
||||
$plyr-progress-playing-bg: $plyr-blue !default;
|
||||
$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
|
||||
$plyr-progress-loading-size: 40px !default;
|
||||
$plyr-progress-loading-bg: transparentize(#000, .15) !default;
|
||||
$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
|
||||
$plyr-progress-playing-bg: $plyr-blue !default;
|
||||
$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
|
||||
$plyr-progress-loading-size: 40px !default;
|
||||
$plyr-progress-loading-bg: transparentize(#000, .15) !default;
|
||||
|
||||
// Volume
|
||||
$plyr-volume-track-height: 6px !default;
|
||||
$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default;
|
||||
$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-bg: $plyr-control-color !default;
|
||||
$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;
|
||||
$plyr-volume-track-height: 6px !default;
|
||||
$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default;
|
||||
$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-bg: $plyr-control-color !default;
|
||||
$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;
|
||||
|
||||
// Breakpoints
|
||||
$plyr-bp-control-split: 560px !default; // When controls split into left/right
|
||||
$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size
|
||||
$plyr-bp-control-split: 560px !default; // When controls split into left/right
|
||||
$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size
|
||||
|
||||
// Animation
|
||||
// ---------------------------------------
|
||||
@ -165,6 +167,11 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Hide default captions
|
||||
video::-webkit-media-text-track-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// For embeds
|
||||
&__video-embed {
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
@ -365,7 +372,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
|
||||
$plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
|
||||
bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
|
||||
border-right: $plyr-border-arrow-size solid transparent;
|
||||
border-top: $plyr-border-arrow-size solid $plyr-tooltip-border-color;
|
||||
border-top: $plyr-border-arrow-size solid $plyr-tooltip-arrow-border-color;
|
||||
border-left: $plyr-border-arrow-size solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user