Work on v1.5
See changelog.md
This commit is contained in:
Sam Potts
2
docs/dist/docs.css
vendored
2
docs/dist/docs.css
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 t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var n,s=arguments.length;for(n=0;s>n;n++)t=arguments[n],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:n.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",n="prototype",s=t.Element[n],i=Object,o=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[n].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1},c=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},a=function(t,e){if(""===e)throw new c("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new c("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(t,e)},l=function(t){for(var e=o.call(t.getAttribute("class")||""),n=e?e.split(/\s+/):[],s=0,i=n.length;i>s;s++)this.push(n[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[n]=[],p=function(){return new l(this)};if(c[n]=Error[n],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",-1!==a(this,t)},u.add=function(){var t,e=arguments,n=0,s=e.length,i=!1;do t=e[n]+"",-1===a(this,t)&&(this.push(t),i=!0);while(++n<s);i&&this._updateClassName()},u.remove=function(){var t,e,n=arguments,s=0,i=n.length,o=!1;do for(t=n[s]+"",e=a(this,t);-1!==e;)this.splice(e,1),o=!0,e=a(this,t);while(++s<i);o&&this._updateClassName()},u.toggle=function(t,e){t+="";var n=this.contains(t),s=n?e!==!0&&"remove":e!==!1&&"add";return s&&this[s](t),e===!0||e===!1?e:!n},u.toString=function(){return this.join(" ")},i.defineProperty){var d={get:p,enumerable:!0,configurable:!0};try{i.defineProperty(s,e,d)}catch(m){-2146823252===m.number&&(d.enumerable=!1,i.defineProperty(s,e,d))}}else i[n].__defineGetter__&&s.__defineGetter__(e,p)}}(self)),plyr.setup({debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn-count"}}),function(){function t(){var t=this,n=t.getAttribute("data-source"),s=document.querySelector(".plyr").plyr;switch(n){case"video":s.source({type:"video",title:"Bug Buck Bunny",sources:[{src:"https://cdn.selz.com/plyr/1.0/movie.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.0/movie.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.0/poster.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.0/example_captions_en.vtt","default":!0}]});break;case"audio":s.source({type:"audio",title:"96 by Logistics",sources:[{src:"https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg",type:"audio/ogg"}]});break;case"youtube":s.source({type:"youtube",title:"Enovato interview of Dan Cederholm for Made By",sources:"Au87oAJ2jeE"});break;case"vimeo":s.source({type:"vimeo",title:"View from a blue moon",sources:"143418951"})}for(var i=e.length-1;i>=0;i--)e[i].classList.remove("active");event.target.classList.add("active")}for(var e=document.querySelectorAll("[data-source]"),n=e.length-1;n>=0;n--)e[n].addEventListener("click",t)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,n,s,i,o,r){t.GoogleAnalyticsObject=i,t[i]=t[i]||function(){(t[i].q=t[i].q||[]).push(arguments)},t[i].l=1*new Date,o=e.createElement(n),r=e.getElementsByTagName(n)[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"));
|
||||
"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 n,i=arguments.length;for(n=0;i>n;n++)e=arguments[n],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:n.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",n="prototype",i=e.Element[n],s=Object,o=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[n].indexOf||function(e){for(var t=0,n=this.length;n>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")||""),n=t?t.split(/\s+/):[],i=0,s=n.length;s>i;i++)this.push(n[i]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[n]=[],d=function(){return new l(this)};if(a[n]=Error[n],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,n=0,i=t.length,s=!1;do e=t[n]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++n<i);s&&this._updateClassName()},u.remove=function(){var e,t,n=arguments,i=0,s=n.length,o=!1;do for(e=n[i]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++i<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var n=this.contains(e),i=n?t!==!0&&"remove":t!==!1&&"add";return i&&this[i](e),t===!0||t===!1?t:!n},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(i,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(i,t,p))}}else s[n].__defineGetter__&&i.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(){var e=this,n=e.getAttribute("data-source"),i=document.querySelector(".js-media-player").plyr;switch(n){case"video":i.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.0/example_captions_en.vtt","default":!0}]});break;case"audio":i.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"youtube":i.source({type:"youtube",title:"View From A Blue Moon",sources:"bTqVqk7FSmY"});break;case"vimeo":i.source({type:"vimeo",title:"View From A Blue Moon",sources:"143418951"})}for(var s=t.length-1;s>=0;s--)t[s].classList.remove("btn--active");event.target.classList.add("btn--active")}for(var t=document.querySelectorAll("[data-source]"),n=t.length-1;n>=0;n--)t[n].addEventListener("click",e)}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,n,i,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(n),r=t.getElementsByTagName(n)[0],o.async=1,o.src=i,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
@ -13,20 +13,20 @@
|
||||
<!-- Docs styles -->
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/docs.css">
|
||||
</head>
|
||||
<body>
|
||||
<<body>
|
||||
<header>
|
||||
<h1>Plyr</h1>
|
||||
<p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github">
|
||||
<svg class="icon"><use xlink:href="#shr-github"/></svg>Download on GitHub
|
||||
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn--primary" data-shr-network="github">
|
||||
<svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter" data-shr-network="twitter">
|
||||
<svg class="icon"><use xlink:href="#shr-twitter"/></svg>Tweet
|
||||
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--twitter" data-shr-network="twitter">
|
||||
<svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -34,44 +34,42 @@
|
||||
</header>
|
||||
|
||||
<main role="main" id="main">
|
||||
<nav class="btn-bar nav-panel">
|
||||
<nav class="btn__bar">
|
||||
<ul>
|
||||
<li>
|
||||
<button type="button" class="btn active" data-source="video">Video</button>
|
||||
<button type="button" class="btn btn--active" data-source="video">Video</button>
|
||||
</li>
|
||||
<li>
|
||||
<li>
|
||||
<button type="button" class="btn" data-source="audio">Audio</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
|
||||
<button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
|
||||
<button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo <sup>BETA</sup></button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="plyr">
|
||||
<video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
|
||||
<div class="js-media-player">
|
||||
<video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
|
||||
<!-- Video files -->
|
||||
<source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
|
||||
<source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
|
||||
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
|
||||
<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.0/example_captions_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>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li class="cite cite-video"><small><a href="https://www.bigbuckbunny.org" target="_blank">Big Buck Bunny</a> © Copyright 2008, Blender Foundation</small></li>
|
||||
<li class="cite cite-audio"><small><a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">96 by Logistics</a> © Copyright, Hospital Records</small></li>
|
||||
<li class="cite cite-youtube"><small><a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Envato's "Made By" interview of Dan Cederholm</a> on <span class="color-youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small>
|
||||
<li class="cite cite-vimeo"><small><a href="https://vimeo.com/87701971" target="_blank">Yosemite HD II</a> on <span class="color-vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small>
|
||||
<ul>
|
||||
<li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm</small></li>
|
||||
<li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi</small></li>
|
||||
<li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small>
|
||||
<li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
/*global plyr, shr*/
|
||||
|
||||
// Setup the player
|
||||
plyr.setup({
|
||||
plyr.setup('.js-media-player', {
|
||||
debug: true,
|
||||
title: 'Video demo',
|
||||
tooltips: true,
|
||||
@ -20,7 +20,7 @@ plyr.setup({
|
||||
// Setup shr
|
||||
shr.setup({
|
||||
count: {
|
||||
classname: 'btn-count'
|
||||
classname: 'btn__count'
|
||||
}
|
||||
});
|
||||
|
||||
@ -37,22 +37,22 @@ shr.setup({
|
||||
function newSource() {
|
||||
var trigger = this,
|
||||
type = trigger.getAttribute('data-source'),
|
||||
player = document.querySelector('.plyr').plyr;
|
||||
player = document.querySelector('.js-media-player').plyr;
|
||||
|
||||
switch(type) {
|
||||
case 'video':
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'Bug Buck Bunny',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/movie.mp4',
|
||||
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.0/movie.webm',
|
||||
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.0/poster.jpg',
|
||||
poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
|
||||
tracks: [{
|
||||
kind: 'captions',
|
||||
label: 'English',
|
||||
@ -66,13 +66,13 @@ shr.setup({
|
||||
case 'audio':
|
||||
player.source({
|
||||
type: 'audio',
|
||||
title: '96 by Logistics',
|
||||
title: 'Kishi Bashi – “It All Began With A Burst”',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
|
||||
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.0/logistics-96-sample.ogg',
|
||||
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
|
||||
type: 'audio/ogg'
|
||||
}]
|
||||
});
|
||||
@ -81,25 +81,25 @@ shr.setup({
|
||||
case 'youtube':
|
||||
player.source({
|
||||
type: 'youtube',
|
||||
title: 'Enovato interview of Dan Cederholm for Made By',
|
||||
sources: 'Au87oAJ2jeE'
|
||||
title: 'View From A Blue Moon',
|
||||
sources: 'bTqVqk7FSmY'
|
||||
});
|
||||
break;
|
||||
|
||||
case 'vimeo':
|
||||
player.source({
|
||||
type: 'vimeo',
|
||||
title: 'View from a blue moon',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: '143418951'
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
for (var x = buttons.length - 1; x >= 0; x--) {
|
||||
buttons[x].classList.remove('active');
|
||||
buttons[x].classList.remove('btn--active');
|
||||
}
|
||||
|
||||
event.target.classList.add('active');
|
||||
event.target.classList.add('btn--active');
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ nav {
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.btn-bar {
|
||||
.btn__bar {
|
||||
position: relative;
|
||||
margin: 0 auto @padding-base;
|
||||
max-width: @example-width-video;
|
||||
@ -60,10 +60,8 @@ nav {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
}
|
||||
.active {
|
||||
&:extend(.btn-primary);
|
||||
}
|
||||
.btn.active {
|
||||
.btn--active {
|
||||
&:extend(.btn--primary);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@ -80,7 +78,7 @@ nav {
|
||||
|
||||
// Shared
|
||||
.btn,
|
||||
.btn-count {
|
||||
.btn__count {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: @border-radius-base;
|
||||
@ -91,12 +89,12 @@ nav {
|
||||
// Buttons
|
||||
.btn {
|
||||
padding: (@padding-base / 2) @padding-base;
|
||||
background: @body-background;
|
||||
background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%));
|
||||
border: 1px solid @gray-light;
|
||||
box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, .05);
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
color: @gray;
|
||||
transition: background .3s ease, border .3s ease, color .3s ease;
|
||||
transition: background .1s ease, color .1s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -104,18 +102,18 @@ nav {
|
||||
color: @gray;
|
||||
outline: 0;
|
||||
}
|
||||
&-youtube .icon {
|
||||
&--youtube .icon {
|
||||
color: @color-youtube;
|
||||
}
|
||||
&-vimeo .icon {
|
||||
&--vimeo .icon {
|
||||
color: @color-vimeo;
|
||||
}
|
||||
&-twitter .icon {
|
||||
&--twitter .icon {
|
||||
color: @color-twitter;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
background-image: linear-gradient(@link-color, darken(@link-color, 3%));
|
||||
.btn--primary {
|
||||
background-image: linear-gradient(@link-color, darken(@link-color, 5%));
|
||||
background-color: @link-color;
|
||||
border-color: darken(@link-color, 10%);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, .15);
|
||||
@ -128,13 +126,13 @@ nav {
|
||||
border-color: darken(@link-color, 20%);
|
||||
}
|
||||
}
|
||||
.btn-small {
|
||||
.btn--small {
|
||||
padding-top: ceil(@padding-base / 3);
|
||||
padding-bottom: ceil(@padding-base / 3);
|
||||
}
|
||||
|
||||
// Count bubble
|
||||
.btn-count {
|
||||
.btn__count {
|
||||
position: relative;
|
||||
margin-left: (@padding-base / 2);
|
||||
padding: (@padding-base / 2) (@padding-base * .75);
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
// ==========================================================================
|
||||
|
||||
video,
|
||||
.plyr-video-embed {
|
||||
.plyr__video-embed {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.plyr-video-embed {
|
||||
.plyr__video-embed {
|
||||
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
@ -15,15 +15,15 @@ video,
|
||||
margin: 0 auto @padding-base;
|
||||
max-width: @example-width-video;
|
||||
|
||||
&-controls {
|
||||
&__controls {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
video,
|
||||
.plyr-video-embed {
|
||||
.plyr__video-embed {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
&-fullscreen,
|
||||
&.fullscreen-active {
|
||||
&--fullscreen,
|
||||
&--fullscreen-active {
|
||||
max-width: none;
|
||||
|
||||
.plyr-controls,
|
||||
@ -36,20 +36,20 @@ video,
|
||||
}
|
||||
}
|
||||
}
|
||||
.plyr-audio {
|
||||
.plyr--audio {
|
||||
max-width: @example-width-audio;
|
||||
|
||||
.plyr-controls {
|
||||
.plyr__controls {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.plyr-progress {
|
||||
.plyr__progress {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Style full supported player
|
||||
.cite {
|
||||
.plyr__cite {
|
||||
display: none;
|
||||
|
||||
.icon {
|
||||
@ -57,9 +57,9 @@ video,
|
||||
}
|
||||
}
|
||||
|
||||
.plyr-video ~ ul .cite-video,
|
||||
.plyr-audio ~ ul .cite-audio,
|
||||
.plyr-youtube ~ ul .cite-youtube,
|
||||
.plyr-vimeo ~ ul .cite-vimeo {
|
||||
.plyr--video ~ ul .plyr__cite--video,
|
||||
.plyr--audio ~ ul .plyr__cite--audio,
|
||||
.plyr--youtube ~ ul .plyr__cite--youtube,
|
||||
.plyr--vimeo ~ ul .plyr__cite--vimeo {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Panels
|
||||
// ==========================================================================
|
||||
|
||||
// Panels
|
||||
.panel {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
animation: fade-in .3s ease;
|
||||
}
|
||||
}
|
||||
@ -26,7 +26,13 @@ small {
|
||||
padding: 0 (@padding-base / 2);
|
||||
.font-size(14);
|
||||
}
|
||||
ul
|
||||
sup {
|
||||
vertical-align: 2px;
|
||||
.font-size(9);
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -53,9 +59,9 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.color-vimeo {
|
||||
.color--vimeo {
|
||||
color: @color-vimeo;
|
||||
}
|
||||
.color-youtube {
|
||||
.color--youtube {
|
||||
color: @color-youtube;
|
||||
}
|
||||
|
||||
@ -22,6 +22,5 @@
|
||||
@import "components/base.less";
|
||||
@import "components/icons.less";
|
||||
@import "components/buttons.less";
|
||||
@import "components/panels.less";
|
||||
@import "components/error.less";
|
||||
@import "components/examples.less";
|
||||
|
||||
Reference in New Issue
Block a user