From 2da474ba7017d6990eebba89e094003d04a074e1 Mon Sep 17 00:00:00 2001 From: Raccoon Date: Wed, 22 Aug 2018 09:18:13 +0800 Subject: [PATCH] feat: lecture note --- dist/hahow-plyr.css | 2 +- dist/plyr.css | 2 +- dist/plyr.js | 5932 +++++++++++++------------ dist/plyr.js.map | 2 +- dist/plyr.min.js | 2 +- dist/plyr.min.js.map | 2 +- dist/plyr.polyfilled.js | 6009 ++++++++++++++------------ dist/plyr.polyfilled.js.map | 2 +- dist/plyr.polyfilled.min.js | 2 +- dist/plyr.polyfilled.min.js.map | 2 +- dist/plyr.svg | 2 +- src/js/controls.js | 5 + src/js/hahowCustomControl.js | 13 + src/js/plugins/lectureNote.js | 344 ++ src/js/plyr.js | 10 +- src/js/source.js | 2 + src/sass/components/sliders.scss | 50 + src/sass/hahow-plyr.scss | 128 + src/sass/lib/mixins.scss | 26 + src/sprite/plyr-add-lecture-note.svg | 1 + src/sprite/plyr-trash.svg | 1 + 21 files changed, 6948 insertions(+), 5591 deletions(-) create mode 100644 src/js/plugins/lectureNote.js create mode 100644 src/sprite/plyr-add-lecture-note.svg create mode 100644 src/sprite/plyr-trash.svg diff --git a/dist/hahow-plyr.css b/dist/hahow-plyr.css index 902a61455..56d329466 100644 --- a/dist/hahow-plyr.css +++ b/dist/hahow-plyr.css @@ -1 +1 @@ -@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:24px;left:0;padding:10px;position:absolute;text-align:center;transform:translateY(-40px);transition:transform .4s ease-in-out;width:100%}.plyr__captions .plyr__caption{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions .plyr__caption div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:24px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr__caption_position__top{bottom:inherit;top:0}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}.plyr__captions.plyr__caption_position__top{transform:none}.plyr__control{background:0 0;border:0;border-radius:0;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:10px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00bea4;color:#fff}.plyr__control--overlaid{background:rgba(0,190,164,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#00bea4}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0;margin-right:auto}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:35px 10px 10px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:2}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#00bea4;color:#fff}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__controls:empty{display:none}.plyr__controls:empty~.plyr__captions{transform:translateY(0)}.plyr__video-embed{height:0;padding-bottom:56.25%;position:relative}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:rgba(0,0,0,.75);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#fff;font-size:16px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(0,0,0,.75);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container ul{list-style:none;margin:0;overflow:hidden;padding:10px}.plyr__menu__container ul li{margin-top:2px}.plyr__menu__container ul li:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#fff;display:flex;font-size:14px;padding:5px 20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:40px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(255,255,255,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:10px;margin-bottom:5px;padding-left:40px;position:relative;width:calc(100% - 20px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(255,255,255,.8);left:10px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:5px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:10px}.plyr__menu__container label.plyr__control input[type=radio]+span{background:rgba(0,0,0,.1);border-radius:100%;display:block;flex-shrink:0;height:16px;margin-right:10px;position:relative;transition:all .3s ease;width:16px}.plyr__menu__container label.plyr__control input[type=radio]+span::after{background:#fff;border-radius:100%;content:'';height:6px;left:5px;opacity:0;position:absolute;top:5px;transform:scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#00bea4}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{opacity:1;transform:scale(1)}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-10px;overflow:hidden;padding-left:35px;pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#00bea4;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr__poster{background-color:#000;background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1;pointer-events:none}.plyr__time{font-size:14px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(0,0,0,.75);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#fff;font-size:14px;font-weight:500;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;white-space:nowrap;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(0,0,0,.75);bottom:-4px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:19px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:19px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__progress{display:flex;flex:1;left:7px;margin-right:14px;position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-7px;margin-right:-7px;width:calc(100% + 14px)}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:14px;left:0}.plyr__progress__buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin-top:-3px;padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress__buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress__buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.6) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.6) 50%,rgba(47,52,61,.6) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:rgba(183,197,205,.66)}.plyr__volume{flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:50px}}@media (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume{display:none!important}.plyr--is-ios.plyr--vimeo [data-plyr=mute]{display:none!important}.plyr--logo{position:absolute;right:20px;top:15px;z-index:1}.plyr--logo a,.plyr--logo a:active,.plyr--logo a:focus,.plyr--logo a:hover{border:0;text-decoration:none;outline:0;transition:none}.plyr--logo a::after,.plyr--logo a:active::after,.plyr--logo a:focus::after,.plyr--logo a:hover::after{content:none;height:auto}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr:fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen video{height:100%}.plyr__outer-container:-moz-full-screen video{height:100%}.plyr__outer-container:-ms-fullscreen video{height:100%}.plyr__outer-container:fullscreen video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr__outer-container:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr__outer-container:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr__outer-container:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr__captions{font-size:21px}.plyr__outer-container:-moz-full-screen .plyr__captions{font-size:21px}.plyr__outer-container:-ms-fullscreen .plyr__captions{font-size:21px}.plyr__outer-container:fullscreen .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen .plyr video{height:100%}.plyr__outer-container:-moz-full-screen .plyr video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr video{height:100%}.plyr__outer-container:fullscreen .plyr video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:-moz-full-screen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:-ms-fullscreen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:fullscreen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:-moz-full-screen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:-ms-fullscreen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:fullscreen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen .plyr video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen video{height:100%}.plyr__outer-container:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-moz-full-screen .plyr__captions{font-size:21px}}.plyr__outer-container:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen .plyr video{height:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-moz-full-screen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-moz-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr__outer-container:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen .plyr video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-ms-fullscreen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback video{height:100%}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:none}.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:block!important}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads::after{background:rgba(47,52,61,.8);border-radius:2px;bottom:10px;color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;z-index:3}.plyr__ads::after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:6px;left:0;margin:-3px 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important}.plyr__controls{display:flex;flex-flow:column}.plyr__controls-top{width:100%}.plyr__controls-bottom{display:flex;justify-content:space-between;width:100%}.plyr__controls-bottom-left,.plyr__controls-bottom-right{align-items:center;display:flex}.plyr__menu__container{border-radius:0}.plyr__menu__container ul{padding:0}.plyr__menu__container ul li{border-bottom:2px solid rgba(255,255,255,.43);margin:0}.plyr__menu__container .subpanel ul li{border-bottom:none}.plyr__menu__container .plyr__control{font-size:16px;font-weight:600;padding:10px 25px 10px 15px}.plyr__menu__container .plyr__control .plyr__menu__value{font-weight:500}.plyr__menu__container .plyr__control--back{margin:0;padding:10px 15px 10px 25px;width:100%}.plyr__menu__container .plyr__control--back::before{margin-top:0}.plyr__tooltip{font-size:14px;border-radius:0}.plyr__control[data-plyr=rewind] .plyr__tooltip{transform:translate(-25%,10px) scale(1)}.plyr__control[data-plyr=rewind] .plyr__tooltip::before{left:25%}.plyr__control[data-plyr=rewind]:hover .plyr__tooltip{transform:translate(-25%,0) scale(1)}.plyr__control[data-plyr=rewind]:hover .plyr__tooltip::before{left:25%}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:inherit}}@media (max-width:479px){.plyr__time+.plyr__time{display:none}}.plyr__outer-container{height:100%}.plyr__outer-container .plyr{height:100%}.plyr__outer-container .plyr .plyr__video-wrapper{height:100%}.plyr__outer-container .plyr .plyr__video-wrapper video{height:100%}.plyr__volume{max-width:100px}@media (min-width:480px){.plyr__volume{max-width:100px}}@media (min-width:768px){.plyr__volume{max-width:100px}}.plyr__captions{font-size:24px!important}.plyr .plyr__poster{display:none}.plyr.plyr--full-ui .plyr__poster{display:block}.plyr.plyr--full-ui video::cue{display:none!important} \ No newline at end of file +@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:24px;left:0;padding:10px;position:absolute;text-align:center;transform:translateY(-40px);transition:transform .4s ease-in-out;width:100%}.plyr__captions .plyr__caption{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions .plyr__caption div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:24px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr__caption_position__top{bottom:inherit;top:0}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}.plyr__captions.plyr__caption_position__top{transform:none}.plyr__control{background:0 0;border:0;border-radius:0;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:10px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00bea4;color:#fff}.plyr__control--overlaid{background:rgba(0,190,164,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#00bea4}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0;margin-right:auto}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:35px 10px 10px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:2}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#00bea4;color:#fff}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__controls:empty{display:none}.plyr__controls:empty~.plyr__captions{transform:translateY(0)}.plyr__video-embed{height:0;padding-bottom:56.25%;position:relative}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:rgba(0,0,0,.75);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#fff;font-size:16px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(0,0,0,.75);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container ul{list-style:none;margin:0;overflow:hidden;padding:10px}.plyr__menu__container ul li{margin-top:2px}.plyr__menu__container ul li:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#fff;display:flex;font-size:14px;padding:5px 20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:40px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(255,255,255,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:10px;margin-bottom:5px;padding-left:40px;position:relative;width:calc(100% - 20px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(255,255,255,.8);left:10px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:5px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:10px}.plyr__menu__container label.plyr__control input[type=radio]+span{background:rgba(0,0,0,.1);border-radius:100%;display:block;flex-shrink:0;height:16px;margin-right:10px;position:relative;transition:all .3s ease;width:16px}.plyr__menu__container label.plyr__control input[type=radio]+span::after{background:#fff;border-radius:100%;content:'';height:6px;left:5px;opacity:0;position:absolute;top:5px;transform:scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#00bea4}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{opacity:1;transform:scale(1)}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-10px;overflow:hidden;padding-left:35px;pointer-events:none}.plyr--full-ui .plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui .plyr__progress input[type=range]::-webkit-slider-thumb{background:#ffb115;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui .plyr__progress input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;-moz-user-select:none;user-select:none}.plyr--full-ui .plyr__progress input[type=range]::-moz-range-thumb{background:#ffb115;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui .plyr__progress input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui .plyr__progress input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui .plyr__progress input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none}.plyr--full-ui .plyr__progress input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui .plyr__progress input[type=range]::-ms-thumb{background:#ffb115;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#00bea4;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 3px rgba(0,190,164,.35);outline:0}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr__poster{background-color:#000;background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1;pointer-events:none}.plyr__time{font-size:14px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(0,0,0,.75);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#fff;font-size:14px;font-weight:500;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;white-space:nowrap;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(0,0,0,.75);bottom:-4px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:19px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:19px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__progress{display:flex;flex:1;left:7px;margin-right:14px;position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-7px;margin-right:-7px;width:calc(100% + 14px)}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:14px;left:0}.plyr__progress__buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin-top:-3px;padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress__buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress__buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.6) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.6) 50%,rgba(47,52,61,.6) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:rgba(183,197,205,.66)}.plyr__volume{flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:50px}}@media (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume{display:none!important}.plyr--is-ios.plyr--vimeo [data-plyr=mute]{display:none!important}.plyr--logo{position:absolute;right:20px;top:15px;z-index:1}.plyr--logo a,.plyr--logo a:active,.plyr--logo a:focus,.plyr--logo a:hover{border:0;text-decoration:none;outline:0;transition:none}.plyr--logo a::after,.plyr--logo a:active::after,.plyr--logo a:focus::after,.plyr--logo a:hover::after{content:none;height:auto}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr:fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen video{height:100%}.plyr__outer-container:-moz-full-screen video{height:100%}.plyr__outer-container:-ms-fullscreen video{height:100%}.plyr__outer-container:fullscreen video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr__outer-container:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr__outer-container:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr__outer-container:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr__captions{font-size:21px}.plyr__outer-container:-moz-full-screen .plyr__captions{font-size:21px}.plyr__outer-container:-ms-fullscreen .plyr__captions{font-size:21px}.plyr__outer-container:fullscreen .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen .plyr video{height:100%}.plyr__outer-container:-moz-full-screen .plyr video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr video{height:100%}.plyr__outer-container:fullscreen .plyr video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:-moz-full-screen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:-ms-fullscreen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:fullscreen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:-moz-full-screen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:-ms-fullscreen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:fullscreen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen .plyr video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen video{height:100%}.plyr__outer-container:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-moz-full-screen .plyr__captions{font-size:21px}}.plyr__outer-container:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen .plyr video{height:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-moz-full-screen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-moz-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr__outer-container:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen .plyr video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-ms-fullscreen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback video{height:100%}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:none}.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:block!important}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads::after{background:rgba(47,52,61,.8);border-radius:2px;bottom:10px;color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;z-index:3}.plyr__ads::after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:6px;left:0;margin:-3px 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important}.plyr__controls{display:flex;flex-flow:column}.plyr__controls-top{width:100%}.plyr__controls-bottom{display:flex;justify-content:space-between;width:100%}.plyr__controls-bottom-left,.plyr__controls-bottom-right{align-items:center;display:flex}.plyr__menu__container{border-radius:0}.plyr__menu__container ul{padding:0}.plyr__menu__container ul li{border-bottom:2px solid rgba(255,255,255,.43);margin:0}.plyr__menu__container .subpanel ul li{border-bottom:none}.plyr__menu__container .plyr__control{font-size:16px;font-weight:600;padding:10px 25px 10px 15px}.plyr__menu__container .plyr__control .plyr__menu__value{font-weight:500}.plyr__menu__container .plyr__control--back{margin:0;padding:10px 15px 10px 25px;width:100%}.plyr__menu__container .plyr__control--back::before{margin-top:0}.plyr__tooltip{font-size:14px;border-radius:0}.plyr__control[data-plyr=rewind] .plyr__tooltip{transform:translate(-25%,10px) scale(1)}.plyr__control[data-plyr=rewind] .plyr__tooltip::before{left:25%}.plyr__control[data-plyr=rewind]:hover .plyr__tooltip{transform:translate(-25%,0) scale(1)}.plyr__control[data-plyr=rewind]:hover .plyr__tooltip::before{left:25%}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:inherit}}@media (max-width:479px){.plyr__time+.plyr__time{display:none}}.plyr__outer-container{height:100%}.plyr__outer-container .plyr{height:100%}.plyr__outer-container .plyr .plyr__video-wrapper{height:100%}.plyr__outer-container .plyr .plyr__video-wrapper video{height:100%}.plyr__volume{max-width:100px}@media (min-width:480px){.plyr__volume{max-width:100px}}@media (min-width:768px){.plyr__volume{max-width:100px}}.plyr__captions{font-size:24px!important}.plyr .plyr__poster{display:none}.plyr.plyr--full-ui .plyr__poster{display:block}.plyr.plyr--full-ui video::cue{display:none!important}.plyr__progress input[type=range]{width:100%}.plyr__control.plyr__add-lecture-note{align-items:center;display:flex;justify-content:space-around}.plyr__control.plyr__add-lecture-note span{line-height:1}.plyr__control.plyr__add-lecture-note svg{margin-right:2px}.plyr__control.plyr__add-lecture-note.disable{color:#aaa}.plyr__control.plyr__add-lecture-note.disable:hover{background:0 0;color:#aaa}.plyr__control.plyr__add-lecture-note.hidden{display:none}.plyr__lecture-note-container{height:10px;left:-2px;position:absolute;top:-4px;width:calc(100% - 14px);z-index:10}.plyr__lecture-note-container.hidden{display:none}.plyr__lecture-note-container .lecture-note{position:absolute}.lecture-note .lecture-note__mark{background-color:#ffb115;cursor:pointer;display:inline-block;height:6px;position:absolute;top:11px;width:3px;z-index:5}.lecture-note .lecture-note__mark:hover{background-color:#ffb115;border-radius:50%;transform:scale(2.5);transition:transform 250ms ease;width:6px}.lecture-note__content-container{align-items:center;background-color:#fff;border-radius:5px;bottom:0;box-shadow:0 0 0 rgba(0,0,0,.67);display:none;left:0;padding:2px 4px 2px 2px;position:absolute;z-index:10}.lecture-note__content-container svg{color:#000;height:18px;width:18px}.lecture-note__content-container .lecture-note__content-textarea{display:none}.lecture-note__content-container .lecture-note__content-show-text{display:inline-block;min-width:160px;word-break:break-all}.lecture-note__content-container.lecture-note__content-container--edit .lecture-note__content-textarea{display:inline-block}.lecture-note__content-container.lecture-note__content-container--edit .lecture-note__content-show-text{display:none}.lecture-note__content-container.lecture-note__content-container--edit,.lecture-note__content-container.lecture-note__content-container--show{display:flex}.lecture-note__content-show-text{color:#000;margin:2px 5px;text-align:left}.lecture-note__content-textarea{border:none 0;color:#000;min-width:160px;outline:0;overflow:hidden;resize:none}.lecture-note__trash-icon-wrapper{line-height:1} \ No newline at end of file diff --git a/dist/plyr.css b/dist/plyr.css index c8734a019..b9f2050d4 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:14px;left:0;padding:10px;position:absolute;text-align:center;transform:translateY(-40px);transition:transform .4s ease-in-out;width:100%}.plyr__captions .plyr__caption{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions .plyr__caption div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:16px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr__caption_position__top{bottom:inherit;top:0}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}.plyr__captions.plyr__caption_position__top{transform:none}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr__control--overlaid{background:rgba(26,175,255,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#1aafff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0;margin-right:auto}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:35px 10px 10px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:2}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__controls:empty{display:none}.plyr__controls:empty~.plyr__captions{transform:translateY(0)}.plyr__video-embed{height:0;padding-bottom:56.25%;position:relative}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:16px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(255,255,255,.9);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container ul{list-style:none;margin:0;overflow:hidden;padding:7px}.plyr__menu__container ul li{margin-top:2px}.plyr__menu__container ul li:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4f5b5f;display:flex;font-size:14px;padding:4px 14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(79,91,95,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:7px;margin-bottom:3px;padding-left:28px;position:relative;width:calc(100% - 14px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(79,91,95,.8);left:7px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:4px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:7px}.plyr__menu__container label.plyr__control input[type=radio]+span{background:rgba(0,0,0,.1);border-radius:100%;display:block;flex-shrink:0;height:16px;margin-right:10px;position:relative;transition:all .3s ease;width:16px}.plyr__menu__container label.plyr__control input[type=radio]+span::after{background:#fff;border-radius:100%;content:'';height:6px;left:5px;opacity:0;position:absolute;top:5px;transform:scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#1aafff}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{opacity:1;transform:scale(1)}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-7px;overflow:hidden;padding-left:25px;pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#1aafff;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr__poster{background-color:#000;background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1;pointer-events:none}.plyr__time{font-size:14px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(255,255,255,.9);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:14px;font-weight:500;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;white-space:nowrap;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(255,255,255,.9);bottom:-4px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__progress{display:flex;flex:1;left:7px;margin-right:14px;position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-7px;margin-right:-7px;width:calc(100% + 14px)}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:14px;left:0}.plyr__progress__buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin-top:-3px;padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress__buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress__buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.6) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.6) 50%,rgba(47,52,61,.6) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:rgba(183,197,205,.66)}.plyr__volume{flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:50px}}@media (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume{display:none!important}.plyr--is-ios.plyr--vimeo [data-plyr=mute]{display:none!important}.plyr--logo{position:absolute;right:20px;top:15px;z-index:1}.plyr--logo a,.plyr--logo a:active,.plyr--logo a:focus,.plyr--logo a:hover{border:0;text-decoration:none;outline:0;transition:none}.plyr--logo a::after,.plyr--logo a:active::after,.plyr--logo a:focus::after,.plyr--logo a:hover::after{content:none;height:auto}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr:fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen video{height:100%}.plyr__outer-container:-moz-full-screen video{height:100%}.plyr__outer-container:-ms-fullscreen video{height:100%}.plyr__outer-container:fullscreen video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr__outer-container:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr__outer-container:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr__outer-container:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr__captions{font-size:21px}.plyr__outer-container:-moz-full-screen .plyr__captions{font-size:21px}.plyr__outer-container:-ms-fullscreen .plyr__captions{font-size:21px}.plyr__outer-container:fullscreen .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen .plyr video{height:100%}.plyr__outer-container:-moz-full-screen .plyr video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr video{height:100%}.plyr__outer-container:fullscreen .plyr video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:-moz-full-screen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:-ms-fullscreen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:fullscreen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:-moz-full-screen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:-ms-fullscreen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:fullscreen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen .plyr video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen video{height:100%}.plyr__outer-container:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-moz-full-screen .plyr__captions{font-size:21px}}.plyr__outer-container:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen .plyr video{height:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-moz-full-screen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-moz-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr__outer-container:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen .plyr video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-ms-fullscreen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback video{height:100%}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:none}.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:block!important}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads::after{background:rgba(47,52,61,.8);border-radius:2px;bottom:10px;color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;z-index:3}.plyr__ads::after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:6px;left:0;margin:-3px 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important} \ No newline at end of file +@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:14px;left:0;padding:10px;position:absolute;text-align:center;transform:translateY(-40px);transition:transform .4s ease-in-out;width:100%}.plyr__captions .plyr__caption{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions .plyr__caption div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:16px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr__caption_position__top{bottom:inherit;top:0}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}.plyr__captions.plyr__caption_position__top{transform:none}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr__control--overlaid{background:rgba(26,175,255,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#1aafff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0;margin-right:auto}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:35px 10px 10px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:2}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__controls:empty{display:none}.plyr__controls:empty~.plyr__captions{transform:translateY(0)}.plyr__video-embed{height:0;padding-bottom:56.25%;position:relative}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:16px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(255,255,255,.9);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container ul{list-style:none;margin:0;overflow:hidden;padding:7px}.plyr__menu__container ul li{margin-top:2px}.plyr__menu__container ul li:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4f5b5f;display:flex;font-size:14px;padding:4px 14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(79,91,95,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:7px;margin-bottom:3px;padding-left:28px;position:relative;width:calc(100% - 14px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(79,91,95,.8);left:7px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:4px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:7px}.plyr__menu__container label.plyr__control input[type=radio]+span{background:rgba(0,0,0,.1);border-radius:100%;display:block;flex-shrink:0;height:16px;margin-right:10px;position:relative;transition:all .3s ease;width:16px}.plyr__menu__container label.plyr__control input[type=radio]+span::after{background:#fff;border-radius:100%;content:'';height:6px;left:5px;opacity:0;position:absolute;top:5px;transform:scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#1aafff}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{opacity:1;transform:scale(1)}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-7px;overflow:hidden;padding-left:25px;pointer-events:none}.plyr--full-ui .plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui .plyr__progress input[type=range]::-webkit-slider-thumb{background:#ffb115;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui .plyr__progress input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;-moz-user-select:none;user-select:none}.plyr--full-ui .plyr__progress input[type=range]::-moz-range-thumb{background:#ffb115;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui .plyr__progress input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui .plyr__progress input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui .plyr__progress input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none}.plyr--full-ui .plyr__progress input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui .plyr__progress input[type=range]::-ms-thumb{background:#ffb115;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#1aafff;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr__poster{background-color:#000;background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1;pointer-events:none}.plyr__time{font-size:14px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(255,255,255,.9);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:14px;font-weight:500;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;white-space:nowrap;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(255,255,255,.9);bottom:-4px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__progress{display:flex;flex:1;left:7px;margin-right:14px;position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-7px;margin-right:-7px;width:calc(100% + 14px)}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:14px;left:0}.plyr__progress__buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin-top:-3px;padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress__buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress__buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.6) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.6) 50%,rgba(47,52,61,.6) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:rgba(183,197,205,.66)}.plyr__volume{flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:50px}}@media (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume{display:none!important}.plyr--is-ios.plyr--vimeo [data-plyr=mute]{display:none!important}.plyr--logo{position:absolute;right:20px;top:15px;z-index:1}.plyr--logo a,.plyr--logo a:active,.plyr--logo a:focus,.plyr--logo a:hover{border:0;text-decoration:none;outline:0;transition:none}.plyr--logo a::after,.plyr--logo a:active::after,.plyr--logo a:focus::after,.plyr--logo a:hover::after{content:none;height:auto}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr:fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen video{height:100%}.plyr__outer-container:-moz-full-screen video{height:100%}.plyr__outer-container:-ms-fullscreen video{height:100%}.plyr__outer-container:fullscreen video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr__outer-container:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr__outer-container:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr__outer-container:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr__captions{font-size:21px}.plyr__outer-container:-moz-full-screen .plyr__captions{font-size:21px}.plyr__outer-container:-ms-fullscreen .plyr__captions{font-size:21px}.plyr__outer-container:fullscreen .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen .plyr video{height:100%}.plyr__outer-container:-moz-full-screen .plyr video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr video{height:100%}.plyr__outer-container:fullscreen .plyr video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:-moz-full-screen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:-ms-fullscreen .plyr.plyr--hide-controls{cursor:none}.plyr__outer-container:fullscreen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:-moz-full-screen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:-ms-fullscreen .plyr .plyr__captions{font-size:21px}.plyr__outer-container:fullscreen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-webkit-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-webkit-full-screen .plyr video{height:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-webkit-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-webkit-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-webkit-full-screen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-webkit-full-screen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-webkit-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen video{height:100%}.plyr__outer-container:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-moz-full-screen .plyr__captions{font-size:21px}}.plyr__outer-container:-moz-full-screen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-moz-full-screen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-moz-full-screen .plyr video{height:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-moz-full-screen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-moz-full-screen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-moz-full-screen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-moz-full-screen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-moz-full-screen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-moz-full-screen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr__outer-container:-ms-fullscreen .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container:-ms-fullscreen .plyr{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr__outer-container:-ms-fullscreen .plyr video{height:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container:-ms-fullscreen .plyr .plyr__video-embed{overflow:visible}.plyr__outer-container:-ms-fullscreen .plyr.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container:-ms-fullscreen .plyr.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container:-ms-fullscreen .plyr .plyr__captions{font-size:21px}}.plyr__outer-container:-ms-fullscreen .plyr .plyr__control[data-plyr=zoom]{display:none}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback video{height:100%}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr__outer-container .plyr__outer-container.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:none}.plyr--fullscreen-fallback .plyr__control[data-plyr=zoom]{display:block!important}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads::after{background:rgba(47,52,61,.8);border-radius:2px;bottom:10px;color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;z-index:3}.plyr__ads::after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:6px;left:0;margin:-3px 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important} \ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index 8be83699f..f48f5c187 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1566,6 +1566,11 @@ typeof navigator === "object" && (function (global, factory) { icon = 'play'; break; + case 'add-lecture-note': + type = 'add-lecture-note'; + label = '筆記標註'; + icon = 'add-lecture-note'; + default: label = type; icon = buttonType; @@ -4103,1769 +4108,1765 @@ typeof navigator === "object" && (function (global, factory) { return Fullscreen; }(); - // ========================================================================== - // Load image avoiding xhr/fetch CORS issues - // Server status can't be obtained this way unfortunately, so this uses "naturalWidth" to determine if the image has loaded - // By default it checks if it is at least 1px, but you can add a second argument to change this - // ========================================================================== + var hahow = { + createControls: function createControls(data) { + var _this = this; - function loadImage(src) { - var minWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; + // Create the container + var container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper)); - return new Promise(function (resolve, reject) { - var image = new Image(); + var topLayer = createElement('div', getAttributesFromSelector(this.config.selectors.controls.layer.topLayer)); + var bottomLayer = createElement('div', getAttributesFromSelector(this.config.selectors.controls.layer.bottomLayer)); + var bottomLeft = createElement('div', getAttributesFromSelector(this.config.selectors.controls.bottom.left)); + var bottomRight = createElement('div', getAttributesFromSelector(this.config.selectors.controls.bottom.right)); - var handler = function handler() { - delete image.onload; - delete image.onerror; - (image.naturalWidth >= minWidth ? resolve : reject)(image); - }; + bottomLayer.appendChild(bottomLeft); + bottomLayer.appendChild(bottomRight); + container.appendChild(topLayer); + container.appendChild(bottomLayer); - Object.assign(image, { onload: handler, onerror: handler, src: src }); - }); - } + // Rewind button + bottomLeft.appendChild(controls.createButton.call(this, 'rewind')); - // ========================================================================== + // Play/Pause button + bottomLeft.appendChild(controls.createButton.call(this, 'play')); - var ui = { - addStyleHook: function addStyleHook() { - toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true); - toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui); - }, - addStylehookToFullscreenContainer: function addStylehookToFullscreenContainer() { - // append plyr__outer-container class name to outer container - if (this.config.fullscreenContainer) { - toggleClass(this.config.fullscreenContainer, this.config.classNames.outerContainer, true); - } - }, + // Fast forward button + bottomLeft.appendChild(controls.createButton.call(this, 'fast-forward')); + // Progress + var progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress)); - // Toggle native HTML5 media controls - toggleNativeControls: function toggleNativeControls() { - var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + // Seek range slider + progress.appendChild(controls.createRange.call(this, 'seek', { + id: 'plyr-seek-' + data.id + })); - if (toggle && this.isHTML5) { - this.media.setAttribute('controls', ''); - } else { - this.media.removeAttribute('controls'); - } - }, + // Buffer progress + progress.appendChild(controls.createProgress.call(this, 'buffer')); + // TODO: Add loop display indicator - // Setup the UI - build: function build() { - var _this = this; + // Seek tooltip + if (this.config.tooltips.seek) { + var tooltip = createElement('span', { + class: this.config.classNames.tooltip + }, '00:00'); - // Re-attach media element listeners - // TODO: Use event bubbling? - this.listeners.media(); + progress.appendChild(tooltip); + this.elements.display.seekTooltip = tooltip; + } - // Don't setup interface if no support - if (!this.supported.ui) { - this.debug.warn('Basic support only for ' + this.provider + ' ' + this.type); + this.elements.progress = progress; + topLayer.appendChild(this.elements.progress); - // Restore native controls - ui.toggleNativeControls.call(this, true); + // Media current time display + bottomLeft.appendChild(controls.createTime.call(this, 'currentTime')); - this.ready = true; + // Media duration display + bottomLeft.appendChild(controls.createTime.call(this, 'duration')); - // Bail - return; - } + // Add lecture note button + var addLecturneNoteBtn = controls.createButton.call(this, 'add-lecture-note', { + class: 'plyr__add-lecture-note hidden' + }); + addLecturneNoteBtn.appendChild(createElement('span', {}, '筆記標註')); + bottomRight.appendChild(addLecturneNoteBtn); - // Inject custom controls if not present - if (!is.element(this.elements.controls)) { - // Inject custom controls - controls.inject.call(this); + addLecturneNoteBtn.addEventListener('click', function (e) { + _this.pause(); + _this.lectureNote.addLectureNote(); + e.stopPropagation(); + }); - // Re-attach control listeners - this.listeners.controls(); - } + // Toggle mute button + bottomRight.appendChild(controls.createButton.call(this, 'mute')); - // Remove native controls - ui.toggleNativeControls.call(this); + // Volume range control + var volume = createElement('div', { + class: 'plyr__volume' + }); - // Setup captions for HTML5 - if (this.isHTML5) { - captions.setup.call(this); - } + // Set the attributes + var attributes = { + max: 1, + step: 0.05, + value: this.config.volume + }; - // Reset volume - this.volume = null; + // Create the volume range slider + volume.appendChild(controls.createRange.call(this, 'volume', extend(attributes, { + id: 'plyr-volume-' + data.id + }))); - // Reset mute state - this.muted = null; + this.elements.volume = volume; - // Reset speed - this.speed = null; + bottomRight.appendChild(volume); - // Reset loop state - this.loop = null; + // Settings button / menu + var menu = createElement('div', { + class: 'plyr__menu', + hidden: '' + }); - // Reset quality setting - this.quality = null; + menu.appendChild(controls.createButton.call(this, 'settings', { + id: 'plyr-settings-toggle-' + data.id, + 'aria-haspopup': true, + 'aria-controls': 'plyr-settings-' + data.id, + 'aria-expanded': false + })); - // Reset volume display - controls.updateVolume.call(this); + var form = createElement('form', { + class: 'plyr__menu__container', + id: 'plyr-settings-' + data.id, + hidden: '', + 'aria-labelled-by': 'plyr-settings-toggle-' + data.id, + role: 'tablist', + tabindex: -1 + }); - // Reset time display - controls.timeUpdate.call(this); + var inner = createElement('div'); - // Update the UI - ui.checkPlaying.call(this); + var home = createElement('div', { + id: 'plyr-settings-' + data.id + '-home', + 'aria-labelled-by': 'plyr-settings-toggle-' + data.id, + role: 'tabpanel' + }); - // Check for picture-in-picture support - toggleClass(this.elements.container, this.config.classNames.pip.supported, support.pip && this.isHTML5 && this.isVideo); + // Create the tab list + var tabs = createElement('ul', { + role: 'tablist' + }); - // Check for airplay support - toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5); + // Build the tabs + this.config.settings.forEach(function (type) { + var tab = createElement('li', { + role: 'tab', + hidden: '' + }); - // Add iOS class - toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos); + var button = createElement('button', extend(getAttributesFromSelector(_this.config.selectors.buttons.settings), { + type: 'button', + class: _this.config.classNames.control + ' ' + _this.config.classNames.control + '--forward', + id: 'plyr-settings-' + data.id + '-' + type + '-tab', + 'aria-haspopup': true, + 'aria-controls': 'plyr-settings-' + data.id + '-' + type, + 'aria-expanded': false + }), i18n.get(type, _this.config)); - // Add touch class - toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch); + var value = createElement('span', { + class: _this.config.classNames.menu.value + }); - // Ready for API calls - this.ready = true; + // Speed contains HTML entities + value.innerHTML = data[type]; - // Ready event at end of execution stack - setTimeout(function () { - triggerEvent.call(_this, _this.media, 'ready'); - }, 0); + button.appendChild(value); + tab.appendChild(button); + tabs.appendChild(tab); - // Set the title - ui.setTitle.call(this); + _this.elements.settings.tabs[type] = tab; + }); - // Assure the poster image is set, if the property was added before the element was created - if (this.poster) { - ui.setPoster.call(this, this.poster, false).catch(function () {}); - } + home.appendChild(tabs); + inner.appendChild(home); - // Manually set the duration if user has overridden it. - // The event listeners for it doesn't get called if preload is disabled (#701) - if (this.config.duration) { - controls.durationUpdate.call(this); - } - }, + // Build the panes + this.config.settings.forEach(function (type) { + var pane = createElement('div', { + id: 'plyr-settings-' + data.id + '-' + type, + class: 'subpanel', + hidden: '', + 'aria-labelled-by': 'plyr-settings-' + data.id + '-' + type + '-tab', + role: 'tabpanel', + tabindex: -1 + }); + var back = createElement('button', { + type: 'button', + class: _this.config.classNames.control + ' ' + _this.config.classNames.control + '--back', + 'aria-haspopup': true, + 'aria-controls': 'plyr-settings-' + data.id + '-home', + 'aria-expanded': false + }, i18n.get(type, _this.config)); - // Setup aria attribute for play and iframe title - setTitle: function setTitle() { - // Find the current text - var label = i18n.get('play', this.config); + pane.appendChild(back); - // If there's a media title set, use that for the label - if (is.string(this.config.title) && !is.empty(this.config.title)) { - label += ', ' + this.config.title; - } + var options = createElement('ul'); - // If there's a play button, set label - Array.from(this.elements.buttons.play || []).forEach(function (button) { - button.setAttribute('aria-label', label); + pane.appendChild(options); + inner.appendChild(pane); + + _this.elements.settings.panes[type] = pane; }); - // Set iframe title - // https://github.com/sampotts/plyr/issues/124 - if (this.isEmbed) { - var iframe = getElement.call(this, 'iframe'); + form.appendChild(inner); + menu.appendChild(form); + bottomRight.appendChild(menu); - if (!is.element(iframe)) { - return; - } + this.elements.settings.form = form; + this.elements.settings.menu = menu; - // Default to media type - var title = !is.empty(this.config.title) ? this.config.title : 'video'; - var format = i18n.get('frameTitle', this.config); + bottomRight.appendChild(controls.createButton.call(this, 'zoom')); - iframe.setAttribute('title', format.replace('{title}', title)); + // Toggle fullscreen button + bottomRight.appendChild(controls.createButton.call(this, 'fullscreen')); + + this.elements.controls = container; + + if (this.isHTML5) { + hahow.setQualityMenu.call(this, html5.getQualityOptions.call(this)); } - }, + hahow.setSpeedMenu.call(this); + hahow.setCaptionsMenu.call(this); + hahow.setCaptionsPositionMenu.call(this); - // Toggle poster - togglePoster: function togglePoster(enable) { - toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable); + return container; }, - // Set the poster image (async) - // Used internally for the poster setter, with the passive option forced to false - setPoster: function setPoster(poster) { + // Set the quality menu + setQualityMenu: function setQualityMenu(options) { var _this2 = this; - var passive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; + var type = 'quality'; + var list = this.elements.settings.panes.quality.querySelector('ul'); - // Don't override if call is passive - if (passive && this.poster) { - return Promise.reject(new Error('Poster already set')); + // Set options if passed and filter based on uniqueness and config + if (is.array(options)) { + this.options.quality = dedupe(options); } - // Set property synchronously to respect the call order - this.media.setAttribute('poster', poster); + // Toggle the pane and tab + var toggle = !is.empty(this.options.quality) && this.options.quality.length > 1; + controls.toggleTab.call(this, type, toggle); - // Wait until ui is ready - return ready.call(this) - // Load image - .then(function () { - return loadImage(poster); - }).catch(function (err) { - // Hide poster on error unless it's been set by another call - if (poster === _this2.poster) { - ui.togglePoster.call(_this2, false); - } - // Rethrow - throw err; - }).then(function () { - // Prevent race conditions - if (poster !== _this2.poster) { - throw new Error('setPoster cancelled by later call to setPoster'); - } - }).then(function () { - Object.assign(_this2.elements.poster.style, { - backgroundImage: 'url(\'' + poster + '\')', - // Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube) - backgroundSize: '' + // Check if we need to toggle the parent + controls.checkMenu.call(this); + + // If we're hiding, nothing more to do + if (!toggle) { + return; + } + + // Empty the menu + emptyElement(list); + + // Sort options by the config and then render options + this.options.quality.sort(function (a, b) { + return a - b; + }).forEach(function (quality) { + controls.createMenuItem.call(_this2, { + value: quality, + list: list, + type: type, + title: controls.getLabel.call(_this2, 'quality', quality) }); - ui.togglePoster.call(_this2, true); - return poster; }); + + controls.updateSetting.call(this, type, list); }, - // Check playing state - checkPlaying: function checkPlaying(event) { + // Set a list of available captions languages + setCaptionsMenu: function setCaptionsMenu() { var _this3 = this; - // Class hooks - toggleClass(this.elements.container, this.config.classNames.playing, this.playing); - toggleClass(this.elements.container, this.config.classNames.paused, this.paused); - toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped); + // Menu required + if (!is.element(this.elements.settings.panes.captions)) { + return; + } - // Set state - Array.from(this.elements.buttons.play || []).forEach(function (target) { - target.pressed = _this3.playing; - }); + // TODO: Captions or language? Currently it's mixed + var type = 'captions'; + var list = this.elements.settings.panes.captions.querySelector('ul'); + var tracks = captions.getTracks.call(this); - // Only update controls on non timeupdate events - if (is.event(event) && event.type === 'timeupdate') { + // Toggle the pane and tab + controls.toggleTab.call(this, type, true); + + // Empty the menu + emptyElement(list); + + // Check if we need to toggle the parent + controls.checkMenu.call(this); + + // If there's no captions, bail + if (!tracks.length) { + controls.createMenuItem.bind(this)({ + value: -1, + checked: !this.captions.toggled, + title: i18n.get('noCaptions', this.config), + list: list, + type: 'language' + }); + controls.updateSetting.call(this, type, list); return; } - // Toggle controls - ui.toggleControls.call(this); - }, + // Generate options data + var options = tracks.map(function (track, value) { + return { + value: value, + checked: _this3.captions.toggled && _this3.currentTrack === value, + title: captions.getLabel.call(_this3, track), + badge: track.language && controls.createBadge.call(_this3, track.language.toUpperCase()), + list: list, + type: 'language' + }; + }); + + // Add the "Disabled" option to turn off captions + options.unshift({ + value: -1, + checked: !this.captions.toggled, + title: i18n.get('disabled', this.config), + list: list, + type: 'language' + }); + // Generate options + options.forEach(controls.createMenuItem.bind(this)); - // Check if media is loading - checkLoading: function checkLoading(event) { + controls.updateSetting.call(this, type, list); + }, + setCaptionsPositionMenu: function setCaptionsPositionMenu() { var _this4 = this; - this.loading = ['stalled', 'waiting'].includes(event.type); + if (!is.element(this.elements.settings.panes['caption-position'])) { + return; + } - // Clear timer - clearTimeout(this.timers.loading); + var type = 'caption-position'; - // Timer to prevent flicker when seeking - this.timers.loading = setTimeout(function () { - // Update progress bar loading class state - toggleClass(_this4.elements.container, _this4.config.classNames.loading, _this4.loading); + controls.toggleTab.call(this, type, true); - // Update controls visibility - ui.toggleControls.call(_this4); - }, this.loading ? 250 : 0); + // Get the list to populate + var list = this.elements.settings.panes['caption-position'].querySelector('ul'); + + // Empty the menu + emptyElement(list); + + var positions = ['top', 'bottom']; + + // Create items + positions.forEach(function (position) { + controls.createMenuItem.call(_this4, { + value: position, + list: list, + type: type, + title: controls.getLabel.call(_this4, 'caption-position', position) + }); + }); + controls.updateSetting.call(this, type, list); }, - // Toggle controls based on state and `force` argument - toggleControls: function toggleControls(force) { - var controls$$1 = this.elements.controls; + // Set a list of available captions languages + setSpeedMenu: function setSpeedMenu(options) { + var _this5 = this; + // Menu required + if (!is.element(this.elements.settings.panes.speed)) { + return; + } - if (controls$$1 && this.config.hideControls) { - // Show controls if force, loading, paused, or button interaction, otherwise hide - this.toggleControls(Boolean(force || this.loading || this.paused || controls$$1.pressed || controls$$1.hover)); + var type = 'speed'; + + // Set the speed options + if (is.array(options)) { + this.options.speed = options; + } else if (this.isHTML5 || this.isVimeo) { + this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]; } - } - }; - // ========================================================================== + // Set options if passed and filter based on config + this.options.speed = this.options.speed.filter(function (speed) { + return _this5.config.speed.options.includes(speed); + }); - var Listeners = function () { - function Listeners(player) { - classCallCheck(this, Listeners); + // Toggle the pane and tab + var toggle = !is.empty(this.options.speed) && this.options.speed.length > 1; + controls.toggleTab.call(this, type, toggle); - this.player = player; - this.lastKey = null; + // Check if we need to toggle the parent + controls.checkMenu.call(this); - this.handleKey = this.handleKey.bind(this); - this.toggleMenu = this.toggleMenu.bind(this); - this.firstTouch = this.firstTouch.bind(this); - } + // If we're hiding, nothing more to do + if (!toggle) { + return; + } - // Handle key presses + // Get the list to populate + var list = this.elements.settings.panes.speed.querySelector('ul'); + // Empty the menu + emptyElement(list); - createClass(Listeners, [{ - key: 'handleKey', - value: function handleKey(event) { - var _this = this; - - var code = event.keyCode ? event.keyCode : event.which; - var pressed = event.type === 'keydown'; - var repeat = pressed && code === this.lastKey; + // Create items + this.options.speed.forEach(function (speed) { + controls.createMenuItem.call(_this5, { + value: speed, + list: list, + type: type, + title: controls.getLabel.call(_this5, 'speed', speed) + }); + }); - // Bail if a modifier key is set - if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) { - return; - } + controls.updateSetting.call(this, type, list); + } + }; - // If the event is bubbled from the media element - // Firefox doesn't get the keycode for whatever reason - if (!is.number(code)) { - return; - } + // ========================================================================== + // Load image avoiding xhr/fetch CORS issues + // Server status can't be obtained this way unfortunately, so this uses "naturalWidth" to determine if the image has loaded + // By default it checks if it is at least 1px, but you can add a second argument to change this + // ========================================================================== - // Seek by the number keys - var seekByKey = function seekByKey() { - // Divide the max duration into 10th's and times by the number value - _this.player.currentTime = _this.player.duration / 10 * (code - 48); - }; + function loadImage(src) { + var minWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; - // Handle the key on keydown - // Reset on keyup - if (pressed) { - // Which keycodes should we prevent default - var preventDefault = [27, 32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79]; + return new Promise(function (resolve, reject) { + var image = new Image(); - // Check focused element - // and if the focused element is not editable (e.g. text input) - // and any that accept key input http://webaim.org/techniques/keyboard/ - var focused = getFocusElement(); - if (is.element(focused) && focused !== this.player.elements.inputs.seek && matches(focused, this.player.config.selectors.editable)) { - return; - } + var handler = function handler() { + delete image.onload; + delete image.onerror; + (image.naturalWidth >= minWidth ? resolve : reject)(image); + }; - // If the code is found prevent default (e.g. prevent scrolling for arrows) - if (preventDefault.includes(code)) { - event.preventDefault(); - event.stopPropagation(); - } + Object.assign(image, { onload: handler, onerror: handler, src: src }); + }); + } - switch (code) { - case 27: - // esc escape fullscreen mode - if (this.player.fullscreen.enabled) { - this.player.fullscreen.exit(); - } - break; - case 48: - case 49: - case 50: - case 51: - case 52: - case 53: - case 54: - case 55: - case 56: - case 57: - // 0-9 - if (!repeat) { - seekByKey(); - } - break; + // ========================================================================== - case 32: - case 75: - // Space and K key - if (!repeat) { - this.player.togglePlay(); - } - break; + var ui = { + addStyleHook: function addStyleHook() { + toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true); + toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui); + }, + addStylehookToFullscreenContainer: function addStylehookToFullscreenContainer() { + // append plyr__outer-container class name to outer container + if (this.config.fullscreenContainer) { + toggleClass(this.config.fullscreenContainer, this.config.classNames.outerContainer, true); + } + }, - case 38: - // Arrow up - this.player.increaseVolume(0.1); - break; - case 40: - // Arrow down - this.player.decreaseVolume(0.1); - break; + // Toggle native HTML5 media controls + toggleNativeControls: function toggleNativeControls() { + var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; - case 77: - // M key - if (!repeat) { - this.player.muted = !this.player.muted; - } - break; + if (toggle && this.isHTML5) { + this.media.setAttribute('controls', ''); + } else { + this.media.removeAttribute('controls'); + } + }, - case 39: - // Arrow forward - this.player.forward(); - break; - case 37: - // Arrow back - this.player.rewind(); - break; + // Setup the UI + build: function build() { + var _this = this; - case 70: - // F key - this.player.fullscreen.toggle(); - break; + // Re-attach media element listeners + // TODO: Use event bubbling? + this.listeners.media(); - case 67: - // C key - if (!repeat) { - this.player.toggleCaptions(); - } - break; + // Don't setup interface if no support + if (!this.supported.ui) { + this.debug.warn('Basic support only for ' + this.provider + ' ' + this.type); - case 76: - // L key - this.player.loop = !this.player.loop; - break; + // Restore native controls + ui.toggleNativeControls.call(this, true); - /* case 73: - this.setLoop('start'); - break; - case 76: - this.setLoop(); - break; - case 79: - this.setLoop('end'); - break; */ + this.ready = true; - default: - break; - } + // Bail + return; + } - // Escape is handle natively when in full screen - // So we only need to worry about non native - if (!this.player.fullscreen.enabled && this.player.fullscreen.active && code === 27) { - this.player.fullscreen.toggle(); - } + // Inject custom controls if not present + if (!is.element(this.elements.controls)) { + // Inject custom controls + controls.inject.call(this); - // Store last code for next cycle - this.lastKey = code; - } else { - this.lastKey = null; - } + // Re-attach control listeners + this.listeners.controls(); } - // Toggle menu + // Remove native controls + ui.toggleNativeControls.call(this); - }, { - key: 'toggleMenu', - value: function toggleMenu(event) { - controls.toggleMenu.call(this.player, event); + // Setup captions for HTML5 + if (this.isHTML5) { + captions.setup.call(this); } - // Device is touch enabled + // Reset volume + this.volume = null; - }, { - key: 'firstTouch', - value: function firstTouch() { - this.player.touch = true; + // Reset mute state + this.muted = null; - // Add touch class - toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true); - } + // Reset speed + this.speed = null; - // Global window & document listeners + // Reset loop state + this.loop = null; - }, { - key: 'global', - value: function global() { - var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; + // Reset quality setting + this.quality = null; - // Keyboard shortcuts - if (this.player.config.keyboard.global) { - toggleListener.call(this.player, window, 'keydown keyup', this.handleKey, toggle, false); - } + // Reset volume display + controls.updateVolume.call(this); - // Click anywhere closes menu - toggleListener.call(this.player, document.body, 'click', this.toggleMenu, toggle); + // Reset time display + controls.timeUpdate.call(this); - // Detect touch by events - once.call(this.player, document.body, 'touchstart', this.firstTouch); - } + // Update the UI + ui.checkPlaying.call(this); - // Container listeners + // Check for picture-in-picture support + toggleClass(this.elements.container, this.config.classNames.pip.supported, support.pip && this.isHTML5 && this.isVideo); - }, { - key: 'container', - value: function container() { - var _this2 = this; + // Check for airplay support + toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5); - // Keyboard shortcuts - if (!this.player.config.keyboard.global && this.player.config.keyboard.focused) { - on.call(this.player, this.player.elements.container, 'keydown keyup', this.handleKey, false); - } + // Add iOS class + toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos); - // Detect tab focus - // Remove class on blur/focusout - on.call(this.player, this.player.elements.container, 'focusout', function (event) { - toggleClass(event.target, _this2.player.config.classNames.tabFocus, false); - }); - // Add classname to tabbed elements - on.call(this.player, this.player.elements.container, 'keydown', function (event) { - if (event.keyCode !== 9) { - return; - } + // Add touch class + toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch); - // Delay the adding of classname until the focus has changed - // This event fires before the focusin event - setTimeout(function () { - toggleClass(getFocusElement(), _this2.player.config.classNames.tabFocus, true); - }, 0); - }); + // Ready for API calls + this.ready = true; - // Toggle controls on mouse events and entering fullscreen - on.call(this.player, this.player.elements.container, 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', function (event) { - var controls$$1 = _this2.player.elements.controls; + // Ready event at end of execution stack + setTimeout(function () { + triggerEvent.call(_this, _this.media, 'ready'); + }, 0); - // Remove button states for fullscreen + // Set the title + ui.setTitle.call(this); - if (event.type === 'enterfullscreen') { - controls$$1.pressed = false; - controls$$1.hover = false; - } + // Assure the poster image is set, if the property was added before the element was created + if (this.poster) { + ui.setPoster.call(this, this.poster, false).catch(function () {}); + } - // Show, then hide after a timeout unless another control event occurs - var show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type); + // Manually set the duration if user has overridden it. + // The event listeners for it doesn't get called if preload is disabled (#701) + if (this.config.duration) { + controls.durationUpdate.call(this); + } + }, - var delay = 0; - if (show) { - ui.toggleControls.call(_this2.player, true); - // Use longer timeout for touch devices - delay = _this2.player.touch ? 3000 : 2000; - } + // Setup aria attribute for play and iframe title + setTitle: function setTitle() { + // Find the current text + var label = i18n.get('play', this.config); - // Clear timer - clearTimeout(_this2.player.timers.controls); - // Timer to prevent flicker when seeking - _this2.player.timers.controls = setTimeout(function () { - return ui.toggleControls.call(_this2.player, false); - }, delay); - }); + // If there's a media title set, use that for the label + if (is.string(this.config.title) && !is.empty(this.config.title)) { + label += ', ' + this.config.title; } - // Listen for media events + // If there's a play button, set label + Array.from(this.elements.buttons.play || []).forEach(function (button) { + button.setAttribute('aria-label', label); + }); - }, { - key: 'media', - value: function media() { - var _this3 = this; + // Set iframe title + // https://github.com/sampotts/plyr/issues/124 + if (this.isEmbed) { + var iframe = getElement.call(this, 'iframe'); - if (!this.player.media.isAlreadyRegisterEventListener) { - this.player.media.isAlreadyRegisterEventListener = true; - // Time change on media - on.call(this.player, this.player.media, 'timeupdate seeking seeked', function (event) { - return controls.timeUpdate.call(_this3.player, event); - }); + if (!is.element(iframe)) { + return; + } - // Display duration - on.call(this.player, this.player.media, 'durationchange loadeddata loadedmetadata', function (event) { - return controls.durationUpdate.call(_this3.player, event); - }); + // Default to media type + var title = !is.empty(this.config.title) ? this.config.title : 'video'; + var format = i18n.get('frameTitle', this.config); - // Check for audio tracks on load - // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point - on.call(this.player, this.player.media, 'canplay', function () { - toggleHidden(_this3.player.elements.volume, !_this3.player.hasAudio); - toggleHidden(_this3.player.elements.buttons.mute, !_this3.player.hasAudio); - }); + iframe.setAttribute('title', format.replace('{title}', title)); + } + }, - // Handle the media finishing - on.call(this.player, this.player.media, 'ended', function () { - // Show poster on end - if (_this3.player.isHTML5 && _this3.player.isVideo && _this3.player.config.resetOnEnd) { - // Restart - _this3.player.restart(); - } - }); - // Check for buffer progress - on.call(this.player, this.player.media, 'progress playing seeking seeked', function (event) { - return controls.updateProgress.call(_this3.player, event); - }); + // Toggle poster + togglePoster: function togglePoster(enable) { + toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable); + }, - // Handle volume changes - on.call(this.player, this.player.media, 'volumechange', function (event) { - return controls.updateVolume.call(_this3.player, event); - }); - // Handle play/pause - on.call(this.player, this.player.media, 'playing play pause ended emptied timeupdate', function (event) { - return ui.checkPlaying.call(_this3.player, event); - }); + // Set the poster image (async) + // Used internally for the poster setter, with the passive option forced to false + setPoster: function setPoster(poster) { + var _this2 = this; - // Loading state - on.call(this.player, this.player.media, 'waiting canplay seeked playing', function (event) { - return ui.checkLoading.call(_this3.player, event); - }); + var passive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; - // If autoplay, then load advertisement if required - // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows - on.call(this.player, this.player.media, 'playing', function () { - if (!_this3.player.ads) { - return; - } + // Don't override if call is passive + if (passive && this.poster) { + return Promise.reject(new Error('Poster already set')); + } - // If ads are enabled, wait for them first - if (_this3.player.ads.enabled && !_this3.player.ads.initialized) { - // Wait for manager response - _this3.player.ads.managerPromise.then(function () { - return _this3.player.ads.play(); - }).catch(function () { - return _this3.player.play(); - }); - } - }); + // Set property synchronously to respect the call order + this.media.setAttribute('poster', poster); - // Volume change - on.call(this.player, this.player.media, 'volumechange', function () { - // Save to storage - _this3.player.storage.set({ volume: _this3.player.volume, muted: _this3.player.muted }); - }); + // Wait until ui is ready + return ready.call(this) + // Load image + .then(function () { + return loadImage(poster); + }).catch(function (err) { + // Hide poster on error unless it's been set by another call + if (poster === _this2.poster) { + ui.togglePoster.call(_this2, false); + } + // Rethrow + throw err; + }).then(function () { + // Prevent race conditions + if (poster !== _this2.poster) { + throw new Error('setPoster cancelled by later call to setPoster'); + } + }).then(function () { + Object.assign(_this2.elements.poster.style, { + backgroundImage: 'url(\'' + poster + '\')', + // Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube) + backgroundSize: '' + }); + ui.togglePoster.call(_this2, true); + return poster; + }); + }, - // Speed change - on.call(this.player, this.player.media, 'ratechange', function () { - // Update UI - controls.updateSetting.call(_this3.player, 'speed'); - // Save to storage - _this3.player.storage.set({ speed: _this3.player.speed }); - }); + // Check playing state + checkPlaying: function checkPlaying(event) { + var _this3 = this; - // Quality change - on.call(this.player, this.player.media, 'qualitychange', function (event) { - // Update UI - controls.updateSetting.call(_this3.player, 'quality', null, event.detail.quality); - }); + // Class hooks + toggleClass(this.elements.container, this.config.classNames.playing, this.playing); + toggleClass(this.elements.container, this.config.classNames.paused, this.paused); + toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped); - // Proxy events to container - // Bubble up key events for Edge - var proxyEvents = this.player.config.events.concat(['keyup', 'keydown']).join(' '); - on.call(this.player, this.player.media, proxyEvents, function (event) { - var _event$detail = event.detail, - detail = _event$detail === undefined ? {} : _event$detail; + // Set state + Array.from(this.elements.buttons.play || []).forEach(function (target) { + target.pressed = _this3.playing; + }); - // Get error details from media + // Only update controls on non timeupdate events + if (is.event(event) && event.type === 'timeupdate') { + return; + } - if (event.type === 'error') { - detail = _this3.player.media.error; - } + // Toggle controls + ui.toggleControls.call(this); + }, - triggerEvent.call(_this3.player, _this3.player.elements.container, event.type, true, detail); - }); - } - // Click video - if (this.player.supported.ui && this.player.config.clickToPlay && !this.player.isAudio) { - // Re-fetch the wrapper - var wrapper = getElement.call(this.player, '.' + this.player.config.classNames.video); + // Check if media is loading + checkLoading: function checkLoading(event) { + var _this4 = this; - // Bail if there's no wrapper (this should never happen) - if (!is.element(wrapper)) { - return; - } + this.loading = ['stalled', 'waiting'].includes(event.type); - if (!wrapper.isAlreadyRegisterEventListener) { - wrapper.isAlreadyRegisterEventListener = true; - // On click play, pause ore restart - on.call(this.player, wrapper, 'click', function () { - // Touch devices will just show controls (if we're hiding controls) - if (_this3.player.config.hideControls && _this3.player.touch && !_this3.player.paused) { - return; - } + // Clear timer + clearTimeout(this.timers.loading); - if (_this3.player.paused) { - _this3.player.play(); - } else if (_this3.player.ended) { - _this3.player.restart(); - _this3.player.play(); - } else { - _this3.player.pause(); - } - }); + // Timer to prevent flicker when seeking + this.timers.loading = setTimeout(function () { + // Update progress bar loading class state + toggleClass(_this4.elements.container, _this4.config.classNames.loading, _this4.loading); - // Disable right click - if (this.player.supported.ui && this.player.config.disableContextMenu) { - on.call(this.player, this.player.elements.wrapper, 'contextmenu', function (event) { - event.preventDefault(); - }, false); - } - } - } - } + // Update controls visibility + ui.toggleControls.call(_this4); + }, this.loading ? 250 : 0); + }, - // Listen for control events - }, { - key: 'controls', - value: function controls$$1() { - var _this4 = this; + // Toggle controls based on state and `force` argument + toggleControls: function toggleControls(force) { + var controls$$1 = this.elements.controls; - // IE doesn't support input event, so we fallback to change - var inputEvent = browser.isIE ? 'change' : 'input'; - // Run default and custom handlers - var proxy = function proxy(event, defaultHandler, customHandlerKey) { - var customHandler = _this4.player.config.listeners[customHandlerKey]; - var hasCustomHandler = is.function(customHandler); - var returned = true; + if (controls$$1 && this.config.hideControls) { + // Show controls if force, loading, paused, or button interaction, otherwise hide + this.toggleControls(Boolean(force || this.loading || this.paused || controls$$1.pressed || controls$$1.hover)); + } + } + }; - // Execute custom handler - if (hasCustomHandler) { - returned = customHandler.call(_this4.player, event); - } + // ========================================================================== - // Only call default handler if not prevented in custom handler - if (returned && is.function(defaultHandler)) { - defaultHandler.call(_this4.player, event); - } - }; + var Listeners = function () { + function Listeners(player) { + classCallCheck(this, Listeners); - // Trigger custom and default handlers - var bind = function bind(element, type, defaultHandler, customHandlerKey) { - var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; + this.player = player; + this.lastKey = null; - var customHandler = _this4.player.config.listeners[customHandlerKey]; - var hasCustomHandler = is.function(customHandler); + this.handleKey = this.handleKey.bind(this); + this.toggleMenu = this.toggleMenu.bind(this); + this.firstTouch = this.firstTouch.bind(this); + } - on.call(_this4.player, element, type, function (event) { - return proxy(event, defaultHandler, customHandlerKey); - }, passive && !hasCustomHandler); - }; + // Handle key presses - // Play/pause toggle - if (this.player.elements.buttons.play) { - Array.from(this.player.elements.buttons.play).forEach(function (button) { - bind(button, 'click', _this4.player.togglePlay, 'play'); - }); - } - // Pause - bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart'); + createClass(Listeners, [{ + key: 'handleKey', + value: function handleKey(event) { + var _this = this; - // Rewind - bind(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind'); + var code = event.keyCode ? event.keyCode : event.which; + var pressed = event.type === 'keydown'; + var repeat = pressed && code === this.lastKey; - // Rewind - bind(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward'); + // Bail if a modifier key is set + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) { + return; + } - // Mute toggle - bind(this.player.elements.buttons.mute, 'click', function () { - _this4.player.muted = !_this4.player.muted; - }, 'mute'); + // If the event is bubbled from the media element + // Firefox doesn't get the keycode for whatever reason + if (!is.number(code)) { + return; + } - // Captions toggle - bind(this.player.elements.buttons.captions, 'click', function () { - return _this4.player.toggleCaptions(); - }); + // Seek by the number keys + var seekByKey = function seekByKey() { + // Divide the max duration into 10th's and times by the number value + _this.player.currentTime = _this.player.duration / 10 * (code - 48); + }; - // zoom toggle - on(this.player.elements.buttons.zoom, 'click', function () { - _this4.player.fullscreen.toggleZoom(); - }, 'zoom'); + // Handle the key on keydown + // Reset on keyup + if (pressed) { + // Which keycodes should we prevent default + var preventDefault = [27, 32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79]; - // Fullscreen toggle - bind(this.player.elements.buttons.fullscreen, 'click', function () { - _this4.player.fullscreen.toggle(); - }, 'fullscreen'); + // Check focused element + // and if the focused element is not editable (e.g. text input) + // and any that accept key input http://webaim.org/techniques/keyboard/ + var focused = getFocusElement(); + if (is.element(focused) && focused !== this.player.elements.inputs.seek && matches(focused, this.player.config.selectors.editable)) { + return; + } - // Picture-in-Picture - bind(this.player.elements.buttons.pip, 'click', function () { - _this4.player.pip = 'toggle'; - }, 'pip'); + // If the code is found prevent default (e.g. prevent scrolling for arrows) + if (preventDefault.includes(code)) { + event.preventDefault(); + event.stopPropagation(); + } - // Airplay - bind(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay'); + switch (code) { + case 27: + // esc escape fullscreen mode + if (this.player.fullscreen.enabled) { + this.player.fullscreen.exit(); + } + break; + case 48: + case 49: + case 50: + case 51: + case 52: + case 53: + case 54: + case 55: + case 56: + case 57: + // 0-9 + if (!repeat) { + seekByKey(); + } + break; - // Settings menu - bind(this.player.elements.buttons.settings, 'click', function (event) { - controls.toggleMenu.call(_this4.player, event); - }); + case 32: + case 75: + // Space and K key + if (!repeat) { + this.player.togglePlay(); + } + break; - // Settings menu - bind(this.player.elements.settings.form, 'click', function (event) { - event.stopPropagation(); + case 38: + // Arrow up + this.player.increaseVolume(0.1); + break; - // Settings menu items - use event delegation as items are added/removed - if (matches(event.target, _this4.player.config.selectors.inputs.language)) { - proxy(event, function () { - _this4.player.currentTrack = Number(event.target.value); - // showHomeTab(); - }, 'language'); - } else if (matches(event.target, _this4.player.config.selectors.inputs.quality)) { - proxy(event, function () { - _this4.player.quality = event.target.value; - // showHomeTab(); - }, 'quality'); - } else if (matches(event.target, _this4.player.config.selectors.inputs.speed)) { - proxy(event, function () { - _this4.player.speed = parseFloat(event.target.value); - // showHomeTab(); - }, 'speed'); - } else if (matches(event.target, _this4.player.config.selectors.inputs['caption-position'])) { - proxy(event, function () { - _this4.player.captionPosition = event.target.value; - }, 'caption-position'); - } else { - var tab = event.target; - controls.showTab.call(_this4.player, tab.getAttribute('aria-controls')); - } - }); + case 40: + // Arrow down + this.player.decreaseVolume(0.1); + break; - // Set range input alternative "value", which matches the tooltip time (#954) - bind(this.player.elements.inputs.seek, 'mousedown mousemove', function (event) { - var clientRect = _this4.player.elements.progress.getBoundingClientRect(); - var percent = 100 / clientRect.width * (event.pageX - clientRect.left); - event.currentTarget.setAttribute('seek-value', percent); - }); + case 77: + // M key + if (!repeat) { + this.player.muted = !this.player.muted; + } + break; - // Pause while seeking - bind(this.player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', function (event) { - var seek = event.currentTarget; + case 39: + // Arrow forward + this.player.forward(); + break; - var code = event.keyCode ? event.keyCode : event.which; - var eventType = event.type; + case 37: + // Arrow back + this.player.rewind(); + break; - if ((eventType === 'keydown' || eventType === 'keyup') && code !== 39 && code !== 37) { - return; - } - // Was playing before? - var play = seek.hasAttribute('play-on-seeked'); + case 70: + // F key + this.player.fullscreen.toggle(); + break; - // Done seeking - var done = ['mouseup', 'touchend', 'keyup'].includes(event.type); - - // If we're done seeking and it was playing, resume playback - if (play && done) { - seek.removeAttribute('play-on-seeked'); - _this4.player.play(); - } else if (!done && _this4.player.playing) { - seek.setAttribute('play-on-seeked', ''); - _this4.player.pause(); - } - }); + case 67: + // C key + if (!repeat) { + this.player.toggleCaptions(); + } + break; - // Seek - bind(this.player.elements.inputs.seek, inputEvent, function (event) { - var seek = event.currentTarget; + case 76: + // L key + this.player.loop = !this.player.loop; + break; - // If it exists, use seek-value instead of "value" for consistency with tooltip time (#954) - var seekTo = seek.getAttribute('seek-value'); + /* case 73: + this.setLoop('start'); + break; + case 76: + this.setLoop(); + break; + case 79: + this.setLoop('end'); + break; */ - if (is.empty(seekTo)) { - seekTo = seek.value; + default: + break; } - seek.removeAttribute('seek-value'); - - _this4.player.currentTime = seekTo / seek.max * _this4.player.duration; - }, 'seek'); - - // Current time invert - // Only if one time element is used for both currentTime and duration - if (this.player.config.toggleInvert && !is.element(this.player.elements.display.duration)) { - bind(this.player.elements.display.currentTime, 'click', function () { - // Do nothing if we're at the start - if (_this4.player.currentTime === 0) { - return; - } - - _this4.player.config.invertTime = !_this4.player.config.invertTime; + // Escape is handle natively when in full screen + // So we only need to worry about non native + if (!this.player.fullscreen.enabled && this.player.fullscreen.active && code === 27) { + this.player.fullscreen.toggle(); + } - controls.timeUpdate.call(_this4.player); - }); + // Store last code for next cycle + this.lastKey = code; + } else { + this.lastKey = null; } + } - // Volume - bind(this.player.elements.inputs.volume, inputEvent, function (event) { - _this4.player.volume = event.target.value; - }, 'volume'); + // Toggle menu - // Polyfill for lower fill in for webkit - if (browser.isWebkit) { - Array.from(getElements.call(this.player, 'input[type="range"]')).forEach(function (element) { - bind(element, 'input', function (event) { - return controls.updateRangeFill.call(_this4.player, event.target); - }); - }); - } + }, { + key: 'toggleMenu', + value: function toggleMenu(event) { + controls.toggleMenu.call(this.player, event); + } - // Seek tooltip - bind(this.player.elements.progress, 'mouseenter mouseleave mousemove', function (event) { - return controls.updateSeekTooltip.call(_this4.player, event); - }); + // Device is touch enabled - // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting) - bind(this.player.elements.controls, 'mouseenter mouseleave', function (event) { - _this4.player.elements.controls.hover = !_this4.player.touch && event.type === 'mouseenter'; - }); + }, { + key: 'firstTouch', + value: function firstTouch() { + this.player.touch = true; - // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting) - bind(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) { - _this4.player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type); - }); + // Add touch class + toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true); + } - // Focus in/out on controls - bind(this.player.elements.controls, 'focusin focusout', function (event) { - var _player = _this4.player, - config = _player.config, - elements = _player.elements, - timers = _player.timers; + // Global window & document listeners - // Skip transition to prevent focus from scrolling the parent element + }, { + key: 'global', + value: function global() { + var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; - toggleClass(elements.controls, config.classNames.noTransition, event.type === 'focusin'); + // Keyboard shortcuts + if (this.player.config.keyboard.global) { + toggleListener.call(this.player, window, 'keydown keyup', this.handleKey, toggle, false); + } - // Toggle - ui.toggleControls.call(_this4.player, event.type === 'focusin'); + // Click anywhere closes menu + toggleListener.call(this.player, document.body, 'click', this.toggleMenu, toggle); - // If focusin, hide again after delay - if (event.type === 'focusin') { - // Restore transition - setTimeout(function () { - toggleClass(elements.controls, config.classNames.noTransition, false); - }, 0); + // Detect touch by events + once.call(this.player, document.body, 'touchstart', this.firstTouch); + } - // Delay a little more for keyboard users - var delay = _this4.touch ? 3000 : 4000; + // Container listeners - // Clear timer - clearTimeout(timers.controls); - // Hide - timers.controls = setTimeout(function () { - return ui.toggleControls.call(_this4.player, false); - }, delay); - } - }); + }, { + key: 'container', + value: function container() { + var _this2 = this; - // Mouse wheel for volume - bind(this.player.elements.inputs.volume, 'wheel', function (event) { - // Detect "natural" scroll - suppored on OS X Safari only - // Other browsers on OS X will be inverted until support improves - var inverted = event.webkitDirectionInvertedFromDevice; + // Keyboard shortcuts + if (!this.player.config.keyboard.global && this.player.config.keyboard.focused) { + on.call(this.player, this.player.elements.container, 'keydown keyup', this.handleKey, false); + } - // Get delta from event. Invert if `inverted` is true + // Detect tab focus + // Remove class on blur/focusout + on.call(this.player, this.player.elements.container, 'focusout', function (event) { + toggleClass(event.target, _this2.player.config.classNames.tabFocus, false); + }); + // Add classname to tabbed elements + on.call(this.player, this.player.elements.container, 'keydown', function (event) { + if (event.keyCode !== 9) { + return; + } - var _map = [event.deltaX, -event.deltaY].map(function (value) { - return inverted ? -value : value; - }), - _map2 = slicedToArray(_map, 2), - x = _map2[0], - y = _map2[1]; + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + setTimeout(function () { + toggleClass(getFocusElement(), _this2.player.config.classNames.tabFocus, true); + }, 0); + }); - // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta) + // Toggle controls on mouse events and entering fullscreen + on.call(this.player, this.player.elements.container, 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', function (event) { + var controls$$1 = _this2.player.elements.controls; + // Remove button states for fullscreen - var direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y); + if (event.type === 'enterfullscreen') { + controls$$1.pressed = false; + controls$$1.hover = false; + } - // Change the volume by 2% - _this4.player.increaseVolume(direction / 50); + // Show, then hide after a timeout unless another control event occurs + var show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type); - // Don't break page scrolling at max and min - var volume = _this4.player.media.volume; + var delay = 0; - if (direction === 1 && volume < 1 || direction === -1 && volume > 0) { - event.preventDefault(); + if (show) { + ui.toggleControls.call(_this2.player, true); + // Use longer timeout for touch devices + delay = _this2.player.touch ? 3000 : 2000; } - }, 'volume', false); + + // Clear timer + clearTimeout(_this2.player.timers.controls); + // Timer to prevent flicker when seeking + _this2.player.timers.controls = setTimeout(function () { + return ui.toggleControls.call(_this2.player, false); + }, delay); + }); } - }]); - return Listeners; - }(); - var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + // Listen for media events - function createCommonjsModule(fn, module) { - return module = { exports: {} }, fn(module, module.exports), module.exports; - } + }, { + key: 'media', + value: function media() { + var _this3 = this; - var loadjs_umd = createCommonjsModule(function (module, exports) { - (function(root, factory) { - if (typeof undefined === 'function' && undefined.amd) { - undefined([], factory); - } else { - module.exports = factory(); - } - }(commonjsGlobal, function() { - /** - * Global dependencies. - * @global {Object} document - DOM - */ + if (!this.player.media.isAlreadyRegisterEventListener) { + this.player.media.isAlreadyRegisterEventListener = true; + // Time change on media + on.call(this.player, this.player.media, 'timeupdate seeking seeked', function (event) { + return controls.timeUpdate.call(_this3.player, event); + }); - var devnull = function() {}, - bundleIdCache = {}, - bundleResultCache = {}, - bundleCallbackQueue = {}; + // Display duration + on.call(this.player, this.player.media, 'durationchange loadeddata loadedmetadata', function (event) { + return controls.durationUpdate.call(_this3.player, event); + }); + // Check for audio tracks on load + // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point + on.call(this.player, this.player.media, 'canplay', function () { + toggleHidden(_this3.player.elements.volume, !_this3.player.hasAudio); + toggleHidden(_this3.player.elements.buttons.mute, !_this3.player.hasAudio); + }); - /** - * Subscribe to bundle load event. - * @param {string[]} bundleIds - Bundle ids - * @param {Function} callbackFn - The callback function - */ - function subscribe(bundleIds, callbackFn) { - // listify - bundleIds = bundleIds.push ? bundleIds : [bundleIds]; + // Handle the media finishing + on.call(this.player, this.player.media, 'ended', function () { + // Show poster on end + if (_this3.player.isHTML5 && _this3.player.isVideo && _this3.player.config.resetOnEnd) { + // Restart + _this3.player.restart(); + } + }); - var depsNotFound = [], - i = bundleIds.length, - numWaiting = i, - fn, - bundleId, - r, - q; + // Check for buffer progress + on.call(this.player, this.player.media, 'progress playing seeking seeked', function (event) { + return controls.updateProgress.call(_this3.player, event); + }); - // define callback function - fn = function (bundleId, pathsNotFound) { - if (pathsNotFound.length) depsNotFound.push(bundleId); + // Handle volume changes + on.call(this.player, this.player.media, 'volumechange', function (event) { + return controls.updateVolume.call(_this3.player, event); + }); - numWaiting--; - if (!numWaiting) callbackFn(depsNotFound); - }; + // Handle play/pause + on.call(this.player, this.player.media, 'playing play pause ended emptied timeupdate', function (event) { + return ui.checkPlaying.call(_this3.player, event); + }); - // register callback - while (i--) { - bundleId = bundleIds[i]; + // Loading state + on.call(this.player, this.player.media, 'waiting canplay seeked playing', function (event) { + return ui.checkLoading.call(_this3.player, event); + }); - // execute callback if in result cache - r = bundleResultCache[bundleId]; - if (r) { - fn(bundleId, r); - continue; - } + // If autoplay, then load advertisement if required + // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows + on.call(this.player, this.player.media, 'playing', function () { + if (!_this3.player.ads) { + return; + } - // add to callback queue - q = bundleCallbackQueue[bundleId] = bundleCallbackQueue[bundleId] || []; - q.push(fn); - } - } + // If ads are enabled, wait for them first + if (_this3.player.ads.enabled && !_this3.player.ads.initialized) { + // Wait for manager response + _this3.player.ads.managerPromise.then(function () { + return _this3.player.ads.play(); + }).catch(function () { + return _this3.player.play(); + }); + } + }); + // Volume change + on.call(this.player, this.player.media, 'volumechange', function () { + // Save to storage + _this3.player.storage.set({ volume: _this3.player.volume, muted: _this3.player.muted }); + }); - /** - * Publish bundle load event. - * @param {string} bundleId - Bundle id - * @param {string[]} pathsNotFound - List of files not found - */ - function publish(bundleId, pathsNotFound) { - // exit if id isn't defined - if (!bundleId) return; + // Speed change + on.call(this.player, this.player.media, 'ratechange', function () { + // Update UI + controls.updateSetting.call(_this3.player, 'speed'); - var q = bundleCallbackQueue[bundleId]; + // Save to storage + _this3.player.storage.set({ speed: _this3.player.speed }); + }); - // cache result - bundleResultCache[bundleId] = pathsNotFound; + // Quality change + on.call(this.player, this.player.media, 'qualitychange', function (event) { + // Update UI + controls.updateSetting.call(_this3.player, 'quality', null, event.detail.quality); + }); - // exit if queue is empty - if (!q) return; + // Proxy events to container + // Bubble up key events for Edge + var proxyEvents = this.player.config.events.concat(['keyup', 'keydown']).join(' '); + on.call(this.player, this.player.media, proxyEvents, function (event) { + var _event$detail = event.detail, + detail = _event$detail === undefined ? {} : _event$detail; - // empty callback queue - while (q.length) { - q[0](bundleId, pathsNotFound); - q.splice(0, 1); - } - } + // Get error details from media + if (event.type === 'error') { + detail = _this3.player.media.error; + } - /** - * Execute callbacks. - * @param {Object or Function} args - The callback args - * @param {string[]} depsNotFound - List of dependencies not found - */ - function executeCallbacks(args, depsNotFound) { - // accept function as argument - if (args.call) args = {success: args}; + triggerEvent.call(_this3.player, _this3.player.elements.container, event.type, true, detail); + }); + } - // success and error callbacks - if (depsNotFound.length) (args.error || devnull)(depsNotFound); - else (args.success || devnull)(args); - } + // Click video + if (this.player.supported.ui && this.player.config.clickToPlay && !this.player.isAudio) { + // Re-fetch the wrapper + var wrapper = getElement.call(this.player, '.' + this.player.config.classNames.video); + // Bail if there's no wrapper (this should never happen) + if (!is.element(wrapper)) { + return; + } - /** - * Load individual file. - * @param {string} path - The file path - * @param {Function} callbackFn - The callback function - */ - function loadFile(path, callbackFn, args, numTries) { - var doc = document, - async = args.async, - maxTries = (args.numRetries || 0) + 1, - beforeCallbackFn = args.before || devnull, - pathStripped = path.replace(/^(css|img)!/, ''), - isCss, - e; + if (!wrapper.isAlreadyRegisterEventListener) { + wrapper.isAlreadyRegisterEventListener = true; + // On click play, pause ore restart + on.call(this.player, wrapper, 'click', function () { + // Touch devices will just show controls (if we're hiding controls) + if (_this3.player.config.hideControls && _this3.player.touch && !_this3.player.paused) { + return; + } - numTries = numTries || 0; + if (_this3.player.paused) { + _this3.player.play(); + } else if (_this3.player.ended) { + _this3.player.restart(); + _this3.player.play(); + } else { + _this3.player.pause(); + } + }); - if (/(^css!|\.css$)/.test(path)) { - isCss = true; + // Disable right click + if (this.player.supported.ui && this.player.config.disableContextMenu) { + on.call(this.player, this.player.elements.wrapper, 'contextmenu', function (event) { + event.preventDefault(); + }, false); + } + } + } + } - // css - e = doc.createElement('link'); - e.rel = 'stylesheet'; - e.href = pathStripped; //.replace(/^css!/, ''); // remove "css!" prefix - } else if (/(^img!|\.(png|gif|jpg|svg)$)/.test(path)) { - // image - e = doc.createElement('img'); - e.src = pathStripped; - } else { - // javascript - e = doc.createElement('script'); - e.src = path; - e.async = async === undefined ? true : async; - } + // Listen for control events - e.onload = e.onerror = e.onbeforeload = function (ev) { - var result = ev.type[0]; + }, { + key: 'controls', + value: function controls$$1() { + var _this4 = this; - // Note: The following code isolates IE using `hideFocus` and treats empty - // stylesheets as failures to get around lack of onerror support - if (isCss && 'hideFocus' in e) { - try { - if (!e.sheet.cssText.length) result = 'e'; - } catch (x) { - // sheets objects created from load errors don't allow access to - // `cssText` - result = 'e'; - } - } + // IE doesn't support input event, so we fallback to change + var inputEvent = browser.isIE ? 'change' : 'input'; - // handle retries in case of load failure - if (result == 'e') { - // increment counter - numTries += 1; + // Run default and custom handlers + var proxy = function proxy(event, defaultHandler, customHandlerKey) { + var customHandler = _this4.player.config.listeners[customHandlerKey]; + var hasCustomHandler = is.function(customHandler); + var returned = true; - // exit function and try again - if (numTries < maxTries) { - return loadFile(path, callbackFn, args, numTries); - } - } + // Execute custom handler + if (hasCustomHandler) { + returned = customHandler.call(_this4.player, event); + } - // execute callback - callbackFn(path, result, ev.defaultPrevented); - }; + // Only call default handler if not prevented in custom handler + if (returned && is.function(defaultHandler)) { + defaultHandler.call(_this4.player, event); + } + }; - // add to document (unless callback returns `false`) - if (beforeCallbackFn(path, e) !== false) doc.head.appendChild(e); - } + // Trigger custom and default handlers + var bind = function bind(element, type, defaultHandler, customHandlerKey) { + var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; + var customHandler = _this4.player.config.listeners[customHandlerKey]; + var hasCustomHandler = is.function(customHandler); - /** - * Load multiple files. - * @param {string[]} paths - The file paths - * @param {Function} callbackFn - The callback function - */ - function loadFiles(paths, callbackFn, args) { - // listify paths - paths = paths.push ? paths : [paths]; + on.call(_this4.player, element, type, function (event) { + return proxy(event, defaultHandler, customHandlerKey); + }, passive && !hasCustomHandler); + }; - var numWaiting = paths.length, - x = numWaiting, - pathsNotFound = [], - fn, - i; + // Play/pause toggle + if (this.player.elements.buttons.play) { + Array.from(this.player.elements.buttons.play).forEach(function (button) { + bind(button, 'click', _this4.player.togglePlay, 'play'); + }); + } - // define callback function - fn = function(path, result, defaultPrevented) { - // handle error - if (result == 'e') pathsNotFound.push(path); + // Pause + bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart'); - // handle beforeload event. If defaultPrevented then that means the load - // will be blocked (ex. Ghostery/ABP on Safari) - if (result == 'b') { - if (defaultPrevented) pathsNotFound.push(path); - else return; - } + // Rewind + bind(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind'); - numWaiting--; - if (!numWaiting) callbackFn(pathsNotFound); - }; + // Rewind + bind(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward'); - // load scripts - for (i=0; i < x; i++) loadFile(paths[i], fn, args); - } + // Mute toggle + bind(this.player.elements.buttons.mute, 'click', function () { + _this4.player.muted = !_this4.player.muted; + }, 'mute'); + // Captions toggle + bind(this.player.elements.buttons.captions, 'click', function () { + return _this4.player.toggleCaptions(); + }); - /** - * Initiate script load and register bundle. - * @param {(string|string[])} paths - The file paths - * @param {(string|Function)} [arg1] - The bundleId or success callback - * @param {Function} [arg2] - The success or error callback - * @param {Function} [arg3] - The error callback - */ - function loadjs(paths, arg1, arg2) { - var bundleId, - args; + // zoom toggle + on(this.player.elements.buttons.zoom, 'click', function () { + _this4.player.fullscreen.toggleZoom(); + }, 'zoom'); - // bundleId (if string) - if (arg1 && arg1.trim) bundleId = arg1; + // Fullscreen toggle + bind(this.player.elements.buttons.fullscreen, 'click', function () { + _this4.player.fullscreen.toggle(); + }, 'fullscreen'); - // args (default is {}) - args = (bundleId ? arg2 : arg1) || {}; + // Picture-in-Picture + bind(this.player.elements.buttons.pip, 'click', function () { + _this4.player.pip = 'toggle'; + }, 'pip'); - // throw error if bundle is already defined - if (bundleId) { - if (bundleId in bundleIdCache) { - throw "LoadJS"; - } else { - bundleIdCache[bundleId] = true; - } - } + // Airplay + bind(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay'); - // load scripts - loadFiles(paths, function (pathsNotFound) { - // execute callbacks - executeCallbacks(args, pathsNotFound); + // Settings menu + bind(this.player.elements.buttons.settings, 'click', function (event) { + controls.toggleMenu.call(_this4.player, event); + }); - // publish bundle load event - publish(bundleId, pathsNotFound); - }, args); - } + // Settings menu + bind(this.player.elements.settings.form, 'click', function (event) { + event.stopPropagation(); + // Settings menu items - use event delegation as items are added/removed + if (matches(event.target, _this4.player.config.selectors.inputs.language)) { + proxy(event, function () { + _this4.player.currentTrack = Number(event.target.value); + // showHomeTab(); + }, 'language'); + } else if (matches(event.target, _this4.player.config.selectors.inputs.quality)) { + proxy(event, function () { + _this4.player.quality = event.target.value; + // showHomeTab(); + }, 'quality'); + } else if (matches(event.target, _this4.player.config.selectors.inputs.speed)) { + proxy(event, function () { + _this4.player.speed = parseFloat(event.target.value); + // showHomeTab(); + }, 'speed'); + } else if (matches(event.target, _this4.player.config.selectors.inputs['caption-position'])) { + proxy(event, function () { + _this4.player.captionPosition = event.target.value; + }, 'caption-position'); + } else { + var tab = event.target; + controls.showTab.call(_this4.player, tab.getAttribute('aria-controls')); + } + }); - /** - * Execute callbacks when dependencies have been satisfied. - * @param {(string|string[])} deps - List of bundle ids - * @param {Object} args - success/error arguments - */ - loadjs.ready = function ready(deps, args) { - // subscribe to bundle load event - subscribe(deps, function (depsNotFound) { - // execute callbacks - executeCallbacks(args, depsNotFound); - }); + // Set range input alternative "value", which matches the tooltip time (#954) + bind(this.player.elements.inputs.seek, 'mousedown mousemove', function (event) { + var clientRect = _this4.player.elements.progress.getBoundingClientRect(); + var percent = 100 / clientRect.width * (event.pageX - clientRect.left); + event.currentTarget.setAttribute('seek-value', percent); + }); - return loadjs; - }; + // Pause while seeking + bind(this.player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', function (event) { + var seek = event.currentTarget; + var code = event.keyCode ? event.keyCode : event.which; + var eventType = event.type; - /** - * Manually satisfy bundle dependencies. - * @param {string} bundleId - The bundle id - */ - loadjs.done = function done(bundleId) { - publish(bundleId, []); - }; + if ((eventType === 'keydown' || eventType === 'keyup') && code !== 39 && code !== 37) { + return; + } + // Was playing before? + var play = seek.hasAttribute('play-on-seeked'); + // Done seeking + var done = ['mouseup', 'touchend', 'keyup'].includes(event.type); - /** - * Reset loadjs dependencies statuses - */ - loadjs.reset = function reset() { - bundleIdCache = {}; - bundleResultCache = {}; - bundleCallbackQueue = {}; - }; + // If we're done seeking and it was playing, resume playback + if (play && done) { + seek.removeAttribute('play-on-seeked'); + _this4.player.play(); + } else if (!done && _this4.player.playing) { + seek.setAttribute('play-on-seeked', ''); + _this4.player.pause(); + } + }); + // Seek + bind(this.player.elements.inputs.seek, inputEvent, function (event) { + var seek = event.currentTarget; - /** - * Determine if bundle has already been defined - * @param String} bundleId - The bundle id - */ - loadjs.isDefined = function isDefined(bundleId) { - return bundleId in bundleIdCache; - }; + // If it exists, use seek-value instead of "value" for consistency with tooltip time (#954) + var seekTo = seek.getAttribute('seek-value'); + if (is.empty(seekTo)) { + seekTo = seek.value; + } - // export - return loadjs; + seek.removeAttribute('seek-value'); - })); - }); + _this4.player.currentTime = seekTo / seek.max * _this4.player.duration; + }, 'seek'); - // ========================================================================== + // Current time invert + // Only if one time element is used for both currentTime and duration + if (this.player.config.toggleInvert && !is.element(this.player.elements.display.duration)) { + bind(this.player.elements.display.currentTime, 'click', function () { + // Do nothing if we're at the start + if (_this4.player.currentTime === 0) { + return; + } - function loadScript(url) { - return new Promise(function (resolve, reject) { - loadjs_umd(url, { - success: resolve, - error: reject - }); - }); - } + _this4.player.config.invertTime = !_this4.player.config.invertTime; - // ========================================================================== + controls.timeUpdate.call(_this4.player); + }); + } - // Parse Vimeo ID from URL - function parseId(url) { - if (is.empty(url)) { - return null; - } + // Volume + bind(this.player.elements.inputs.volume, inputEvent, function (event) { + _this4.player.volume = event.target.value; + }, 'volume'); - if (is.number(Number(url))) { - return url; - } + // Polyfill for lower fill in for webkit + if (browser.isWebkit) { + Array.from(getElements.call(this.player, 'input[type="range"]')).forEach(function (element) { + bind(element, 'input', function (event) { + return controls.updateRangeFill.call(_this4.player, event.target); + }); + }); + } - var regex = /^.*(vimeo.com\/|video\/)(\d+).*/; - return url.match(regex) ? RegExp.$2 : url; - } + // Seek tooltip + bind(this.player.elements.progress, 'mouseenter mouseleave mousemove', function (event) { + return controls.updateSeekTooltip.call(_this4.player, event); + }); - // Get aspect ratio for dimensions - function getAspectRatio(width, height) { - var getRatio = function getRatio(w, h) { - return h === 0 ? w : getRatio(h, w % h); - }; - var ratio = getRatio(width, height); - return width / ratio + ':' + height / ratio; - } - - // Set playback state and trigger change (only on actual change) - function assurePlaybackState(play) { - if (play && !this.embed.hasPlayed) { - this.embed.hasPlayed = true; - } - if (this.media.paused === play) { - this.media.paused = !play; - triggerEvent.call(this, this.media, play ? 'play' : 'pause'); - } - } - - var vimeo = { - setup: function setup() { - var _this = this; + // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting) + bind(this.player.elements.controls, 'mouseenter mouseleave', function (event) { + _this4.player.elements.controls.hover = !_this4.player.touch && event.type === 'mouseenter'; + }); - // Add embed class for responsive - toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting) + bind(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) { + _this4.player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type); + }); - // Set intial ratio - vimeo.setAspectRatio.call(this); + // Focus in/out on controls + bind(this.player.elements.controls, 'focusin focusout', function (event) { + var _player = _this4.player, + config = _player.config, + elements = _player.elements, + timers = _player.timers; - // Load the API if not already - if (!is.object(window.Vimeo)) { - loadScript(this.config.urls.vimeo.sdk).then(function () { - vimeo.ready.call(_this); - }).catch(function (error) { - _this.debug.warn('Vimeo API failed to load', error); - }); - } else { - vimeo.ready.call(this); - } - }, + // Skip transition to prevent focus from scrolling the parent element + toggleClass(elements.controls, config.classNames.noTransition, event.type === 'focusin'); - // Set aspect ratio - // For Vimeo we have an extra 300% height
to hide the standard controls and UI - setAspectRatio: function setAspectRatio(input) { - var _split = (is.string(input) ? input : this.config.ratio).split(':'), - _split2 = slicedToArray(_split, 2), - x = _split2[0], - y = _split2[1]; + // Toggle + ui.toggleControls.call(_this4.player, event.type === 'focusin'); - var padding = 100 / x * y; - this.elements.wrapper.style.paddingBottom = padding + '%'; + // If focusin, hide again after delay + if (event.type === 'focusin') { + // Restore transition + setTimeout(function () { + toggleClass(elements.controls, config.classNames.noTransition, false); + }, 0); - if (this.supported.ui) { - var height = 240; - var offset = (height - padding) / (height / 50); + // Delay a little more for keyboard users + var delay = _this4.touch ? 3000 : 4000; - this.media.style.transform = 'translateY(-' + offset + '%)'; - } - }, + // Clear timer + clearTimeout(timers.controls); + // Hide + timers.controls = setTimeout(function () { + return ui.toggleControls.call(_this4.player, false); + }, delay); + } + }); + // Mouse wheel for volume + bind(this.player.elements.inputs.volume, 'wheel', function (event) { + // Detect "natural" scroll - suppored on OS X Safari only + // Other browsers on OS X will be inverted until support improves + var inverted = event.webkitDirectionInvertedFromDevice; - // API Ready - ready: function ready$$1() { - var _this2 = this; + // Get delta from event. Invert if `inverted` is true - var player = this; + var _map = [event.deltaX, -event.deltaY].map(function (value) { + return inverted ? -value : value; + }), + _map2 = slicedToArray(_map, 2), + x = _map2[0], + y = _map2[1]; - // Get Vimeo params for the iframe - var options = { - loop: player.config.loop.active, - autoplay: player.autoplay, - // muted: player.muted, - byline: false, - portrait: false, - title: false, - speed: true, - transparent: 0, - gesture: 'media', - playsinline: !this.config.fullscreen.iosNative - }; - var params = buildUrlParams(options); + // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta) - // Get the source URL or ID - var source = player.media.getAttribute('src'); - // Get from
if needed - if (is.empty(source)) { - source = player.media.getAttribute(player.config.attributes.embed.id); - } + var direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y); - var id = parseId(source); + // Change the volume by 2% + _this4.player.increaseVolume(direction / 50); - // Build an iframe - var iframe = createElement('iframe'); - var src = format(player.config.urls.vimeo.iframe, id, params); - iframe.setAttribute('src', src); - iframe.setAttribute('allowfullscreen', ''); - iframe.setAttribute('allowtransparency', ''); - iframe.setAttribute('allow', 'autoplay'); + // Don't break page scrolling at max and min + var volume = _this4.player.media.volume; - // Get poster, if already set - var poster = player.poster; + if (direction === 1 && volume < 1 || direction === -1 && volume > 0) { + event.preventDefault(); + } + }, 'volume', false); + } + }]); + return Listeners; + }(); - // Inject the package + var logo = { + setup: function setup() { + // add custom logo + if (this.config.logo && this.config.logo.url) { + // build logo container + var logoContainer = document.createElement('div'); + toggleClass(logoContainer, this.config.classNames.logo, true); - var wrapper = createElement('div', { poster: poster, class: player.config.classNames.embedContainer }); - wrapper.appendChild(iframe); - player.media = replaceElement(wrapper, player.media); + // image put into logo container if link not present + var imageContainer = logoContainer; - // Get poster image - fetch(format(player.config.urls.vimeo.api, id), 'json').then(function (response) { - if (is.empty(response)) { - return; + if (this.config.logo.link) { + // if logo.link setup, put image into a + var linkElement = document.createElement('a'); + setAttributes(linkElement, { + href: this.config.logo.link + }); + logoContainer.appendChild(linkElement); + imageContainer = linkElement; } - // Get the URL for thumbnail - var url = new URL(response[0].thumbnail_large); + // build logo image + var logoElement = document.createElement('img'); + setAttributes(logoElement, { + src: this.config.logo.url + }); + imageContainer.appendChild(logoElement); + this.elements.container.appendChild(logoContainer); + } + } + }; - // Get original image - url.pathname = url.pathname.split('_')[0] + '.jpg'; + var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; - // Set and show poster - ui.setPoster.call(player, url.href).catch(function () {}); - }); + function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; + } - // Setup instance - // https://github.com/vimeo/player.js - player.embed = new window.Vimeo.Player(iframe, { - autopause: player.config.autopause, - muted: player.muted - }); + var loadjs_umd = createCommonjsModule(function (module, exports) { + (function(root, factory) { + if (typeof undefined === 'function' && undefined.amd) { + undefined([], factory); + } else { + module.exports = factory(); + } + }(commonjsGlobal, function() { + /** + * Global dependencies. + * @global {Object} document - DOM + */ - player.media.paused = true; - player.media.currentTime = 0; + var devnull = function() {}, + bundleIdCache = {}, + bundleResultCache = {}, + bundleCallbackQueue = {}; - // Disable native text track rendering - if (player.supported.ui) { - player.embed.disableTextTrack(); - } - // Create a faux HTML5 API using the Vimeo API - player.media.play = function () { - assurePlaybackState.call(player, true); - return player.embed.play(); - }; + /** + * Subscribe to bundle load event. + * @param {string[]} bundleIds - Bundle ids + * @param {Function} callbackFn - The callback function + */ + function subscribe(bundleIds, callbackFn) { + // listify + bundleIds = bundleIds.push ? bundleIds : [bundleIds]; - player.media.pause = function () { - assurePlaybackState.call(player, false); - return player.embed.pause(); - }; + var depsNotFound = [], + i = bundleIds.length, + numWaiting = i, + fn, + bundleId, + r, + q; - player.media.stop = function () { - player.pause(); - player.currentTime = 0; - }; + // define callback function + fn = function (bundleId, pathsNotFound) { + if (pathsNotFound.length) depsNotFound.push(bundleId); - // Seeking - var currentTime = player.media.currentTime; + numWaiting--; + if (!numWaiting) callbackFn(depsNotFound); + }; - Object.defineProperty(player.media, 'currentTime', { - get: function get$$1() { - return currentTime; - }, - set: function set$$1(time) { - // Vimeo will automatically play on seek if the video hasn't been played before + // register callback + while (i--) { + bundleId = bundleIds[i]; - // Get current paused state and volume etc - var embed = player.embed, - media = player.media, - paused = player.paused, - volume = player.volume; + // execute callback if in result cache + r = bundleResultCache[bundleId]; + if (r) { + fn(bundleId, r); + continue; + } - var restorePause = paused && !embed.hasPlayed; + // add to callback queue + q = bundleCallbackQueue[bundleId] = bundleCallbackQueue[bundleId] || []; + q.push(fn); + } + } - // Set seeking state and trigger event - media.seeking = true; - triggerEvent.call(player, media, 'seeking'); - // If paused, mute until seek is complete - Promise.resolve(restorePause && embed.setVolume(0)) - // Seek - .then(function () { - return embed.setCurrentTime(time); - }) - // Restore paused - .then(function () { - return restorePause && embed.pause(); - }) - // Restore volume - .then(function () { - return restorePause && embed.setVolume(volume); - }).catch(function () { - // Do nothing - }); - } - }); + /** + * Publish bundle load event. + * @param {string} bundleId - Bundle id + * @param {string[]} pathsNotFound - List of files not found + */ + function publish(bundleId, pathsNotFound) { + // exit if id isn't defined + if (!bundleId) return; - // Playback speed - var speed = player.config.speed.selected; - Object.defineProperty(player.media, 'playbackRate', { - get: function get$$1() { - return speed; - }, - set: function set$$1(input) { - player.embed.setPlaybackRate(input).then(function () { - speed = input; - triggerEvent.call(player, player.media, 'ratechange'); - }).catch(function (error) { - // Hide menu item (and menu if empty) - if (error.name === 'Error') { - controls.setSpeedMenu.call(player, []); - } - }); - } - }); + var q = bundleCallbackQueue[bundleId]; - // Volume - var volume = player.config.volume; + // cache result + bundleResultCache[bundleId] = pathsNotFound; - Object.defineProperty(player.media, 'volume', { - get: function get$$1() { - return volume; - }, - set: function set$$1(input) { - player.embed.setVolume(input).then(function () { - volume = input; - triggerEvent.call(player, player.media, 'volumechange'); - }); - } - }); + // exit if queue is empty + if (!q) return; - // Muted - var muted = player.config.muted; + // empty callback queue + while (q.length) { + q[0](bundleId, pathsNotFound); + q.splice(0, 1); + } + } - Object.defineProperty(player.media, 'muted', { - get: function get$$1() { - return muted; - }, - set: function set$$1(input) { - var toggle = is.boolean(input) ? input : false; - player.embed.setVolume(toggle ? 0 : player.config.volume).then(function () { - muted = toggle; - triggerEvent.call(player, player.media, 'volumechange'); - }); - } - }); + /** + * Execute callbacks. + * @param {Object or Function} args - The callback args + * @param {string[]} depsNotFound - List of dependencies not found + */ + function executeCallbacks(args, depsNotFound) { + // accept function as argument + if (args.call) args = {success: args}; - // Loop - var loop = player.config.loop; + // success and error callbacks + if (depsNotFound.length) (args.error || devnull)(depsNotFound); + else (args.success || devnull)(args); + } - Object.defineProperty(player.media, 'loop', { - get: function get$$1() { - return loop; - }, - set: function set$$1(input) { - var toggle = is.boolean(input) ? input : player.config.loop.active; - player.embed.setLoop(toggle).then(function () { - loop = toggle; - }); - } - }); + /** + * Load individual file. + * @param {string} path - The file path + * @param {Function} callbackFn - The callback function + */ + function loadFile(path, callbackFn, args, numTries) { + var doc = document, + async = args.async, + maxTries = (args.numRetries || 0) + 1, + beforeCallbackFn = args.before || devnull, + pathStripped = path.replace(/^(css|img)!/, ''), + isCss, + e; - // Source - var currentSrc = void 0; - player.embed.getVideoUrl().then(function (value) { - currentSrc = value; - }).catch(function (error) { - _this2.debug.warn(error); - }); + numTries = numTries || 0; - Object.defineProperty(player.media, 'currentSrc', { - get: function get$$1() { - return currentSrc; - } - }); + if (/(^css!|\.css$)/.test(path)) { + isCss = true; - // Ended - Object.defineProperty(player.media, 'ended', { - get: function get$$1() { - return player.currentTime === player.duration; - } - }); + // css + e = doc.createElement('link'); + e.rel = 'stylesheet'; + e.href = pathStripped; //.replace(/^css!/, ''); // remove "css!" prefix + } else if (/(^img!|\.(png|gif|jpg|svg)$)/.test(path)) { + // image + e = doc.createElement('img'); + e.src = pathStripped; + } else { + // javascript + e = doc.createElement('script'); + e.src = path; + e.async = async === undefined ? true : async; + } - // Set aspect ratio based on video size - Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) { - var ratio = getAspectRatio(dimensions[0], dimensions[1]); - vimeo.setAspectRatio.call(_this2, ratio); - }); + e.onload = e.onerror = e.onbeforeload = function (ev) { + var result = ev.type[0]; - // Set autopause - player.embed.setAutopause(player.config.autopause).then(function (state) { - player.config.autopause = state; - }); + // Note: The following code isolates IE using `hideFocus` and treats empty + // stylesheets as failures to get around lack of onerror support + if (isCss && 'hideFocus' in e) { + try { + if (!e.sheet.cssText.length) result = 'e'; + } catch (x) { + // sheets objects created from load errors don't allow access to + // `cssText` + result = 'e'; + } + } - // Get title - player.embed.getVideoTitle().then(function (title) { - player.config.title = title; - ui.setTitle.call(_this2); - }); + // handle retries in case of load failure + if (result == 'e') { + // increment counter + numTries += 1; - // Get current time - player.embed.getCurrentTime().then(function (value) { - currentTime = value; - triggerEvent.call(player, player.media, 'timeupdate'); - }); + // exit function and try again + if (numTries < maxTries) { + return loadFile(path, callbackFn, args, numTries); + } + } - // Get duration - player.embed.getDuration().then(function (value) { - player.media.duration = value; - triggerEvent.call(player, player.media, 'durationchange'); - }); + // execute callback + callbackFn(path, result, ev.defaultPrevented); + }; - // Get captions - player.embed.getTextTracks().then(function (tracks) { - player.media.textTracks = tracks; - captions.setup.call(player); - }); + // add to document (unless callback returns `false`) + if (beforeCallbackFn(path, e) !== false) doc.head.appendChild(e); + } - player.embed.on('cuechange', function (_ref) { - var _ref$cues = _ref.cues, - cues = _ref$cues === undefined ? [] : _ref$cues; - var strippedCues = cues.map(function (cue) { - return stripHTML(cue.text); - }); - captions.updateCues.call(player, strippedCues); - }); + /** + * Load multiple files. + * @param {string[]} paths - The file paths + * @param {Function} callbackFn - The callback function + */ + function loadFiles(paths, callbackFn, args) { + // listify paths + paths = paths.push ? paths : [paths]; - player.embed.on('loaded', function () { - // Assure state and events are updated on autoplay - player.embed.getPaused().then(function (paused) { - assurePlaybackState.call(player, !paused); - if (!paused) { - triggerEvent.call(player, player.media, 'playing'); - } - }); + var numWaiting = paths.length, + x = numWaiting, + pathsNotFound = [], + fn, + i; - if (is.element(player.embed.element) && player.supported.ui) { - var frame = player.embed.element; + // define callback function + fn = function(path, result, defaultPrevented) { + // handle error + if (result == 'e') pathsNotFound.push(path); - // Fix keyboard focus issues - // https://github.com/sampotts/plyr/issues/317 - frame.setAttribute('tabindex', -1); - } - }); + // handle beforeload event. If defaultPrevented then that means the load + // will be blocked (ex. Ghostery/ABP on Safari) + if (result == 'b') { + if (defaultPrevented) pathsNotFound.push(path); + else return; + } - player.embed.on('play', function () { - assurePlaybackState.call(player, true); - triggerEvent.call(player, player.media, 'playing'); - }); + numWaiting--; + if (!numWaiting) callbackFn(pathsNotFound); + }; - player.embed.on('pause', function () { - assurePlaybackState.call(player, false); - }); + // load scripts + for (i=0; i < x; i++) loadFile(paths[i], fn, args); + } - player.embed.on('timeupdate', function (data) { - player.media.seeking = false; - currentTime = data.seconds; - triggerEvent.call(player, player.media, 'timeupdate'); - }); - player.embed.on('progress', function (data) { - player.media.buffered = data.percent; - triggerEvent.call(player, player.media, 'progress'); + /** + * Initiate script load and register bundle. + * @param {(string|string[])} paths - The file paths + * @param {(string|Function)} [arg1] - The bundleId or success callback + * @param {Function} [arg2] - The success or error callback + * @param {Function} [arg3] - The error callback + */ + function loadjs(paths, arg1, arg2) { + var bundleId, + args; - // Check all loaded - if (parseInt(data.percent, 10) === 1) { - triggerEvent.call(player, player.media, 'canplaythrough'); - } + // bundleId (if string) + if (arg1 && arg1.trim) bundleId = arg1; - // Get duration as if we do it before load, it gives an incorrect value - // https://github.com/sampotts/plyr/issues/891 - player.embed.getDuration().then(function (value) { - if (value !== player.media.duration) { - player.media.duration = value; - triggerEvent.call(player, player.media, 'durationchange'); - } - }); - }); + // args (default is {}) + args = (bundleId ? arg2 : arg1) || {}; - player.embed.on('seeked', function () { - player.media.seeking = false; - triggerEvent.call(player, player.media, 'seeked'); - }); + // throw error if bundle is already defined + if (bundleId) { + if (bundleId in bundleIdCache) { + throw "LoadJS"; + } else { + bundleIdCache[bundleId] = true; + } + } - player.embed.on('ended', function () { - player.media.paused = true; - triggerEvent.call(player, player.media, 'ended'); - }); + // load scripts + loadFiles(paths, function (pathsNotFound) { + // execute callbacks + executeCallbacks(args, pathsNotFound); - player.embed.on('error', function (detail) { - player.media.error = detail; - triggerEvent.call(player, player.media, 'error'); - }); + // publish bundle load event + publish(bundleId, pathsNotFound); + }, args); + } - // Rebuild UI - setTimeout(function () { - return ui.build.call(player); - }, 0); - } + + /** + * Execute callbacks when dependencies have been satisfied. + * @param {(string|string[])} deps - List of bundle ids + * @param {Object} args - success/error arguments + */ + loadjs.ready = function ready(deps, args) { + // subscribe to bundle load event + subscribe(deps, function (depsNotFound) { + // execute callbacks + executeCallbacks(args, depsNotFound); + }); + + return loadjs; }; - // ========================================================================== - // Parse YouTube ID from URL - function parseId$1(url) { - if (is.empty(url)) { - return null; - } + /** + * Manually satisfy bundle dependencies. + * @param {string} bundleId - The bundle id + */ + loadjs.done = function done(bundleId) { + publish(bundleId, []); + }; - var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/; - return url.match(regex) ? RegExp.$2 : url; - } - // Standardise YouTube quality unit - function mapQualityUnit(input) { - var qualities = { - hd2160: 2160, - hd1440: 1440, - hd1080: 1080, - hd720: 720, - large: 480, - medium: 360, - small: 240, - tiny: 144 - }; + /** + * Reset loadjs dependencies statuses + */ + loadjs.reset = function reset() { + bundleIdCache = {}; + bundleResultCache = {}; + bundleCallbackQueue = {}; + }; - var entry = Object.entries(qualities).find(function (entry) { - return entry.includes(input); - }); - if (entry) { - // Get the match corresponding to the input - return entry.find(function (value) { - return value !== input; - }); - } + /** + * Determine if bundle has already been defined + * @param String} bundleId - The bundle id + */ + loadjs.isDefined = function isDefined(bundleId) { + return bundleId in bundleIdCache; + }; - return 'default'; + + // export + return loadjs; + + })); + }); + + // ========================================================================== + + function loadScript(url) { + return new Promise(function (resolve, reject) { + loadjs_umd(url, { + success: resolve, + error: reject + }); + }); } - function mapQualityUnits(levels) { - if (is.empty(levels)) { - return levels; + // ========================================================================== + + // Parse Vimeo ID from URL + function parseId(url) { + if (is.empty(url)) { + return null; } - return dedupe(levels.map(function (level) { - return mapQualityUnit(level); - })); + if (is.number(Number(url))) { + return url; + } + + var regex = /^.*(vimeo.com\/|video\/)(\d+).*/; + return url.match(regex) ? RegExp.$2 : url; + } + + // Get aspect ratio for dimensions + function getAspectRatio(width, height) { + var getRatio = function getRatio(w, h) { + return h === 0 ? w : getRatio(h, w % h); + }; + var ratio = getRatio(width, height); + return width / ratio + ':' + height / ratio; } // Set playback state and trigger change (only on actual change) - function assurePlaybackState$1(play) { + function assurePlaybackState(play) { if (play && !this.embed.hasPlayed) { this.embed.hasPlayed = true; } @@ -5875,1771 +5876,2154 @@ typeof navigator === "object" && (function (global, factory) { } } - var youtube = { + var vimeo = { setup: function setup() { var _this = this; // Add embed class for responsive toggleClass(this.elements.wrapper, this.config.classNames.embed, true); - // Set aspect ratio - youtube.setAspectRatio.call(this); + // Set intial ratio + vimeo.setAspectRatio.call(this); - // Setup API - if (is.object(window.YT) && is.function(window.YT.Player)) { - youtube.ready.call(this); - } else { - // Load the API - loadScript(this.config.urls.youtube.sdk).catch(function (error) { - _this.debug.warn('YouTube API failed to load', error); + // Load the API if not already + if (!is.object(window.Vimeo)) { + loadScript(this.config.urls.vimeo.sdk).then(function () { + vimeo.ready.call(_this); + }).catch(function (error) { + _this.debug.warn('Vimeo API failed to load', error); }); + } else { + vimeo.ready.call(this); + } + }, - // Setup callback for the API - // YouTube has it's own system of course... - window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; - - // Add to queue - window.onYouTubeReadyCallbacks.push(function () { - youtube.ready.call(_this); - }); - // Set callback to process queue - window.onYouTubeIframeAPIReady = function () { - window.onYouTubeReadyCallbacks.forEach(function (callback) { - callback(); - }); - }; - } - }, - - - // Get the media title - getTitle: function getTitle(videoId) { - var _this2 = this; - - // Try via undocumented API method first - // This method disappears now and then though... - // https://github.com/sampotts/plyr/issues/709 - if (is.function(this.embed.getVideoData)) { - var _embed$getVideoData = this.embed.getVideoData(), - title = _embed$getVideoData.title; + // Set aspect ratio + // For Vimeo we have an extra 300% height
to hide the standard controls and UI + setAspectRatio: function setAspectRatio(input) { + var _split = (is.string(input) ? input : this.config.ratio).split(':'), + _split2 = slicedToArray(_split, 2), + x = _split2[0], + y = _split2[1]; - if (is.empty(title)) { - this.config.title = title; - ui.setTitle.call(this); - return; - } - } + var padding = 100 / x * y; + this.elements.wrapper.style.paddingBottom = padding + '%'; - // Or via Google API - var key = this.config.keys.google; - if (is.string(key) && !is.empty(key)) { - var url = format(this.config.urls.youtube.api, videoId, key); + if (this.supported.ui) { + var height = 240; + var offset = (height - padding) / (height / 50); - fetch(url).then(function (result) { - if (is.object(result)) { - _this2.config.title = result.items[0].snippet.title; - ui.setTitle.call(_this2); - } - }).catch(function () {}); + this.media.style.transform = 'translateY(-' + offset + '%)'; } }, - // Set aspect ratio - setAspectRatio: function setAspectRatio() { - var ratio = this.config.ratio.split(':'); - this.elements.wrapper.style.paddingBottom = 100 / ratio[0] * ratio[1] + '%'; - }, - - - // API ready + // API Ready ready: function ready$$1() { + var _this2 = this; + var player = this; - // Ignore already setup (race condition) - var currentId = player.media.getAttribute('id'); - if (!is.empty(currentId) && currentId.startsWith('youtube-')) { - return; - } + // Get Vimeo params for the iframe + var options = { + loop: player.config.loop.active, + autoplay: player.autoplay, + // muted: player.muted, + byline: false, + portrait: false, + title: false, + speed: true, + transparent: 0, + gesture: 'media', + playsinline: !this.config.fullscreen.iosNative + }; + var params = buildUrlParams(options); // Get the source URL or ID var source = player.media.getAttribute('src'); // Get from
if needed if (is.empty(source)) { - source = player.media.getAttribute(this.config.attributes.embed.id); + source = player.media.getAttribute(player.config.attributes.embed.id); } - // Replace the