t?t=0:t>ve.media.duration&&(t=ve.media.duration);try{ve.media.currentTime=t.toFixed(1)}catch(a){}"embed"in ve&&("youtube"===ve.type&&ve.embed.seekTo(t),"vimeo"===ve.type&&ve.embed.api("seekTo",t),h(ve.media,"timeupdate"),r&&U()),n("Seeking to "+ve.media.currentTime+" seconds"),C(t)}function K(){y(ve.container,E.classes.playing,!ve.media.paused),y(ve.container,E.classes.stopped,ve.media.paused)}function Q(e){function t(){y(ve.container,E.classes.hover,!0),window.clearTimeout(a),o||(a=window.setTimeout(function(){y(ve.container,E.classes.hover,!1)},2e3))}function n(e){o="mouseenter"===e.type}var r=S.supportsFullScreen;e&&e.type===S.fullScreenEventName?ve.isFullscreen=S.isFullScreen(ve.container):r?(S.isFullScreen(ve.container)?S.cancelFullScreen():S.requestFullScreen(ve.container),ve.isFullscreen=S.isFullScreen(ve.container)):(ve.isFullscreen=!ve.isFullscreen,ve.isFullscreen?(v(document,"keyup",Z),document.body.style.overflow="hidden"):(g(document,"keyup",Z),document.body.style.overflow="")),y(ve.container,E.classes.fullscreen.active,ve.isFullscreen),w(ve.buttons.fullscreen,ve.isFullscreen);var a,o=!1;E.fullscreen.hideControls&&(y(ve.controls,E.classes.hover,!1),b(ve.controls,"mouseenter mouseleave",n,ve.isFullscreen),b(ve.container,"mousemove",t,ve.isFullscreen))}function Z(e){27===(e.which||e.charCode||e.keyCode)&&ve.isFullscreen&&Q()}function ee(e){"boolean"!=typeof e&&(e=!ve.media.muted),w(ve.buttons.mute,e),ve.media.muted=e,"youtube"===ve.type&&(ve.embed[ve.media.muted?"mute":"unMute"](),h(ve.media,"volumechange"))}function te(e){"undefined"==typeof e&&(e=E.storage.enabled&&F().supported?window.localStorage[E.storage.key]||E.volume:E.volume),e>10&&(e=10),0>e&&(e=0),ve.media.volume=parseFloat(e/10),E.volume=e,"youtube"===ve.type&&ve.embed.setVolume(100*ve.media.volume),"vimeo"===ve.type&&ve.embed.api("setVolume",ve.media.volume),"embed"in ve&&h(ve.media,"volumechange"),ve.media.muted&&e>0&&ee()}function ne(){var e=ve.media.muted?0:10*ve.media.volume;ve.supported.full&&ve.volume&&(ve.volume.value=e),E.storage.enabled&&F().supported&&window.localStorage.setItem(E.storage.key,e),y(ve.container,E.classes.muted,0===e),ve.supported.full&&ve.buttons.mute&&w(ve.buttons.mute,0===e)}function re(e){ve.supported.full&&ve.buttons.captions&&("boolean"!=typeof e&&(e=-1===ve.container.className.indexOf(E.classes.captions.active)),ve.captionsEnabled=e,w(ve.buttons.captions,ve.captionsEnabled),y(ve.container,E.classes.captions.active,ve.captionsEnabled))}function ae(e){var t="waiting"===e.type;clearTimeout(ve.loadingTimer),ve.loadingTimer=setTimeout(function(){y(ve.container,E.classes.loading,t)},t?250:0)}function oe(e){var t=ve.progress.played.bar,n=ve.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=k(ve.media.currentTime,ve.media.duration),"timeupdate"==e.type&&ve.buttons.seek&&(ve.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=ve.progress.buffer.bar,n=ve.progress.buffer.text,r=function(){var e=ve.media.buffered;return e&&e.length?k(e.end(0),ve.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function se(e,t){if(t){isNaN(e)&&(e=0),ve.secs=parseInt(e%60),ve.mins=parseInt(e/60%60),ve.hours=parseInt(e/60/60%60);var n=parseInt(ve.media.duration/60/60%60)>0;ve.secs=("0"+ve.secs).slice(-2),ve.mins=("0"+ve.mins).slice(-2),t.innerHTML=(n?ve.hours+":":"")+ve.mins+":"+ve.secs}}function ie(){var e=ve.media.duration||0;!ve.duration&&E.displayDuration&&ve.media.paused&&se(e,ve.currentTime),ve.duration&&se(e,ve.duration)}function le(e){se(ve.media.currentTime,ve.currentTime),oe(e)}function ue(e,t){if("string"==typeof t)m(e,ve.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)m(e,ve.media,t[n])}function ce(e){if("undefined"!=typeof e){switch(U(),"youtube"===ve.type?(ve.embed.destroy(),window.clearInterval(ve.timer.buffering),window.clearInterval(ve.timer.playing)):"video"===ve.type&&c(ve.videoContainer),c(ve.media),"type"in e&&e.type!==ve.type&&(ve.type=e.type),ve.type){case"video":ve.media=document.createElement("video");break;case"audio":ve.media=document.createElement("audio");break;case"youtube":case"vimeo":ve.media=document.createElement("div"),ve.embedId="string"==typeof e.sources?e.sources:e.sources[0].src}p(ve.container,ve.media),s(E.types.html5,ve.type)&&(E.crossorigin&&ve.media.setAttribute("crossorigin",""),E.autoplay&&ve.media.setAttribute("autoplay",""),"poster"in e&&ve.media.setAttribute("poster",e.poster),E.loop&&ve.media.setAttribute("loop","")),ve.container.className=ve.originalClassName,y(ve.container,E.classes.fullscreen.active,ve.isFullscreen),y(ve.container,E.classes.captions.active,ve.captionsEnabled),E.autoplay=e.autoplay||E.autoplay,s(E.types.embed,ve.type)&&(ve.embedId=e.sources),s(E.types.html5,ve.type)&&ue("source",e.sources),j(),be(),s(E.types.html5,ve.type)&&(te(),ne(),ve.supported.full&&(le(),K()),"tracks"in e&&(ue("track",e.tracks),W()),ve.media.load(),E.autoplay&&$()),"title"in e&&(E.title=e.title,H())}}function pe(e){"video"===ve.type&&ve.media.setAttribute("poster",e)}function de(){function e(){var e=document.activeElement;e&&e!=document.body?document.querySelector&&(e=document.querySelector(":focus")):e=null;for(var t in ve.buttons){var n=ve.buttons[t];y(n,"tab-focus",n===e)}}var t="IE"==ve.browser.name?"change":"input";v(window,"keyup",function(t){var n=t.keyCode?t.keyCode:t.which;9==n&&e()});for(var n in ve.buttons){var r=ve.buttons[n];v(r,"blur",function(){y(r,"tab-focus",!1)})}v(ve.buttons.play,"click",function(){$(),setTimeout(function(){ve.buttons.pause.focus()},100)}),v(ve.buttons.pause,"click",function(){U(),setTimeout(function(){ve.buttons.play.focus()},100)}),v(ve.buttons.restart,"click",G),v(ve.buttons.rewind,"click",Y),v(ve.buttons.forward,"click",J),v(ve.buttons.seek,t,G),v(ve.volume,t,function(){te(this.value)}),v(ve.buttons.mute,"click",ee),v(ve.buttons.fullscreen,"click",Q),S.supportsFullScreen&&v(document,S.fullScreenEventName,Q),v(ve.media,"timeupdate seeking",le),v(ve.media,"timeupdate",C),v(ve.media,"loadedmetadata",ie),v(ve.buttons.captions,"click",re),v(ve.media,"ended",function(){"video"===ve.type&&(ve.captionsContainer.innerHTML=""),K()}),v(ve.media,"progress playing",oe),v(ve.media,"volumechange",ne),v(ve.media,"play pause",K),v(ve.media,"waiting canplay seeked",ae),"video"===ve.type&&E.click&&v(ve.videoContainer,"click",function(){ve.media.paused?h(ve.buttons.play,"click"):ve.media.ended?(G(),h(ve.buttons.play,"click")):h(ve.buttons.pause,"click")})}function me(){if(!ve.init)return null;if(ve.container.setAttribute("class",f(E.selectors.container)),ve.init=!1,c(L(E.selectors.controls)),"youtube"===ve.type)return void ve.embed.destroy();"video"===ve.type&&(c(L(E.selectors.captions)),u(ve.videoContainer)),ve.media.setAttribute("controls","");var e=ve.media.cloneNode(!0);ve.media.parentNode.replaceChild(e,ve.media)}function fe(){if(ve.init)return null;S=x(),ve.browser=r(),ve.media=ve.container.querySelectorAll("audio, video, div")[0],ve.originalClassName=ve.container.className;var t=ve.media.tagName.toLowerCase();if("div"===t?(ve.type=ve.media.getAttribute("data-type"),ve.embedId=ve.media.getAttribute("data-video-id"),ve.media.removeAttribute("data-type"),ve.media.removeAttribute("data-video-id")):(ve.type=t,E.crossorigin=null!==ve.media.getAttribute("crossorigin"),E.autoplay=E.autoplay||null!==ve.media.getAttribute("autoplay"),E.loop=E.loop||null!==ve.media.getAttribute("loop")),ve.supported=e.supported(ve.type),!ve.supported.basic)return!1;if(n(ve.browser.name+" "+ve.browser.version),j(),"video"==ve.type||"audio"==ve.type){if(!ve.supported.full)return void(ve.init=!0);ye(),E.displayDuration&&ie(),H()}ve.init=!0}function ye(){return q(),V()?(W(),be(),te(),void ne()):!1}function be(){z(),de()}var ve=this;return ve.container=T,fe(),ve.init?{media:ve.media,play:$,pause:U,restart:G,rewind:Y,forward:J,seek:G,source:ce,poster:pe,setVolume:te,togglePlay:X,toggleMute:ee,toggleCaptions:re,toggleFullscreen:Q,isFullscreen:function(){return ve.isFullscreen||!1},support:function(e){return a(ve,e)},destroy:me,restore:fe}:{}}var S,E,A={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",selectors:{container:".plyr",controls:".plyr-controls",labels:"[data-plyr] .sr-only, label .sr-only",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr-progress",buffer:".plyr-progress-buffer",played:".plyr-progress-played"},captions:".plyr-captions",currentTime:".plyr-current-time",duration:".plyr-duration"},classes:{videoWrapper:"plyr-video-wrapper",embedWrapper:"plyr-video-embed",type:"plyr-{0}",stopped:"stopped",playing:"playing",muted:"muted",loading:"loading",tooltip:"plyr-tooltip",hidden:"sr-only",hover:"plyr-hover",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active",hideControls:"fullscreen-hide-controls"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0,allowAudio:!1},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"https://cdn.rawgit.com/vimeo/player-api/master/javascript/froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};e.supported=function(e){var t,n,a=r(),o="IE"===a.name&&a.version<=9,s=/iPhone|iPod/i.test(navigator.userAgent),i=!!document.createElement("audio").canPlayType,l=!!document.createElement("video").canPlayType;switch(e){case"video":t=l,n=t&&!o&&!s;break;case"audio":t=i,n=t&&!o;break;case"vimeo":case"youtube":t=!0,n=!o&&!s;break;default:t=i&&l,n=t&&!o}return{basic:t,full:n}},e.setup=function(t,n){var r=[];if("string"==typeof t?t=document.querySelectorAll(t):t instanceof HTMLElement?t=[t]:t instanceof NodeList||"string"==typeof t||("undefined"==typeof n&&"object"==typeof t&&(n=t),t=document.querySelectorAll(A.selectors.container)),E=T(A,n),!E.enabled||!e.supported().basic)return!1;for(var a=t.length-1;a>=0;a--){var o=t[a];if("undefined"==typeof o.plyr){var s=new C(o);o.plyr=Object.keys(s).length?s:!1,"function"==typeof E.onSetup&&E.onSetup.apply(o.plyr)}r.push(o.plyr)}return r}}(this.plyr=this.plyr||{});
\ No newline at end of file
diff --git a/docs/dist/docs.css b/docs/dist/docs.css
index 6a75e430..38dcd187 100644
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
@@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}[hidden],template{display:none}body,figure,ul li{margin:0}body,h1,h2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,small{padding:0 10px}nav ul,ul li{list-style:none;padding:0}legend,nav ul,ul li{padding:0}.btn-bar,sub,sup{position:relative}.btn-bar,.plyr{max-width:1200px}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;color:#3498db;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}.btn-bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}.btn-bar::before,.btn-count::before{content:"";top:50%}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:600}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color-vimeo{color:#19b7ed}.color-youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn-bar ul,nav li{display:inline-block}html{height:100%;font-size:100%;background:linear-gradient(#fff,#f2f5f7) fixed}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{padding-bottom:20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{padding-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn-bar{margin:0 auto 20px}.btn-bar::before{position:absolute;left:0;right:0;height:1px;background:#dbe3e8}.btn-bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-bar li{margin:0}.btn-bar li:first-child .btn{border-radius:4px 0 0 4px}.btn-bar li:last-child .btn{border-radius:0 4px 4px 0}.btn-bar li+li .btn{margin-left:-1px}.btn-bar .btn{display:block;border-radius:0}.btn-bar .btn.active{box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}.btn-bar .btn.active .icon{color:inherit}@media (min-width:560px){.btn-bar{margin-bottom:40px}}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#f2f5f7;border:1px solid #cbd0d3;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .3s ease,border .3s ease,color .3s ease}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn-youtube .icon{color:#cc181e}.btn-vimeo .icon{color:#19b7ed}.btn-twitter .icon{color:#4BAAF4}.btn-bar .active,.btn-primary{background-image:linear-gradient(#3498db,#2791d9);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn-primary:focus,.btn-primary:hover{color:#fff;border-color:#196090}.btn-small{padding-top:7px;padding-bottom:7px}.btn-count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn-count::before{position:absolute;display:block;width:8px;height:8px;left:1px;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.panel{display:none}.panel.active{display:block;-webkit-animation:fade-in .3s ease;animation:fade-in .3s ease}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}.plyr{margin:0 auto 20px}.plyr-controls{border-radius:0 0 4px 4px}.plyr-audio{max-width:520px}.plyr-audio .plyr-controls{border-radius:4px}.plyr-audio .plyr-progress{border-radius:4px 4px 0 0;overflow:hidden}.plyr-video-embed,video{border-radius:4px}.plyr-video-embed{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr-video .plyr-video-embed,.plyr-video video,.plyr-vimeo .plyr-video-embed,.plyr-vimeo video,.plyr-youtube .plyr-video-embed,.plyr-youtube video{border-radius:4px 4px 0 0}.plyr-video.fullscreen-active,.plyr-video.plyr-fullscreen,.plyr-vimeo.fullscreen-active,.plyr-vimeo.plyr-fullscreen,.plyr-youtube.fullscreen-active,.plyr-youtube.plyr-fullscreen{max-width:none}.plyr-video.fullscreen-active .plyr-controls,.plyr-video.fullscreen-active iframe,.plyr-video.fullscreen-active video,.plyr-video.plyr-fullscreen .plyr-controls,.plyr-video.plyr-fullscreen iframe,.plyr-video.plyr-fullscreen video,.plyr-vimeo.fullscreen-active .plyr-controls,.plyr-vimeo.fullscreen-active iframe,.plyr-vimeo.fullscreen-active video,.plyr-vimeo.plyr-fullscreen .plyr-controls,.plyr-vimeo.plyr-fullscreen iframe,.plyr-vimeo.plyr-fullscreen video,.plyr-youtube.fullscreen-active .plyr-controls,.plyr-youtube.fullscreen-active iframe,.plyr-youtube.fullscreen-active video,.plyr-youtube.plyr-fullscreen .plyr-controls,.plyr-youtube.plyr-fullscreen iframe,.plyr-youtube.plyr-fullscreen video{border-radius:0}.plyr-video.fullscreen-active iframe,.plyr-video.plyr-fullscreen iframe,.plyr-vimeo.fullscreen-active iframe,.plyr-vimeo.plyr-fullscreen iframe,.plyr-youtube.fullscreen-active iframe,.plyr-youtube.plyr-fullscreen iframe{-webkit-mask-image:none}.cite{display:none}.cite .icon{margin-right:5px}.plyr-audio~ul .cite-audio,.plyr-video~ul .cite-video,.plyr-vimeo~ul .cite-vimeo,.plyr-youtube~ul .cite-youtube{display:block}
\ No newline at end of file
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}[hidden],template{display:none}body,figure,ul li{margin:0}body,h1,h2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,small{padding:0 10px}nav ul,ul li{list-style:none;padding:0}legend,nav ul,ul li{padding:0}.btn-bar,sub,sup{position:relative}.btn-bar,.plyr{max-width:1200px}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;color:#3498db;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}.btn-bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}.btn-bar::before,.btn-count::before{content:"";top:50%}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:600}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color-vimeo{color:#19b7ed}.color-youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn-bar ul,nav li{display:inline-block}html{height:100%;font-size:100%;background:linear-gradient(#fff,#f2f5f7) fixed}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{padding-bottom:20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{padding-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn-bar{margin:0 auto 20px}.btn-bar::before{position:absolute;left:0;right:0;height:1px;background:#dbe3e8}.btn-bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-bar li{margin:0}.btn-bar li:first-child .btn{border-radius:4px 0 0 4px}.btn-bar li:last-child .btn{border-radius:0 4px 4px 0}.btn-bar li+li .btn{margin-left:-1px}.btn-bar .btn{display:block;border-radius:0}.btn-bar .btn.active{box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}.btn-bar .btn.active .icon{color:inherit}@media (min-width:560px){.btn-bar{margin-bottom:40px}}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#f2f5f7;border:1px solid #cbd0d3;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .3s ease,border .3s ease,color .3s ease}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn-youtube .icon{color:#cc181e}.btn-vimeo .icon{color:#19b7ed}.btn-twitter .icon{color:#4BAAF4}.btn-bar .active,.btn-primary{background-image:linear-gradient(#3498db,#2791d9);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn-primary:focus,.btn-primary:hover{color:#fff;border-color:#196090}.btn-small{padding-top:7px;padding-bottom:7px}.btn-count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn-count::before{position:absolute;display:block;width:8px;height:8px;left:1px;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.panel{display:none}.panel.active{display:block;-webkit-animation:fade-in .3s ease;animation:fade-in .3s ease}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}.plyr-video-embed,video{border-radius:4px}.plyr-video-embed{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr{margin:0 auto 20px}.plyr-controls{border-radius:0 0 4px 4px}.plyr .plyr-video-embed,.plyr video{border-radius:4px 4px 0 0}.plyr-fullscreen,.plyr.fullscreen-active{max-width:none}.plyr-fullscreen .plyr-controls,.plyr-fullscreen iframe,.plyr-fullscreen video,.plyr.fullscreen-active .plyr-controls,.plyr.fullscreen-active iframe,.plyr.fullscreen-active video{border-radius:0}.plyr-fullscreen iframe,.plyr.fullscreen-active iframe{-webkit-mask-image:none}.plyr-audio{max-width:520px}.plyr-audio .plyr-controls{border-radius:4px}.plyr-audio .plyr-progress{border-radius:4px 4px 0 0;overflow:hidden}.cite{display:none}.cite .icon{margin-right:5px}.plyr-audio~ul .cite-audio,.plyr-video~ul .cite-video,.plyr-vimeo~ul .cite-vimeo,.plyr-youtube~ul .cite-youtube{display:block}
\ No newline at end of file
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index 5e09cab6..6312b642 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -2,6 +2,14 @@
// Examples
// ==========================================================================
+video,
+.plyr-video-embed {
+ border-radius: @border-radius-base;
+}
+.plyr-video-embed {
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+}
+
// Example players
.plyr {
margin: 0 auto @padding-base;
@@ -10,35 +18,11 @@
&-controls {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
-}
-.plyr-audio {
- max-width: @example-width-audio;
-
- .plyr-controls {
- border-radius: @border-radius-base;
- }
- .plyr-progress {
- border-radius: @border-radius-base @border-radius-base 0 0;
- overflow: hidden;
- }
-}
-video,
-.plyr-video-embed {
- border-radius: @border-radius-base;
-}
-.plyr-video-embed {
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-}
-
-// Style full supported player
-.plyr-video,
-.plyr-youtube,
-.plyr-vimeo {
video,
.plyr-video-embed {
border-radius: @border-radius-base @border-radius-base 0 0;
}
- &.plyr-fullscreen,
+ &-fullscreen,
&.fullscreen-active {
max-width: none;
@@ -52,7 +36,19 @@ video,
}
}
}
+.plyr-audio {
+ max-width: @example-width-audio;
+ .plyr-controls {
+ border-radius: @border-radius-base;
+ }
+ .plyr-progress {
+ border-radius: @border-radius-base @border-radius-base 0 0;
+ overflow: hidden;
+ }
+}
+
+// Style full supported player
.cite {
display: none;
diff --git a/readme.md b/readme.md
index b853367d..d4d48b7d 100644
--- a/readme.md
+++ b/readme.md
@@ -262,7 +262,7 @@ Options must be passed as an object to the `setup()` method as above.
selectorsObject
—
- See plyr.js in /src for more info. The only option you might want to change is container which is the hook used for `setup()`, the default is .plyr.
+ See plyr.js in /src for more info. You probably don't need to change any of these.
classesfullscreenObject
—
- Three properties; enabled which toggles if fullscreen should be enabled (if the browser supports it). The default value is true. A fallback property which will enable a full window view for older browsers. The default value is true. A hideControls property which will hide the controls when fullscreen is active and the video is playing, after 1s. The controls reappear on hover of the progress bar (mouse), focusing a child control or pausing the video (by tap/click of video if `click` is `true`). The default value is true.
+ See below
storage
+
+
+ Option
+ Type
+ Default
+ Description
+
+
+
+
+ enabledBoolean
+ trueToggles if fullscreen should be enabled (if the browser supports it).
+
+
+ fallbackBoolean
+ trueEnable a full viewport view for older browsers.
+
+
+ hideControlsBoolean
+ trueHide the controls when fullscreen is active and the video is playing, after 1s. The controls reappear on hover of the progress bar (mouse), focusing a child control or pausing the video (by tap/click of video if `click` is `true`).
+
+
+ allowAudioBoolean
+ falseAllow audio play to toggle fullscreen. This will be more useful later when posters are supported.
+
+
+
+
## API
#### Fetching the plyr instance
@@ -331,8 +370,8 @@ Here's a list of the methods supported:
Parameters
Description
-
-
+
+
play()—
@@ -400,7 +439,7 @@ Here's a list of the methods supported:
source(...)String or Array
+ Array
Set the media source.
+#### .source() method
+
+This allows changing the plyr source and type on the fly.
+
+Video example:
+
+```javascript
+player.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: true
+ }]
+});
+```
+
+Audio example:
+
+```javascript
+player.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'
+ }]
+});
+```
+
+YouTube example:
+
+```javascript
+player.source({
+ type: 'youtube',
+ title: 'Enovato interview of Dan Cederholm for Made By',
+ sources: 'Au87oAJ2jeE'
+});
+```
+
+Vimeo example
+
+```javascript
+player.source({
+ type: 'vimeo',
+ title: 'Yosemite HD II',
+ sources: '87701971'
+});
+```
+
+Some more details on the object parameters
+
+
+
+
+ Key
+ Type
+ Description
+
+
+
+
+ typeString
+ Options are video, audio, youtube and vimeo
+
+
+ titleString
+ Title of the new media. Used for the aria labelling.
+
+
+ sourcesArray or String
+ This is an array of sources or optionally a string for embedded players (YouTube and Vimeo). `type` is also optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.
+
+
+ posterString
+ URL for the poster image (video only).
+
+
+ tracksArray
+ An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as ``. Booleans are converted to HTML5 value-less attributes.
+
+
+
+
+
## Events/Callbacks
The `plyr` object on the player element also contains a `media` property which is a reference to the `` or `` element within the player which you can use to listen for events. Here's an example:
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 5e22c680..2d497e75 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -78,7 +78,8 @@
fullscreen: {
enabled: true,
fallback: true,
- hideControls: true
+ hideControls: true,
+ allowAudio: false
},
storage: {
enabled: true,
@@ -664,7 +665,7 @@
time = typeof time === 'number' ? time : plyr.media.currentTime;
// If there's no subs available, bail
- if(!plyr.captions[plyr.subcount]) {
+ if (!plyr.captions[plyr.subcount]) {
return;
}
@@ -930,9 +931,6 @@
_remove(containers[i]);
}
- // Set ID
- container.setAttribute('id', id);
-
// Add embed class for responsive
_toggleClass(plyr.media, config.classes.videoWrapper, true);
_toggleClass(plyr.media, config.classes.embedWrapper, true);
@@ -942,6 +940,9 @@
// Create the YouTube container
plyr.media.appendChild(container);
+ // Set ID
+ container.setAttribute('id', id);
+
// Setup API
if (typeof YT === 'object') {
_youTubeReady(videoId, container);
@@ -984,7 +985,7 @@
// Wait for fragaloop load
var timer = window.setInterval(function() {
- if('$f' in window && iframe.loaded) {
+ if ('$f' in window && iframe.loaded) {
window.clearInterval(timer);
_vimeoReady.call(iframe);
@@ -1122,11 +1123,11 @@
// Vimeo ready
function _vimeoReady() {
/* jshint validthis: true */
- // Get the frame with fragaloop lib
plyr.embed = $f(this);
// Setup on ready
plyr.embed.addEvent('ready', function() {
+
// Create a faux HTML5 API using the Vimeo API
plyr.media.play = function() { plyr.embed.api('play'); };
plyr.media.pause = function() { plyr.embed.api('pause'); };
@@ -1178,13 +1179,13 @@
_triggerEvent(plyr.media, 'ended');
});
- /*// Always seek to 0
- plyr.embed.api('seekTo', 0);
+ // Always seek to 0
+ //plyr.embed.api('seekTo', 0);
// Prevent autoplay if needed (seek will play)
- if (!config.autoplay) {
- plyr.embed.api('pause');
- }*/
+ //if (!config.autoplay) {
+ // plyr.embed.api('pause');
+ //}
});
}
@@ -1192,7 +1193,7 @@
function _setupCaptions() {
if (plyr.type === 'video') {
// Inject the container
- if(!_getElement(config.selectors.captions)) {
+ if (!_getElement(config.selectors.captions)) {
plyr.videoContainer.insertAdjacentHTML('afterbegin', '
');
}
@@ -1340,7 +1341,7 @@
// Setup fullscreen
function _setupFullscreen() {
- if (plyr.type != 'audio' && config.fullscreen.enabled) {
+ if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
@@ -1660,18 +1661,21 @@
// If there's no full support, or there's no caption toggle
if (!plyr.supported.full || !plyr.buttons.captions) {
return;
- }
+ }
// If the method is called without parameter, toggle based on current value
if (typeof show !== 'boolean') {
show = (plyr.container.className.indexOf(config.classes.captions.active) === -1);
}
+ // Set global
+ plyr.captionsEnabled = show;
+
// Toggle state
- _toggleState(plyr.buttons.captions, show);
+ _toggleState(plyr.buttons.captions, plyr.captionsEnabled);
// Add class hook
- _toggleClass(plyr.container, config.classes.captions.active, show);
+ _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
}
// Check if media is loading
@@ -1753,7 +1757,7 @@
}
// Fallback to 0
- if(isNaN(time)) {
+ if (isNaN(time)) {
time = 0;
}
@@ -1798,10 +1802,10 @@
// Add elements to HTML5 media (source, tracks, etc)
function _insertChildElements(type, attributes) {
- if(typeof attributes === 'string') {
+ if (typeof attributes === 'string') {
_insertElement(type, plyr.media, { src: attributes });
}
- else if(attributes.constructor === Array) {
+ else if (attributes.constructor === Array) {
for (var i = attributes.length - 1; i >= 0; i--) {
_insertElement(type, plyr.media, attributes[i]);
}
@@ -1811,7 +1815,7 @@
// Update source
// Sources are not checked for support so be careful
function _updateSource(source) {
- if(typeof source === 'undefined') {
+ if (typeof source === 'undefined') {
return;
}
@@ -1819,7 +1823,7 @@
_pause();
// Clean up YouTube stuff
- if(plyr.type === 'youtube') {
+ if (plyr.type === 'youtube') {
// Destroy the embed instance
plyr.embed.destroy();
@@ -1836,7 +1840,7 @@
_remove(plyr.media);
// Set the new type
- if('type' in source && source.type !== plyr.type) {
+ if ('type' in source && source.type !== plyr.type) {
plyr.type = source.type;
}
@@ -1853,7 +1857,7 @@
case 'youtube':
case 'vimeo':
plyr.media = document.createElement('div');
- plyr.embedId = source.sources;
+ plyr.embedId = (typeof source.sources === 'string' ? source.sources : source.sources[0].src);
break;
}
@@ -1861,8 +1865,8 @@
_prependChild(plyr.container, plyr.media);
// Set attributes for audio video
- if(_inArray(config.types.html5, plyr.type)) {
- if(config.crossorigin) {
+ if (_inArray(config.types.html5, plyr.type)) {
+ if (config.crossorigin) {
plyr.media.setAttribute('crossorigin', '');
}
if (config.autoplay) {
@@ -1879,16 +1883,20 @@
// Classname reset
plyr.container.className = plyr.originalClassName;
+ // Restore class hooks
+ _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
+ _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
+
// Autoplay the new source?
config.autoplay = (source.autoplay || config.autoplay);
// Set media id for embeds
- if(_inArray(config.types.embed, plyr.type)) {
+ if (_inArray(config.types.embed, plyr.type)) {
plyr.embedId = source.sources;
}
// Set new sources for html5
- if(_inArray(config.types.html5, plyr.type)) {
+ if (_inArray(config.types.html5, plyr.type)) {
_insertChildElements('source', source.sources);
}
@@ -1899,13 +1907,13 @@
_mediaUpdated();
// HTML5 stuff
- if(_inArray(config.types.html5, plyr.type)) {
+ if (_inArray(config.types.html5, plyr.type)) {
// Set volume
_setVolume();
_updateVolume();
// UI updates
- if(plyr.supported.full) {
+ if (plyr.supported.full) {
// Reset time display
_timeUpdate();
@@ -1914,7 +1922,7 @@
}
// Setup captions
- if('tracks' in source) {
+ if ('tracks' in source) {
_insertChildElements('track', source.tracks);
// Captions
@@ -1930,7 +1938,7 @@
}
}
- if('title' in source) {
+ if ('title' in source) {
config.title = source.title;
_setupPlayAria();
}
@@ -2292,17 +2300,17 @@
// Select the elements
// Assume elements is a NodeList by default
- if(typeof elements === 'string') {
+ if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
}
// Single HTMLElement passed
- else if(elements instanceof HTMLElement) {
+ else if (elements instanceof HTMLElement) {
elements = [elements];
}
// No selector passed, possibly options as first argument
else if (!(elements instanceof NodeList) && typeof elements !== 'string') {
// If options are the first argument
- if(typeof options === 'undefined' && typeof elements === 'object') {
+ if (typeof options === 'undefined' && typeof elements === 'object') {
options = elements;
}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index e57c2b1a..c2411ea9 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -32,10 +32,12 @@
// Tooltips
@tooltip-bg: @controls-bg;
-@tooltip-border-color: @off-white;
+@tooltip-border-color: fade(@gray-dark, 10%);
+@tooltip-border-width: 1px;
+@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color;
@tooltip-color: @control-color;
@tooltip-padding: @control-spacing;
-@tooltip-arrow-size: 5px;
+@tooltip-arrow-size: 6px;
@tooltip-radius: 3px;
// Progress
@@ -331,32 +333,45 @@
opacity: 0;
background: @tooltip-bg;
- border: 1px solid @tooltip-border-color;
+ box-shadow: @tooltip-shadow;
border-radius: @tooltip-radius;
color: @tooltip-color;
font-size: @font-size-small;
line-height: 1.5;
font-weight: 600;
- transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
+ transform: translate(-50%, (@tooltip-padding * 3)) scale(.8);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
- // Arrow
- &::after {
+ // Arrows
+ &::after,
+ &::before {
content: '';
position: absolute;
- z-index: 1;
+ width: 0;
+ height: 0;
top: 100%;
left: 50%;
- display: block;
- width: 10px;
- height: 10px;
- background: @tooltip-bg;
- transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
- border: 1px solid @tooltip-border-color;
- border-width: 0 1px 1px 0;
+ transform: translateX(-50%);
}
+ // The border triangle
+ &::after {
+ @border-arrow-size: (@tooltip-arrow-size + (@tooltip-border-width * 1));
+ bottom: -(@border-arrow-size + @tooltip-border-width);
+ border-right: @border-arrow-size solid transparent;
+ border-top: @border-arrow-size solid @tooltip-border-color;
+ border-left: @border-arrow-size solid transparent;
+ z-index: 1;
+ }
+ // The background triangle
+ &::before {
+ bottom: -@tooltip-arrow-size;
+ border-right: @tooltip-arrow-size solid transparent;
+ border-top: @tooltip-arrow-size solid @tooltip-bg;
+ border-left: @tooltip-arrow-size solid transparent;
+ z-index: 2;
+ }
}
button:hover .plyr-tooltip,
button.tab-focus:focus .plyr-tooltip {
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 08485efa..7cefca3a 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -44,15 +44,18 @@ $control-color-hover: null !default;
// Tooltips
$tooltip-bg: $controls-bg !default;
+$tooltip-border-color: transparentize(@gray-dark, .1) !default;
+$tooltip-border-width: 1px;
+$tooltip-shadow: 0 0 5px $tooltip-border-color, 0 0 0 $tooltip-border-width $tooltip-border-color;
$tooltip-color: $control-color !default;
$tooltip-padding: $control-spacing !default;
-$tooltip-arrow-size: 5px !default;
+$tooltip-arrow-size: 6px !default;
$tooltip-radius: 3px !default;
// Progress
-$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default;
+$progress-bg: transparentize($gray, .2) !default;
$progress-playing-bg: $blue !default;
-$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default;
+$progress-buffered-bg: transparentize($gray, .25) !default;
$progress-loading-size: 40px !default;
$progress-loading-bg: rgba(0,0,0, .15) !default;
@@ -334,29 +337,44 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
opacity: 0;
background: $tooltip-bg;
+ box-shadow: $tooltip-shadow;
border-radius: $tooltip-radius;
color: $tooltip-color;
font-size: $font-size-small;
line-height: 1.5;
font-weight: 600;
- transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
+ transform: translate(-50%, ($tooltip-padding * 3)) scale(.8);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
- &::after {
+ // Arrows
+ &::after,
+ &::before {
content: '';
- display: block;
position: absolute;
- left: 50%;
- bottom: -$tooltip-arrow-size;
- margin-left: -$tooltip-arrow-size;
width: 0;
height: 0;
- transition: inherit;
- border-style: solid;
- border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size;
- border-color: $controls-bg transparent transparent;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ // The border triangle
+ &::after {
+ $border-arrow-size: ($tooltip-arrow-size + ($tooltip-border-width * 1));
+ bottom: -($border-arrow-size + $tooltip-border-width);
+ border-right: $border-arrow-size solid transparent;
+ border-top: $border-arrow-size solid $tooltip-border-color;
+ border-left: $border-arrow-size solid transparent;
+ z-index: 1;
+ }
+ // The background triangle
+ &::before {
+ bottom: -$tooltip-arrow-size;
+ border-right: $tooltip-arrow-size solid transparent;
+ border-top: $tooltip-arrow-size solid $tooltip-bg;
+ border-left: $tooltip-arrow-size solid transparent;
+ z-index: 2;
}
}
button:hover .plyr-tooltip,