Fullscreen bug fix (fixes #664)
This commit is contained in:
Sam Potts
parent
a21ffe983c
commit
34172b9aee
@ -1,5 +1,8 @@
|
||||
# Changelog
|
||||
|
||||
## v2.0.16
|
||||
- Fullscreen bug fix (fixes #664)
|
||||
|
||||
## v2.0.15
|
||||
- Demo fix
|
||||
|
||||
|
||||
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.js
vendored
2
demo/dist/demo.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 i,o=arguments.length;for(i=0;i<o;i++)t=arguments[i],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:i.call(this,t)}}t=null}():function(t){"use strict";if("Element"in t){var e=t.Element.prototype,i=Object,o=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},s=Array.prototype.indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},n=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},r=function(t,e){if(""===e)throw new n("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new n("INVALID_CHARACTER_ERR","String contains an invalid character");return s.call(t,e)},a=function(t){for(var e=o.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],s=0,n=i.length;s<n;s++)this.push(i[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},c=a.prototype=[],l=function(){return new a(this)};if(n.prototype=Error.prototype,c.item=function(t){return this[t]||null},c.contains=function(t){return t+="",-1!==r(this,t)},c.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do{t=e[i]+"",-1===r(this,t)&&(this.push(t),s=!0)}while(++i<o);s&&this._updateClassName()},c.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do{for(t=i[o]+"",e=r(this,t);-1!==e;)this.splice(e,1),n=!0,e=r(this,t)}while(++o<s);n&&this._updateClassName()},c.toggle=function(t,e){t+="";var i=this.contains(t),o=i?!0!==e&&"remove":!1!==e&&"add";return o&&this[o](t),!0===e||!1===e?e:!i},c.toString=function(){return this.join(" ")},i.defineProperty){var u={get:l,enumerable:!0,configurable:!0};try{i.defineProperty(e,"classList",u)}catch(t){-2146823252===t.number&&(u.enumerable=!1,i.defineProperty(e,"classList",u))}}else i.prototype.__defineGetter__&&e.__defineGetter__("classList",l)}}(self)),function(){function t(t,e,i){if(t)if(t.classList)t.classList[i?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(/\s+/g," ").replace(" "+e+" ","");t.className=o+(i?" "+e:"")}}function e(e,i){if(e in n&&(i||e!==r)&&(r.length||e!==n.video)){switch(e){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=e;for(var a=s.length-1;a>=0;a--)t(s[a].parentElement,"active",!1);t(document.querySelector('[data-source="'+e+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var o=i[0],s=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var t=this.getAttribute("data-source");e(t),a&&history.pushState({type:t},"","#"+t)});if(window.addEventListener("popstate",function(t){t.state&&"type"in t.state&&e(t.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&e(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,i,o,s,n,r){t.GoogleAnalyticsObject=s,t[s]=t[s]||function(){(t[s].q=t[s].q||[]).push(arguments)},t[s].l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(n,r)}(window,document,"script",0,"ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
"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 i,o=arguments.length;for(i=0;i<o;i++)t=arguments[i],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:i.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",i="prototype",o=t.Element[i],s=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},a=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},c=function(t,e){if(""===e)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(t,e)},l=function(t){for(var e=n.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],o=0,s=i.length;o<s;o++)this.push(i[o]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",c(this,t)!==-1},u.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do t=e[i]+"",c(this,t)===-1&&(this.push(t),s=!0);while(++i<o);s&&this._updateClassName()},u.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do for(t=i[o]+"",e=c(this,t);e!==-1;)this.splice(e,1),n=!0,e=c(this,t);while(++o<s);n&&this._updateClassName()},u.toggle=function(t,e){t+="";var i=this.contains(t),o=i?e!==!0&&"remove":e!==!1&&"add";return o&&this[o](t),e===!0||e===!1?e:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(o,e,p)}catch(h){h.number===-2146823252&&(p.enumerable=!1,s.defineProperty(o,e,p))}}else s[i].__defineGetter__&&o.__defineGetter__(e,d)}}(self)),function(){function t(t,e,i){if(t)if(t.classList)t.classList[i?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(/\s+/g," ").replace(" "+e+" ","");t.className=o+(i?" "+e:"")}}function e(e,i){if(e in n&&(i||e!==r)&&(r.length||e!==n.video)){switch(e){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=e;for(var a=s.length-1;a>=0;a--)t(s[a].parentElement,"active",!1);t(document.querySelector('[data-source="'+e+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var o=i[0],s=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var t=this.getAttribute("data-source");e(t),a&&history.pushState({type:t},"","#"+t)});if(window.addEventListener("popstate",function(t){t.state&&"type"in t.state&&e(t.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&e(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,i,o,s,n,r){t.GoogleAnalyticsObject=s,t[s]=t[s]||function(){(t[s].q=t[s].q||[]).push(arguments)},t[s].l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src=o,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
3
dist/plyr.js
vendored
3
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
|
||||
@ -114,6 +114,7 @@
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: "plyr--fullscreen-enabled",
|
||||
fallback: "plyr--fullscreen-fallback",
|
||||
active: "plyr--fullscreen-active"
|
||||
},
|
||||
tabFocus: "tab-focus"
|
||||
@ -991,6 +992,11 @@
|
||||
if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
|
||||
_log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled");
|
||||
|
||||
// Add styling hook
|
||||
if (!nativeSupport) {
|
||||
_toggleClass(plyr.container, config.classes.fullscreen.fallback, true);
|
||||
}
|
||||
|
||||
// Add styling hook
|
||||
_toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
|
||||
} else {
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
// Animation
|
||||
// ---------------------------------------
|
||||
@keyframes plyr-progress {
|
||||
to { background-position: @plyr-progress-loading-size 0; }
|
||||
to {
|
||||
background-position: @plyr-progress-loading-size 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
@ -35,7 +37,10 @@
|
||||
|
||||
& when (@plyr-touch-action = true) {
|
||||
// Fix 300ms delay
|
||||
a, button, input, label {
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
label {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
@ -56,7 +61,7 @@
|
||||
|
||||
// Range inputs
|
||||
// Specificity is for bootstrap compatibility
|
||||
input[type='range'] {
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
|
||||
width: 100%;
|
||||
@ -137,12 +142,12 @@
|
||||
}
|
||||
|
||||
// Video range inputs
|
||||
.plyr--video input[type='range'].tab-focus:focus {
|
||||
.plyr--video input[type="range"].tab-focus:focus {
|
||||
outline: 1px dotted fade(@plyr-video-control-color, 50%);
|
||||
}
|
||||
|
||||
// Audio range inputs
|
||||
.plyr--audio input[type='range'].tab-focus:focus {
|
||||
.plyr--audio input[type="range"].tab-focus:focus {
|
||||
outline: 1px dotted fade(@plyr-audio-control-color, 50%);
|
||||
}
|
||||
|
||||
@ -221,7 +226,7 @@
|
||||
width: 100%;
|
||||
padding: (@plyr-control-spacing * 2);
|
||||
transform: translateY(-(@plyr-control-spacing * 4));
|
||||
transition: transform .3s ease;
|
||||
transition: transform 0.3s ease;
|
||||
color: @plyr-captions-color;
|
||||
font-size: @plyr-font-size-captions-base;
|
||||
text-align: center;
|
||||
@ -298,7 +303,7 @@
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background .3s ease, color .3s ease, opacity .3s ease;
|
||||
transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
|
||||
color: inherit;
|
||||
|
||||
svg {
|
||||
@ -347,7 +352,7 @@
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: @plyr-video-control-color;
|
||||
transition: opacity .3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
button {
|
||||
// Hover and tab focus
|
||||
@ -391,7 +396,7 @@
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 1px fade(#000, 15%);
|
||||
color: @plyr-video-control-color;
|
||||
transition: all .3s ease;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
@ -418,11 +423,11 @@
|
||||
}
|
||||
|
||||
// States
|
||||
.plyr__controls [data-plyr='pause'],
|
||||
.plyr--playing .plyr__controls [data-plyr='play'] {
|
||||
.plyr__controls [data-plyr="pause"],
|
||||
.plyr--playing .plyr__controls [data-plyr="play"] {
|
||||
display: none;
|
||||
}
|
||||
.plyr--playing .plyr__controls [data-plyr='pause'] {
|
||||
.plyr--playing .plyr__controls [data-plyr="pause"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -438,12 +443,12 @@
|
||||
}
|
||||
|
||||
// Some options are hidden by default
|
||||
.plyr [data-plyr='captions'],
|
||||
.plyr [data-plyr='fullscreen'] {
|
||||
.plyr [data-plyr="captions"],
|
||||
.plyr [data-plyr="fullscreen"] {
|
||||
display: none;
|
||||
}
|
||||
.plyr--captions-enabled [data-plyr='captions'],
|
||||
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
|
||||
.plyr--captions-enabled [data-plyr="captions"],
|
||||
.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -465,13 +470,13 @@
|
||||
font-size: @plyr-font-size-small;
|
||||
line-height: 1.3;
|
||||
|
||||
transform: translate(-50%, 10px) scale(.8);
|
||||
transform: translate(-50%, 10px) scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
|
||||
|
||||
&::before {
|
||||
// Arrows
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -499,7 +504,7 @@
|
||||
// First tooltip
|
||||
.plyr__controls button:first-child .plyr__tooltip {
|
||||
left: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 0 100%;
|
||||
|
||||
&::before {
|
||||
@ -510,7 +515,7 @@
|
||||
// Last tooltip
|
||||
.plyr__controls button:last-child .plyr__tooltip {
|
||||
right: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
|
||||
&::before {
|
||||
@ -529,7 +534,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Playback progress
|
||||
// --------------------------------------------------------------
|
||||
// <progress> element
|
||||
@ -621,13 +625,13 @@
|
||||
}
|
||||
.plyr__progress--buffer {
|
||||
&::-webkit-progress-value {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
&::-ms-fill {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
}
|
||||
.plyr--video .plyr__progress--buffer,
|
||||
@ -658,7 +662,8 @@
|
||||
@plyr-progress-loading-bg 50%,
|
||||
@plyr-progress-loading-bg 75%,
|
||||
transparent 75%,
|
||||
transparent);
|
||||
transparent
|
||||
);
|
||||
color: transparent;
|
||||
}
|
||||
.plyr--video.plyr--loading .plyr__progress--buffer {
|
||||
@ -685,7 +690,7 @@
|
||||
|
||||
// Add a slash in before
|
||||
&::before {
|
||||
content: '\2044';
|
||||
content: "\2044";
|
||||
margin-right: @plyr-control-spacing;
|
||||
}
|
||||
}
|
||||
@ -716,21 +721,15 @@
|
||||
// It's not supported to change volume using JavaScript:
|
||||
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
|
||||
.plyr--is-ios .plyr__volume,
|
||||
.plyr--is-ios [data-plyr='mute'] {
|
||||
.plyr--is-ios [data-plyr="mute"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Fullscreen
|
||||
// --------------------------------------------------------------
|
||||
.plyr--fullscreen-active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10000000;
|
||||
background: #000;
|
||||
border-radius: 0 !important;
|
||||
|
||||
@ -745,12 +744,6 @@
|
||||
// Revert overflow change
|
||||
overflow: visible;
|
||||
}
|
||||
.plyr__controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Vimeo requires some different styling
|
||||
&.plyr--vimeo .plyr__video-wrapper {
|
||||
@ -759,3 +752,13 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback for unsupported browsers
|
||||
.plyr--fullscreen-fallback.plyr--fullscreen-active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000000;
|
||||
}
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
// Animation
|
||||
// ---------------------------------------
|
||||
@keyframes plyr-progress {
|
||||
to { background-position: $plyr-progress-loading-size 0; }
|
||||
to {
|
||||
background-position: $plyr-progress-loading-size 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
@ -35,7 +37,10 @@
|
||||
|
||||
@if $plyr-touch-action == true {
|
||||
// Fix 300ms delay
|
||||
a, button, input, label {
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
label {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
@ -56,7 +61,7 @@
|
||||
|
||||
// Range inputs
|
||||
// Specificity is for bootstrap compatibility
|
||||
input[type='range'] {
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
|
||||
width: 100%;
|
||||
@ -137,13 +142,13 @@
|
||||
}
|
||||
|
||||
// Video range inputs
|
||||
.plyr--video input[type='range'].tab-focus:focus {
|
||||
outline: 1px dotted transparentize($plyr-video-control-color, .5);
|
||||
.plyr--video input[type="range"].tab-focus:focus {
|
||||
outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
|
||||
}
|
||||
|
||||
// Audio range inputs
|
||||
.plyr--audio input[type='range'].tab-focus:focus {
|
||||
outline: 1px dotted transparentize($plyr-audio-control-color, .5);
|
||||
.plyr--audio input[type="range"].tab-focus:focus {
|
||||
outline: 1px dotted transparentize($plyr-audio-control-color, 0.5);
|
||||
}
|
||||
|
||||
// Screen reader only elements
|
||||
@ -220,7 +225,7 @@
|
||||
width: 100%;
|
||||
padding: ($plyr-control-spacing * 2);
|
||||
transform: translateY(-($plyr-control-spacing * 6));
|
||||
transition: transform .3s ease;
|
||||
transition: transform 0.3s ease;
|
||||
color: $plyr-captions-color;
|
||||
font-size: $plyr-font-size-captions-base;
|
||||
text-align: center;
|
||||
@ -292,12 +297,12 @@
|
||||
flex-shrink: 0;
|
||||
overflow: visible; // IE11
|
||||
vertical-align: middle;
|
||||
padding: ($plyr-control-spacing * .7);
|
||||
padding: ($plyr-control-spacing * 0.7);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background .3s ease, color .3s ease, opacity .3s ease;
|
||||
transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
|
||||
color: inherit;
|
||||
|
||||
svg {
|
||||
@ -341,11 +346,14 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: ($plyr-control-spacing * 5) $plyr-control-spacing $plyr-control-spacing;
|
||||
background: linear-gradient(transparentize($plyr-video-controls-bg, 1), transparentize($plyr-video-controls-bg, .5));
|
||||
background: linear-gradient(
|
||||
transparentize($plyr-video-controls-bg, 1),
|
||||
transparentize($plyr-video-controls-bg, 0.5)
|
||||
);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: $plyr-video-control-color;
|
||||
transition: opacity .3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
button {
|
||||
// Hover and tab focus
|
||||
@ -387,9 +395,9 @@
|
||||
background: $plyr-video-control-bg-hover;
|
||||
border: 4px solid currentColor;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 1px transparentize(#000, .85);
|
||||
box-shadow: 0 1px 1px transparentize(#000, 0.85);
|
||||
color: $plyr-video-control-color;
|
||||
transition: all .3s ease;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
@ -401,7 +409,7 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 1px dotted transparentize($plyr-video-control-color, .5);
|
||||
outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
|
||||
}
|
||||
}
|
||||
.plyr .plyr__play-large {
|
||||
@ -416,11 +424,11 @@
|
||||
}
|
||||
|
||||
// States
|
||||
.plyr__controls [data-plyr='pause'],
|
||||
.plyr--playing .plyr__controls [data-plyr='play'] {
|
||||
.plyr__controls [data-plyr="pause"],
|
||||
.plyr--playing .plyr__controls [data-plyr="play"] {
|
||||
display: none;
|
||||
}
|
||||
.plyr--playing .plyr__controls [data-plyr='pause'] {
|
||||
.plyr--playing .plyr__controls [data-plyr="pause"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -436,12 +444,12 @@
|
||||
}
|
||||
|
||||
// Some options are hidden by default
|
||||
.plyr [data-plyr='captions'],
|
||||
.plyr [data-plyr='fullscreen'] {
|
||||
.plyr [data-plyr="captions"],
|
||||
.plyr [data-plyr="fullscreen"] {
|
||||
display: none;
|
||||
}
|
||||
.plyr--captions-enabled [data-plyr='captions'],
|
||||
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
|
||||
.plyr--captions-enabled [data-plyr="captions"],
|
||||
.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -463,13 +471,13 @@
|
||||
font-size: $plyr-font-size-small;
|
||||
line-height: 1.3;
|
||||
|
||||
transform: translate(-50%, 10px) scale(.8);
|
||||
transform: translate(-50%, 10px) scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
|
||||
|
||||
&::before {
|
||||
// Arrows
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -497,7 +505,7 @@
|
||||
// First tooltip
|
||||
.plyr__controls button:first-child .plyr__tooltip {
|
||||
left: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 0 100%;
|
||||
|
||||
&::before {
|
||||
@ -508,7 +516,7 @@
|
||||
// Last tooltip
|
||||
.plyr__controls button:last-child .plyr__tooltip {
|
||||
right: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
|
||||
&::before {
|
||||
@ -618,13 +626,13 @@
|
||||
}
|
||||
.plyr__progress--buffer {
|
||||
&::-webkit-progress-value {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
&::-ms-fill {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
}
|
||||
.plyr--video .plyr__progress--buffer,
|
||||
@ -655,7 +663,8 @@
|
||||
$plyr-progress-loading-bg 50%,
|
||||
$plyr-progress-loading-bg 75%,
|
||||
transparent 75%,
|
||||
transparent);
|
||||
transparent
|
||||
);
|
||||
color: transparent;
|
||||
}
|
||||
.plyr--video.plyr--loading .plyr__progress--buffer {
|
||||
@ -682,7 +691,7 @@
|
||||
|
||||
// Add a slash in before
|
||||
&::before {
|
||||
content: '\2044';
|
||||
content: "\2044";
|
||||
margin-right: $plyr-control-spacing;
|
||||
}
|
||||
}
|
||||
@ -713,21 +722,15 @@
|
||||
// It's not supported to change volume using JavaScript:
|
||||
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
|
||||
.plyr--is-ios .plyr__volume,
|
||||
.plyr--is-ios [data-plyr='mute'] {
|
||||
.plyr--is-ios [data-plyr="mute"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Fullscreen
|
||||
// --------------------------------------------------------------
|
||||
.plyr--fullscreen-active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10000000;
|
||||
background: #000;
|
||||
border-radius: 0 !important;
|
||||
|
||||
@ -742,12 +745,6 @@
|
||||
// Revert overflow change
|
||||
overflow: visible;
|
||||
}
|
||||
.plyr__controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Vimeo requires some different styling
|
||||
&.plyr--vimeo .plyr__video-wrapper {
|
||||
@ -756,3 +753,13 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback for unsupported browsers
|
||||
.plyr--fullscreen-fallback.plyr--fullscreen-active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000000;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user