diff --git a/grunt-settings.yaml b/grunt-settings.yaml
index c645fdfbf1678..329e94535aadb 100644
--- a/grunt-settings.yaml
+++ b/grunt-settings.yaml
@@ -26,7 +26,7 @@ vendors:
'version': '1.12.1'
'dependencies': 'jquery'
'mediaelement':
- 'version': '2.23.4'
+ 'version': '4.1.1'
'dependencies': 'jquery'
'punycode':
'version': '1.4.1'
diff --git a/media/vendor/mediaelement/css/background.png b/media/vendor/mediaelement/css/background.png
deleted file mode 100644
index fd428412ae26a..0000000000000
Binary files a/media/vendor/mediaelement/css/background.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/bigplay.fw.png b/media/vendor/mediaelement/css/bigplay.fw.png
deleted file mode 100644
index 66d0e3cb73cee..0000000000000
Binary files a/media/vendor/mediaelement/css/bigplay.fw.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/bigplay.png b/media/vendor/mediaelement/css/bigplay.png
deleted file mode 100644
index 694553e31c387..0000000000000
Binary files a/media/vendor/mediaelement/css/bigplay.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/bigplay.svg b/media/vendor/mediaelement/css/bigplay.svg
deleted file mode 100644
index 2b7817005d90d..0000000000000
--- a/media/vendor/mediaelement/css/bigplay.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
\ No newline at end of file
diff --git a/media/vendor/mediaelement/css/controls-ted.png b/media/vendor/mediaelement/css/controls-ted.png
deleted file mode 100644
index 3aac05aa83cb7..0000000000000
Binary files a/media/vendor/mediaelement/css/controls-ted.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/controls-wmp-bg.png b/media/vendor/mediaelement/css/controls-wmp-bg.png
deleted file mode 100644
index 89bb9b95602ec..0000000000000
Binary files a/media/vendor/mediaelement/css/controls-wmp-bg.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/controls-wmp.png b/media/vendor/mediaelement/css/controls-wmp.png
deleted file mode 100644
index 4775ef5b02faf..0000000000000
Binary files a/media/vendor/mediaelement/css/controls-wmp.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/controls.fw.png b/media/vendor/mediaelement/css/controls.fw.png
deleted file mode 100644
index e27682ae10740..0000000000000
Binary files a/media/vendor/mediaelement/css/controls.fw.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/controls.png b/media/vendor/mediaelement/css/controls.png
deleted file mode 100644
index f6a857d800b64..0000000000000
Binary files a/media/vendor/mediaelement/css/controls.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/controls.svg b/media/vendor/mediaelement/css/controls.svg
deleted file mode 100644
index af3bd41606ae3..0000000000000
--- a/media/vendor/mediaelement/css/controls.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/media/vendor/mediaelement/css/jumpforward.png b/media/vendor/mediaelement/css/jumpforward.png
deleted file mode 100644
index 64d03841e251a..0000000000000
Binary files a/media/vendor/mediaelement/css/jumpforward.png and /dev/null differ
diff --git a/media/vendor/mediaelement/css/loading.gif b/media/vendor/mediaelement/css/loading.gif
deleted file mode 100644
index 612222be5e474..0000000000000
Binary files a/media/vendor/mediaelement/css/loading.gif and /dev/null differ
diff --git a/media/vendor/mediaelement/css/mediaelementplayer-legacy.css b/media/vendor/mediaelement/css/mediaelementplayer-legacy.css
new file mode 100644
index 0000000000000..356a965cddbf3
--- /dev/null
+++ b/media/vendor/mediaelement/css/mediaelementplayer-legacy.css
@@ -0,0 +1,716 @@
+/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
+Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
+.mejs-offscreen {
+ clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - no support for clip-path */
+ clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+}
+
+.mejs-container {
+ position: relative;
+ background: #000;
+ font-family: "Helvetica", Arial, serif;
+ text-align: left;
+ vertical-align: top;
+ text-indent: 0;
+ box-sizing: border-box;
+ min-width: 250px;
+}
+
+.mejs-container .mejs-video {
+ min-height: 140px;
+}
+
+.mejs-container * {
+ box-sizing: border-box;
+}
+
+/* Hide native play button from iOS to favor plugin button */
+.mejs-container video::-webkit-media-controls-start-playback-button {
+ display: none !important;
+ -webkit-appearance: none;
+}
+
+.mejs-fill-container,
+.mejs-fill-container .mejs-container {
+ width: 100%;
+ height: 100%;
+}
+
+.mejs-fill-container {
+ overflow: hidden;
+ position: relative;
+ margin: 0 auto;
+ background: transparent;
+}
+
+.mejs-container:focus {
+ outline: none;
+}
+
+.mejs-iframe-overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+.mejs-embed,
+.mejs-embed body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background: #000;
+ overflow: hidden;
+}
+
+.mejs-fullscreen {
+ overflow: hidden !important;
+}
+
+.mejs-container-fullscreen {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+ z-index: 1000;
+}
+
+.mejs-container-fullscreen .mejs-mediaelement,
+.mejs-container-fullscreen video {
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.mejs-clear {
+ clear: both;
+}
+
+/* Start: LAYERS */
+.mejs-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.mejs-mediaelement {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+}
+
+.mejs-poster {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-size: contain;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ z-index: 1;
+}
+
+:root .mejs-poster-img {
+ display: none;
+}
+
+.mejs-poster-img {
+ border: 0;
+ padding: 0;
+}
+
+.mejs-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+}
+
+.mejs-layer {
+ z-index: 1;
+}
+
+.mejs-overlay-play {
+ cursor: pointer;
+}
+
+.mejs-overlay-button {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80px;
+ height: 80px;
+ margin: -40px 0 0 -40px;
+ background: url("mejs-controls.svg") no-repeat;
+ background-position: 0 -39px;
+ overflow: hidden;
+ z-index: 1;
+}
+
+.mejs-overlay:hover > .mejs-overlay-button {
+ background-position: -80px -39px;
+}
+
+.mejs-overlay-loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80px;
+ height: 80px;
+ margin: -40px 0 0 -40px;
+}
+
+.mejs-overlay-loading-bg-img {
+ display: block;
+ width: 80px;
+ height: 80px;
+ background: transparent url("mejs-controls.svg") -160px -40px no-repeat;
+ -webkit-animation: mejs-loading-spinner 1s linear infinite;
+ -moz-animation: mejs-loading-spinner 1s linear infinite;
+ animation: mejs-loading-spinner 1s linear infinite;
+ z-index: 1;
+}
+
+@-moz-keyframes mejs-loading-spinner {
+ 100% {
+ -moz-transform: rotate(360deg);
+ }
+}
+
+@-webkit-keyframes mejs-loading-spinner {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
+}
+
+@keyframes mejs-loading-spinner {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+/* End: LAYERS */
+
+/* Start: CONTROL BAR */
+.mejs-controls {
+ position: absolute;
+ list-style-type: none;
+ margin: 0;
+ padding: 0 10px;
+ bottom: 0;
+ left: 0;
+ height: 40px;
+ width: 100%;
+ z-index: 1;
+}
+
+.mejs-controls:not([style*="display: none"]) {
+ background: rgba(255, 0, 0, 0.7);
+ background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35));
+}
+
+.mejs-button,
+.mejs-time,
+.mejs-time-rail {
+ float: left;
+ margin: 0;
+ width: 32px;
+ height: 40px;
+ font-size: 10px;
+ line-height: 10px;
+}
+
+.mejs-button > button {
+ cursor: pointer;
+ display: block;
+ font-size: 0;
+ line-height: 0;
+ text-decoration: none;
+ margin: 10px 6px;
+ padding: 0;
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ border: 0;
+ background: transparent url("mejs-controls.svg");
+ overflow: hidden;
+}
+
+/* :focus for accessibility */
+.mejs-button > button:focus {
+ outline: dotted 1px #999;
+}
+
+.mejs-container-keyboard-inactive a,
+.mejs-container-keyboard-inactive a:focus,
+.mejs-container-keyboard-inactive button,
+.mejs-container-keyboard-inactive button:focus,
+.mejs-container-keyboard-inactive [role=slider],
+.mejs-container-keyboard-inactive [role=slider]:focus {
+ outline: 0;
+}
+
+/* End: CONTROL BAR */
+
+/* Start: Time (Current / Duration) */
+.mejs-time {
+ color: #fff;
+ display: block;
+ height: 24px;
+ width: auto;
+ font-weight: bold;
+ font-size: 11px;
+ padding: 16px 6px 0 6px;
+ overflow: hidden;
+ text-align: center;
+ box-sizing: content-box;
+}
+
+/* End: Time (Current / Duration) */
+
+/* Start: Play/Pause/Stop */
+.mejs-play > button {
+ background-position: 0 0;
+}
+
+.mejs-pause > button {
+ background-position: -20px 0;
+}
+
+.mejs-replay > button {
+ background-position: -160px 0;
+}
+
+/* End: Play/Pause/Stop */
+
+/* Start: Progress Bar */
+.mejs-time-rail {
+ direction: ltr;
+ width: 200px;
+ padding-top: 10px;
+ height: 40px;
+ position: relative;
+ margin: 0 10px;
+}
+
+.mejs-time-total,
+.mejs-time-buffering,
+.mejs-time-loaded,
+.mejs-time-current,
+.mejs-time-float,
+.mejs-time-hovered,
+.mejs-time-float-current,
+.mejs-time-float-corner,
+.mejs-time-marker {
+ cursor: pointer;
+ display: block;
+ position: absolute;
+ height: 10px;
+ border-radius: 2px;
+}
+
+.mejs-time-total {
+ margin: 5px 0 0 0;
+ background: rgba(255, 255, 255, 0.3);
+ width: 100%;
+}
+
+.mejs-time-buffering {
+ width: 100%;
+ background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-size: 15px 15px;
+ animation: buffering-stripes 2s linear infinite;
+}
+
+@keyframes buffering-stripes {
+ from {
+ background-position: 0 0;
+ }
+ to {
+ background-position: 30px 0;
+ }
+}
+
+.mejs-time-loaded {
+ background: rgba(255, 255, 255, .3);
+}
+
+.mejs-time-current, .mejs-time-handle-content {
+ background: rgba(255, 255, 255, 0.9);
+}
+
+.mejs-time-hovered {
+ background: rgba(255, 255, 255, .5);
+ z-index: 10;
+}
+
+.mejs-time-hovered.negative {
+ background: rgba(0, 0, 0, 0.2);
+}
+
+.mejs-time-current, .mejs-time-buffering, .mejs-time-loaded, .mejs-time-hovered {
+ width: 100%;
+ left: 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
+ -ms-transform: scaleX(0);
+ transform: scaleX(0);
+ transition: .15s ease-in all;
+}
+
+.mejs-time-hovered {
+ transition: height .1s cubic-bezier(0.44, 0.0, 1, 1);
+}
+
+.mejs-time-hovered.no-hover {
+ -ms-transform: scaleX(0) !important;
+ transform: scaleX(0) !important;
+}
+
+.mejs-time-handle, .mejs-time-handle-content {
+ position: absolute;
+ cursor: pointer;
+ width: 10px;
+ height: 10px;
+ border: 4px solid transparent;
+ z-index: 11;
+ left: 0;
+ -ms-transform: translateX(0px);
+ transform: translateX(0px);
+}
+
+.mejs-time-handle-content {
+ left: -4px;
+ border: 4px solid rgba(255, 255, 255, 0.9);
+ -ms-transform: scale(0);
+ transform: scale(0);
+ top: -4px;
+ border-radius: 50%;
+}
+
+.mejs-time-rail:hover .mejs-time-handle-content, .mejs-time-rail .mejs-time-handle-content:focus, .mejs-time-rail .mejs-time-handle-content:active {
+ -ms-transform: scale(1);
+ transform: scale(1);
+}
+
+.mejs-time-float {
+ position: absolute;
+ display: none;
+ background: #eee;
+ width: 36px;
+ height: 17px;
+ border: solid 1px #333;
+ top: -26px;
+ margin-left: -18px;
+ text-align: center;
+ color: #111;
+}
+
+.mejs-time-float-current {
+ margin: 2px;
+ width: 30px;
+ display: block;
+ text-align: center;
+ left: 0;
+}
+
+.mejs-time-float-corner {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ line-height: 0;
+ border: solid 5px #eee;
+ border-color: #eee transparent transparent transparent;
+ border-radius: 0;
+ top: 15px;
+ left: 13px;
+}
+
+.mejs-long-video .mejs-time-float {
+ width: 64px;
+ margin-left: -23px;
+}
+
+.mejs-long-video .mejs-time-float-current {
+ width: 60px;
+}
+
+.mejs-long-video .mejs-time-float-corner {
+ left: 18px;
+}
+
+.mejs-broadcast {
+ color: #fff;
+ position: absolute;
+ width: 100%;
+ height: 10px;
+ top: 15px;
+}
+
+/* End: Progress Bar */
+
+/* Start: Fullscreen */
+.mejs-fullscreen-button > button {
+ background-position: -80px 0;
+}
+
+.mejs-unfullscreen > button {
+ background-position: -100px 0;
+}
+
+/* End: Fullscreen */
+
+/* Start: Mute/Volume */
+.mejs-mute > button {
+ background-position: -60px 0;
+}
+
+.mejs-unmute > button {
+ background-position: -40px 0;
+}
+
+.mejs-volume-button {
+ position: relative;
+}
+
+.mejs-volume-button > .mejs-volume-slider {
+ display: none;
+ height: 115px;
+ width: 25px;
+ background: rgba(50, 50, 50, 0.7);
+ border-radius: 0;
+ top: -115px;
+ left: 5px;
+ z-index: 1;
+ position: absolute;
+ margin: 0;
+}
+
+.mejs-volume-button:hover {
+ border-radius: 0 0 4px 4px;
+}
+
+.mejs-volume-total {
+ position: absolute;
+ left: 11px;
+ top: 8px;
+ width: 2px;
+ height: 100px;
+ background: rgba(255, 255, 255, 0.5);
+ margin: 0;
+}
+
+.mejs-volume-current {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.9);
+ margin: 0;
+}
+
+.mejs-volume-handle {
+ position: absolute;
+ left: 0;
+ bottom: 100%;
+ width: 16px;
+ height: 6px;
+ margin: 0 0 -3px -7px;
+ background: rgba(255, 255, 255, 0.9);
+ cursor: ns-resize;
+ border-radius: 1px;
+}
+
+.mejs-horizontal-volume-slider {
+ height: 36px;
+ width: 56px;
+ position: relative;
+ display: block;
+ float: left;
+ vertical-align: middle;
+}
+
+.mejs-horizontal-volume-total {
+ position: absolute;
+ left: 0;
+ top: 16px;
+ width: 50px;
+ height: 8px;
+ margin: 0;
+ padding: 0;
+ font-size: 1px;
+ border-radius: 2px;
+ background: rgba(50, 50, 50, 0.8);
+}
+
+.mejs-horizontal-volume-current {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ font-size: 1px;
+ border-radius: 2px;
+ background: rgba(255, 255, 255, 0.8);
+}
+
+.mejs-horizontal-volume-handle {
+ display: none;
+}
+
+/* End: Mute/Volume */
+
+/* Start: Track (Captions and Chapters) */
+.mejs-captions-button, .mejs-chapters-button {
+ position: relative;
+}
+
+.mejs-captions-button > button {
+ background-position: -140px 0;
+}
+
+.mejs-chapters-button > button {
+ background-position: -180px 0;
+}
+
+.mejs-captions-button > .mejs-captions-selector, .mejs-chapters-button > .mejs-chapters-selector {
+ visibility: hidden;
+ position: absolute;
+ bottom: 40px;
+ right: -51px;
+ width: 85px;
+ background: rgba(50, 50, 50, 0.7);
+ border: solid 1px transparent;
+ padding: 0;
+ overflow: hidden;
+ border-radius: 0;
+}
+
+.mejs-chapters-button > .mejs-chapters-selector {
+ width: 110px;
+}
+
+.mejs-captions-button > .mejs-captions-selector, .mejs-chapters-button > .mejs-chapters-selector {
+ visibility: visible;
+}
+
+.mejs-captions-selector-list, .mejs-chapters-selector-list {
+ margin: 0;
+ padding: 0;
+ display: block;
+ list-style-type: none !important;
+ overflow: hidden;
+}
+
+.mejs-captions-selector-list-item, .mejs-chapters-selector-list-item {
+ margin: 0 0 6px 0;
+ padding: 0 10px;
+ list-style-type: none !important;
+ display: block;
+ color: #fff;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.mejs-captions-selector-list-item:hover, .mejs-chapters-selector-list-item:hover {
+ background-color: rgb(200, 200, 200) !important;
+ background-color: rgba(255, 255, 255, 0.4) !important;
+}
+
+.mejs-captions-selector-input, .mejs-chapters-selector-input {
+ clear: both;
+ float: left;
+ margin: 3px 3px 0 5px;
+ position: absolute;
+ left: -1000px;
+}
+
+.mejs-captions-selector-label, .mejs-chapters-selector-label {
+ width: 55px;
+ float: left;
+ padding: 4px 0 0 0;
+ line-height: 15px;
+ font-size: 10px;
+ cursor: pointer;
+}
+
+.mejs-captions-selected, .mejs-chapters-selected {
+ color: rgba(33, 248, 248, 1);
+}
+
+.mejs-captions-translations {
+ font-size: 10px;
+ margin: 0 0 5px 0;
+}
+
+.mejs-captions-layer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ text-align: center;
+ line-height: 20px;
+ font-size: 16px;
+ color: #fff;
+}
+
+.mejs-captions-layer a {
+ color: #fff;
+ text-decoration: underline;
+}
+
+.mejs-captions-layer[lang=ar] {
+ font-size: 20px;
+ font-weight: normal;
+}
+
+.mejs-captions-position {
+ position: absolute;
+ width: 100%;
+ bottom: 15px;
+ left: 0;
+}
+
+.mejs-captions-position-hover {
+ bottom: 35px;
+}
+
+.mejs-captions-text, .mejs-captions-text * {
+ padding: 0;
+ background: rgba(20, 20, 20, 0.5);
+ white-space: pre-wrap;
+ box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
+}
+
+.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container {
+ display: none;
+}
+
+/* End: Track (Captions and Chapters) */
+
+/* Start: Error */
+.me_cannotplay a {
+ font-weight: bold;
+}
+
+.mejs-container .me_cannotplay a {
+ color: #fff;
+}
+
+.me_cannotplay span {
+ padding: 15px;
+ display: block;
+}
+
+/* End: Error */
diff --git a/media/vendor/mediaelement/css/mediaelementplayer-legacy.min.css b/media/vendor/mediaelement/css/mediaelementplayer-legacy.min.css
new file mode 100644
index 0000000000000..148f8df5b0048
--- /dev/null
+++ b/media/vendor/mediaelement/css/mediaelementplayer-legacy.min.css
@@ -0,0 +1 @@
+.mejs-offscreen{clip:rect(1px,1px,1px,1px);-webkit-clip-path:polygon(0 0,0 0,0 0,0 0);clip-path:polygon(0 0,0 0,0 0,0 0);position:absolute!important;height:1px;width:1px;overflow:hidden}.mejs-container{position:relative;background:#000;font-family:Helvetica,Arial,serif;text-align:left;vertical-align:top;text-indent:0;box-sizing:border-box;min-width:250px}.mejs-container .mejs-video{min-height:140px}.mejs-container *{box-sizing:border-box}.mejs-container video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}.mejs-fill-container,.mejs-fill-container .mejs-container{width:100%;height:100%}.mejs-fill-container{overflow:hidden;position:relative;margin:0 auto;background:transparent}.mejs-container:focus{outline:none}.mejs-iframe-overlay{position:absolute;width:100%;height:100%}.mejs-embed,.mejs-embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs-fullscreen{overflow:hidden!important}.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:4}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width:100%!important;height:100%!important}.mejs-clear{clear:both}.mejs-background,.mejs-mediaelement{position:absolute;top:0;left:0}.mejs-mediaelement{width:100%;height:100%;z-index:0}.mejs-poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat;z-index:1}:root .mejs-poster-img{display:none}.mejs-poster-img{border:0;padding:0}.mejs-overlay{position:absolute;top:0;left:0;z-index:1}.mejs-layer{z-index:1}.mejs-overlay-play{cursor:pointer}.mejs-overlay-button{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:url(mejs-controls.svg) no-repeat;background-position:0 -39px;overflow:hidden;z-index:1}.mejs-overlay:hover>.mejs-overlay-button{background-position:-80px -39px}.mejs-overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px}.mejs-overlay-loading-bg-img{display:block;width:80px;height:80px;background:transparent url(mejs-controls.svg) -160px -40px no-repeat;animation:a 1s linear infinite;z-index:1}@keyframes a{to{transform:rotate(1turn)}}.mejs-controls{position:absolute;list-style-type:none;margin:0;padding:0 10px;bottom:0;left:0;height:40px;width:100%;z-index:1}.mejs-controls:not([style*="display: none"]){background:rgba(255,0,0,.7);background:linear-gradient(transparent,rgba(0,0,0,.35))}.mejs-button,.mejs-time,.mejs-time-rail{float:left;margin:0;width:32px;height:40px;font-size:10px;line-height:10px}.mejs-button>button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:10px 6px;padding:0;position:absolute;height:20px;width:20px;border:0;background:transparent url(mejs-controls.svg);overflow:hidden}.mejs-button>button:focus{outline:1px dotted #999}.mejs-container-keyboard-inactive [role=slider],.mejs-container-keyboard-inactive [role=slider]:focus,.mejs-container-keyboard-inactive a,.mejs-container-keyboard-inactive a:focus,.mejs-container-keyboard-inactive button,.mejs-container-keyboard-inactive button:focus{outline:0}.mejs-time{color:#fff;display:block;height:24px;width:auto;font-weight:700;font-size:11px;padding:16px 6px 0;overflow:hidden;text-align:center;box-sizing:content-box}.mejs-play>button{background-position:0 0}.mejs-pause>button{background-position:-20px 0}.mejs-replay>button{background-position:-160px 0}.mejs-time-rail{direction:ltr;width:200px;padding-top:10px;height:40px;position:relative;margin:0 10px}.mejs-time-buffering,.mejs-time-current,.mejs-time-float,.mejs-time-float-corner,.mejs-time-float-current,.mejs-time-hovered,.mejs-time-loaded,.mejs-time-marker,.mejs-time-total{cursor:pointer;display:block;position:absolute;height:10px;border-radius:2px}.mejs-time-total{margin:5px 0 0;background:hsla(0,0%,100%,.3);width:100%}.mejs-time-buffering{width:100%;background:linear-gradient(-45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:15px 15px;animation:b 2s linear infinite}@keyframes b{0%{background-position:0 0}to{background-position:30px 0}}.mejs-time-loaded{background:hsla(0,0%,100%,.3)}.mejs-time-current,.mejs-time-handle-content{background:hsla(0,0%,100%,.9)}.mejs-time-hovered{background:hsla(0,0%,100%,.5);z-index:2}.mejs-time-hovered.negative{background:rgba(0,0,0,.2)}.mejs-time-buffering,.mejs-time-current,.mejs-time-hovered,.mejs-time-loaded{width:100%;left:0;-ms-transform-origin:0 0;transform-origin:0 0;-ms-transform:scaleX(0);transform:scaleX(0);transition:all .15s ease-in}.mejs-time-hovered{transition:height .1s cubic-bezier(.44,0,1,1)}.mejs-time-hovered.no-hover{-ms-transform:scaleX(0)!important;transform:scaleX(0)!important}.mejs-time-handle,.mejs-time-handle-content{position:absolute;cursor:pointer;width:10px;height:10px;border:4px solid transparent;z-index:3;left:0;-ms-transform:translateX(0);transform:translateX(0)}.mejs-time-handle-content{left:-4px;border:4px solid hsla(0,0%,100%,.9);-ms-transform:scale(0);transform:scale(0);top:-4px;border-radius:50%}.mejs-time-rail .mejs-time-handle-content:active,.mejs-time-rail .mejs-time-handle-content:focus,.mejs-time-rail:hover .mejs-time-handle-content{-ms-transform:scale(1);transform:scale(1)}.mejs-time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:1px solid #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs-time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs-time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:5px solid #eee;border-color:#eee transparent transparent;border-radius:0;top:15px;left:13px}.mejs-long-video .mejs-time-float{width:64px;margin-left:-23px}.mejs-long-video .mejs-time-float-current{width:60px}.mejs-long-video .mejs-time-float-corner{left:18px}.mejs-broadcast{color:#fff;position:absolute;width:100%;height:10px;top:15px}.mejs-fullscreen-button>button{background-position:-80px 0}.mejs-unfullscreen>button{background-position:-100px 0}.mejs-mute>button{background-position:-60px 0}.mejs-unmute>button{background-position:-40px 0}.mejs-volume-button{position:relative}.mejs-volume-button>.mejs-volume-slider{display:none;height:115px;width:25px;background:rgba(50,50,50,.7);border-radius:0;top:-115px;left:5px;z-index:1;position:absolute;margin:0}.mejs-volume-button:hover{border-radius:0 0 4px 4px}.mejs-volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:hsla(0,0%,100%,.5);margin:0}.mejs-volume-current{bottom:0;width:100%;height:100%;margin:0}.mejs-volume-current,.mejs-volume-handle{position:absolute;left:0;background:hsla(0,0%,100%,.9)}.mejs-volume-handle{bottom:100%;width:16px;height:6px;margin:0 0 -3px -7px;cursor:ns-resize;border-radius:1px}.mejs-horizontal-volume-slider{height:36px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs-horizontal-volume-total{top:16px;width:50px;height:8px;background:rgba(50,50,50,.8)}.mejs-horizontal-volume-current,.mejs-horizontal-volume-total{position:absolute;left:0;margin:0;padding:0;font-size:1px;border-radius:2px}.mejs-horizontal-volume-current{top:0;width:100%;height:100%;background:hsla(0,0%,100%,.8)}.mejs-horizontal-volume-handle{display:none}.mejs-captions-button,.mejs-chapters-button{position:relative}.mejs-captions-button>button{background-position:-140px 0}.mejs-chapters-button>button{background-position:-180px 0}.mejs-captions-button>.mejs-captions-selector,.mejs-chapters-button>.mejs-chapters-selector{visibility:hidden;position:absolute;bottom:40px;right:-51px;width:85px;background:rgba(50,50,50,.7);border:1px solid transparent;padding:0;overflow:hidden;border-radius:0}.mejs-chapters-button>.mejs-chapters-selector{width:110px}.mejs-captions-button>.mejs-captions-selector,.mejs-chapters-button>.mejs-chapters-selector{visibility:visible}.mejs-captions-selector-list,.mejs-chapters-selector-list{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-captions-selector-list-item,.mejs-chapters-selector-list-item{margin:0 0 6px;padding:0 10px;list-style-type:none!important;display:block;color:#fff;overflow:hidden;cursor:pointer}.mejs-captions-selector-list-item:hover,.mejs-chapters-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}.mejs-captions-selector-input,.mejs-chapters-selector-input{clear:both;float:left;margin:3px 3px 0 5px;position:absolute;left:-1000px}.mejs-captions-selector-label,.mejs-chapters-selector-label{width:55px;float:left;padding:4px 0 0;line-height:15px;font-size:10px;cursor:pointer}.mejs-captions-selected,.mejs-chapters-selected{color:#21f8f8}.mejs-captions-translations{font-size:10px;margin:0 0 5px}.mejs-captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs-captions-layer a{color:#fff;text-decoration:underline}.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs-captions-position{position:absolute;width:100%;bottom:15px;left:0}.mejs-captions-position-hover{bottom:35px}.mejs-captions-text,.mejs-captions-text *{padding:0;background:hsla(0,0%,8%,.5);white-space:pre-wrap;box-shadow:5px 0 0 hsla(0,0%,8%,.5),-5px 0 0 hsla(0,0%,8%,.5)}.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container{display:none}.me_cannotplay a{font-weight:700}.mejs-container .me_cannotplay a{color:#fff}.me_cannotplay span{padding:15px;display:block}
\ No newline at end of file
diff --git a/media/vendor/mediaelement/css/mediaelementplayer.css b/media/vendor/mediaelement/css/mediaelementplayer.css
index 8336fd54a0cb1..f9ba4f7972a0e 100644
--- a/media/vendor/mediaelement/css/mediaelementplayer.css
+++ b/media/vendor/mediaelement/css/mediaelementplayer.css
@@ -1,1007 +1,716 @@
-.mejs-offscreen{
-/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 - no likey commas */
- clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - we likey commas, no support for clip-path */
- clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
- position: absolute !important;
- height: 1px;
- width: 1px;
- overflow: hidden;
+/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
+Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
+.mejs__offscreen {
+ clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - no support for clip-path */
+ clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
}
-.mejs-container {
- position: relative;
- background: #000;
- font-family: "Helvetica", Arial, serif;
- text-align: left;
- vertical-align: top;
- text-indent: 0;
+.mejs__container {
+ position: relative;
+ background: #000;
+ font-family: "Helvetica", Arial, serif;
+ text-align: left;
+ vertical-align: top;
+ text-indent: 0;
+ box-sizing: border-box;
+ min-width: 250px;
}
-.mejs-fill-container,.mejs-fill-container .mejs-container{
- width: 100%;
- height: 100%;
+.mejs__container .mejs__video {
+ min-height: 140px;
}
-.mejs-fill-container{
- overflow: hidden;
+.mejs__container * {
+ box-sizing: border-box;
}
-.mejs-container:focus {
- outline: none;
+/* Hide native play button from iOS to favor plugin button */
+.mejs__container video::-webkit-media-controls-start-playback-button {
+ display: none !important;
+ -webkit-appearance: none;
}
-.me-plugin {
- position: absolute;
+.mejs__fill-container,
+.mejs__fill-container .mejs__container {
+ width: 100%;
+ height: 100%;
}
-.mejs-embed, .mejs-embed body {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- background: #000;
- overflow: hidden;
+.mejs__fill-container {
+ overflow: hidden;
+ position: relative;
+ margin: 0 auto;
+ background: transparent;
}
-.mejs-fullscreen {
- /* set it to not show scroll bars so 100% will work */
- overflow: hidden !important;
+.mejs__container:focus {
+ outline: none;
}
-.mejs-container-fullscreen {
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- z-index: 1000;
+.mejs__iframe-overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
}
-.mejs-container-fullscreen .mejs-mediaelement,
-.mejs-container-fullscreen video {
- width: 100%;
- height: 100%;
+
+.mejs__embed,
+.mejs__embed body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background: #000;
+ overflow: hidden;
+}
+
+.mejs__fullscreen {
+ overflow: hidden !important;
}
-.mejs-clear {
- clear: both;
+.mejs__container-fullscreen {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+ z-index: 1000;
+}
+
+.mejs__container-fullscreen .mejs__mediaelement,
+.mejs__container-fullscreen video {
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.mejs__clear {
+ clear: both;
}
/* Start: LAYERS */
-.mejs-background {
- position: absolute;
- top: 0;
- left: 0;
+.mejs__background {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.mejs__mediaelement {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+}
+
+.mejs__poster {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-size: contain;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ z-index: 1;
}
-.mejs-mediaelement {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+:root .mejs__poster-img {
+ display: none;
}
-.mejs-poster {
- position: absolute;
- top: 0;
- left: 0;
- background-size: contain ;
- background-position: 50% 50% ;
- background-repeat: no-repeat ;
+.mejs__poster-img {
+ border: 0;
+ padding: 0;
}
-:root .mejs-poster img {
- display: none ;
+
+.mejs__overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+}
+
+.mejs__layer {
+ z-index: 1;
}
-.mejs-poster img {
- border: 0;
- padding: 0;
+.mejs__overlay-play {
+ cursor: pointer;
}
-.mejs-overlay {
- position: absolute;
- top: 0;
- left: 0;
+.mejs__overlay-button {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80px;
+ height: 80px;
+ margin: -40px 0 0 -40px;
+ background: url("mejs-controls.svg") no-repeat;
+ background-position: 0 -39px;
+ overflow: hidden;
+ z-index: 1;
}
-.mejs-overlay-play {
- cursor: pointer;
+.mejs__overlay:hover > .mejs__overlay-button {
+ background-position: -80px -39px;
}
-.mejs-overlay-button {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 100px;
- height: 100px;
- margin: -50px 0 0 -50px;
- background: url("bigplay.svg") no-repeat;
+.mejs__overlay-loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80px;
+ height: 80px;
+ margin: -40px 0 0 -40px;
}
-.no-svg .mejs-overlay-button {
- background-image: url("bigplay.png");
+.mejs__overlay-loading-bg-img {
+ display: block;
+ width: 80px;
+ height: 80px;
+ background: transparent url("mejs-controls.svg") -160px -40px no-repeat;
+ -webkit-animation: mejs-loading-spinner 1s linear infinite;
+ -moz-animation: mejs-loading-spinner 1s linear infinite;
+ animation: mejs-loading-spinner 1s linear infinite;
+ z-index: 1;
}
-.mejs-overlay:hover .mejs-overlay-button {
- background-position: 0 -100px ;
+@-moz-keyframes mejs-loading-spinner {
+ 100% {
+ -moz-transform: rotate(360deg);
+ }
}
-.mejs-overlay-loading {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 80px;
- height: 80px;
- margin: -40px 0 0 -40px;
- background: #333;
- background: url("background.png");
- background: rgba(0, 0, 0, 0.9);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9)));
- background: -webkit-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
- background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
- background: -o-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
- background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
- background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
+@-webkit-keyframes mejs-loading-spinner {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
}
-.mejs-overlay-loading span {
- display: block;
- width: 80px;
- height: 80px;
- background: transparent url("loading.gif") 50% 50% no-repeat;
+@keyframes mejs-loading-spinner {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
}
/* End: LAYERS */
/* Start: CONTROL BAR */
-.mejs-container .mejs-controls {
- position: absolute;
- list-style-type: none;
- margin: 0;
- padding: 0;
- bottom: 0;
- left: 0;
- background: url("background.png");
- background: rgba(0, 0, 0, 0.7);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
- background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- height: 30px;
- width: 100%;
-}
-.mejs-container .mejs-controls div {
- list-style-type: none;
- background-image: none;
- display: block;
- float: left;
- margin: 0;
- padding: 0;
- width: 26px;
- height: 26px;
- font-size: 11px;
- line-height: 11px;
- font-family: "Helvetica", Arial, serif;
- border: 0;
-}
-
-.mejs-controls .mejs-button button {
- cursor: pointer;
- display: block;
- font-size: 0;
- line-height: 0;
- text-decoration: none;
- margin: 7px 5px;
- padding: 0;
- position: absolute;
- height: 16px;
- width: 16px;
- border: 0;
- background: transparent url("controls.svg") no-repeat;
-}
-
-.no-svg .mejs-controls .mejs-button button {
- background-image: url("controls.png");
-}
-
- /* :focus for accessibility */
-.mejs-controls .mejs-button button:focus {
- outline: dotted 1px #999;
+.mejs__controls {
+ position: absolute;
+ list-style-type: none;
+ margin: 0;
+ padding: 0 10px;
+ bottom: 0;
+ left: 0;
+ height: 40px;
+ width: 100%;
+ z-index: 1;
+}
+
+.mejs__controls:not([style*="display: none"]) {
+ background: rgba(255, 0, 0, 0.7);
+ background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35));
+}
+
+.mejs__button,
+.mejs__time,
+.mejs__time-rail {
+ float: left;
+ margin: 0;
+ width: 32px;
+ height: 40px;
+ font-size: 10px;
+ line-height: 10px;
+}
+
+.mejs__button > button {
+ cursor: pointer;
+ display: block;
+ font-size: 0;
+ line-height: 0;
+ text-decoration: none;
+ margin: 10px 6px;
+ padding: 0;
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ border: 0;
+ background: transparent url("mejs-controls.svg");
+ overflow: hidden;
+}
+
+/* :focus for accessibility */
+.mejs__button > button:focus {
+ outline: dotted 1px #999;
+}
+
+.mejs__container-keyboard-inactive a,
+.mejs__container-keyboard-inactive a:focus,
+.mejs__container-keyboard-inactive button,
+.mejs__container-keyboard-inactive button:focus,
+.mejs__container-keyboard-inactive [role=slider],
+.mejs__container-keyboard-inactive [role=slider]:focus {
+ outline: 0;
}
/* End: CONTROL BAR */
/* Start: Time (Current / Duration) */
-.mejs-container .mejs-controls .mejs-time {
- color: #fff;
- display: block;
- height: 17px;
- width: auto;
- padding: 10px 3px 0 3px ;
- overflow: hidden;
- text-align: center;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
-}
-
-.mejs-container .mejs-controls .mejs-time a {
- color: #fff;
- font-size: 11px;
- line-height: 12px;
- display: block;
- float: left;
- margin: 1px 2px 0 0;
- width: auto;
+.mejs__time {
+ color: #fff;
+ display: block;
+ height: 24px;
+ width: auto;
+ font-weight: bold;
+ font-size: 11px;
+ padding: 16px 6px 0 6px;
+ overflow: hidden;
+ text-align: center;
+ box-sizing: content-box;
}
+
/* End: Time (Current / Duration) */
/* Start: Play/Pause/Stop */
-.mejs-controls .mejs-play button {
- background-position: 0 0;
+.mejs__play > button {
+ background-position: 0 0;
}
-.mejs-controls .mejs-pause button {
- background-position: 0 -16px;
+.mejs__pause > button {
+ background-position: -20px 0;
}
-.mejs-controls .mejs-stop button {
- background-position: -112px 0;
+.mejs__replay > button {
+ background-position: -160px 0;
}
-/* Start: Play/Pause/Stop */
+
+/* End: Play/Pause/Stop */
/* Start: Progress Bar */
-.mejs-controls div.mejs-time-rail {
- direction: ltr;
- width: 200px;
- padding-top: 5px;
-}
-
-.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a {
- display: block;
- position: absolute;
- width: 180px;
- height: 10px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- cursor: pointer;
-}
-
-.mejs-controls .mejs-time-rail .mejs-time-total {
- margin: 5px;
- background: #333;
- background: rgba(50,50,50,0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
- background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
-}
-
-.mejs-controls .mejs-time-rail .mejs-time-buffering {
- width: 100%;
- background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
- background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- -webkit-background-size: 15px 15px;
- -moz-background-size: 15px 15px;
- -o-background-size: 15px 15px;
- background-size: 15px 15px;
- -webkit-animation: buffering-stripes 2s linear infinite;
- -moz-animation: buffering-stripes 2s linear infinite;
- -ms-animation: buffering-stripes 2s linear infinite;
- -o-animation: buffering-stripes 2s linear infinite;
- animation: buffering-stripes 2s linear infinite;
-}
-
-@-webkit-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
-@-moz-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
-@-ms-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
-@-o-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
-@keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
-
-.mejs-controls .mejs-time-rail .mejs-time-loaded {
- background: #3caac8;
- background: rgba(60,170,200,0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8)));
- background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- width: 0;
-}
-
-.mejs-controls .mejs-time-rail .mejs-time-current {
- background: #fff;
- background: rgba(255,255,255,0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
- background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- width: 0;
-}
-
-.mejs-controls .mejs-time-rail .mejs-time-handle {
- display: none;
- position: absolute;
- margin: 0;
- width: 10px;
- background: #fff;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- cursor: pointer;
- border: solid 2px #333;
- top: -2px;
- text-align: center;
-}
-
-.mejs-controls .mejs-time-rail .mejs-time-float {
- position: absolute;
- display: none;
- background: #eee;
- width: 36px;
- height: 17px;
- border: solid 1px #333;
- top: -26px;
- margin-left: -18px;
- text-align: center;
- color: #111;
-}
-
-.mejs-controls .mejs-time-rail .mejs-time-float-current {
- margin: 2px;
- width: 30px;
- display: block;
- text-align: center;
- left: 0;
-}
-
-.mejs-controls .mejs-time-rail .mejs-time-float-corner {
- position: absolute;
- display: block;
- width: 0;
- height: 0;
- line-height: 0;
- border: solid 5px #eee;
- border-color: #eee transparent transparent transparent;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- top: 15px;
- left: 13px;
-}
-
-.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float {
- width: 48px;
-}
-
-.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current {
- width: 44px;
-}
-
-.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner {
- left: 18px;
-}
-
-/*
-.mejs-controls .mejs-time-rail:hover .mejs-time-handle {
- visibility:visible;
-}
-*/
-/* End: Progress Bar */
+.mejs__time-rail {
+ direction: ltr;
+ width: 200px;
+ padding-top: 10px;
+ height: 40px;
+ position: relative;
+ margin: 0 10px;
+}
+
+.mejs__time-total,
+.mejs__time-buffering,
+.mejs__time-loaded,
+.mejs__time-current,
+.mejs__time-float,
+.mejs__time-hovered,
+.mejs__time-float-current,
+.mejs__time-float-corner,
+.mejs__time-marker {
+ cursor: pointer;
+ display: block;
+ position: absolute;
+ height: 10px;
+ border-radius: 2px;
+}
-/* Start: Fullscreen */
-.mejs-controls .mejs-fullscreen-button button {
- background-position: -32px 0;
+.mejs__time-total {
+ margin: 5px 0 0 0;
+ background: rgba(255, 255, 255, 0.3);
+ width: 100%;
}
-.mejs-controls .mejs-unfullscreen button {
- background-position: -32px -16px;
+.mejs__time-buffering {
+ width: 100%;
+ background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-size: 15px 15px;
+ animation: buffering-stripes 2s linear infinite;
}
-/* End: Fullscreen */
+@keyframes buffering-stripes {
+ from {
+ background-position: 0 0;
+ }
+ to {
+ background-position: 30px 0;
+ }
+}
-/* Start: Mute/Volume */
-.mejs-controls .mejs-volume-button {
-}
-
-.mejs-controls .mejs-mute button {
- background-position: -16px -16px;
-}
-
-.mejs-controls .mejs-unmute button {
- background-position: -16px 0;
-}
-
-.mejs-controls .mejs-volume-button {
- position: relative;
-}
-
-.mejs-controls .mejs-volume-button .mejs-volume-slider {
- display: none;
- height: 115px;
- width: 25px;
- background: url("background.png");
- background: rgba(50, 50, 50, 0.7);
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- top: -115px;
- left: 0;
- z-index: 1;
- position: absolute;
- margin: 0;
-}
-
-.mejs-controls .mejs-volume-button:hover {
- -webkit-border-radius: 0 0 4px 4px;
- -moz-border-radius: 0 0 4px 4px;
- border-radius: 0 0 4px 4px;
-}
-
-/*
-.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
- display: block;
-}
-*/
-
-.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
- position: absolute;
- left: 11px;
- top: 8px;
- width: 2px;
- height: 100px;
- background: #ddd;
- background: rgba(255, 255, 255, 0.5);
- margin: 0;
-}
-
-.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
- position: absolute;
- left: 11px;
- top: 8px;
- width: 2px;
- height: 100px;
- background: #ddd;
- background: rgba(255, 255, 255, 0.9);
- margin: 0;
-}
-
-.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
- position: absolute;
- left: 4px;
- top: -3px;
- width: 16px;
- height: 6px;
- background: #ddd;
- background: rgba(255, 255, 255, 0.9);
- cursor: N-resize;
- -webkit-border-radius: 1px;
- -moz-border-radius: 1px;
- border-radius: 1px;
- margin: 0;
-}
-
-/* horizontal version */
-.mejs-controls a.mejs-horizontal-volume-slider {
- height: 26px;
- width: 56px;
- position: relative;
- display: block;
- float: left;
- vertical-align: middle;
+.mejs__time-loaded {
+ background: rgba(255, 255, 255, .3);
}
-.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
- position: absolute;
- left: 0;
- top: 11px;
- width: 50px;
- height: 8px;
- margin: 0;
- padding: 0;
- font-size: 1px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- background: #333;
- background: rgba(50,50,50,0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
- background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
-}
-
-.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
- position: absolute;
- left: 0;
- top: 11px;
- width: 50px;
- height: 8px;
- margin: 0;
- padding: 0;
- font-size: 1px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- background: #fff;
- background: rgba(255,255,255,0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
- background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
-}
-
-.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
- display: none;
+.mejs__time-current, .mejs__time-handle-content {
+ background: rgba(255, 255, 255, 0.9);
}
-/* End: Mute/Volume */
+.mejs__time-hovered {
+ background: rgba(255, 255, 255, .5);
+ z-index: 10;
+}
-/* Start: Track (Captions and Chapters) */
-.mejs-controls .mejs-captions-button {
- position: relative;
-}
-
-.mejs-controls .mejs-captions-button button {
- background-position: -48px 0;
-}
-.mejs-controls .mejs-captions-button .mejs-captions-selector {
- visibility: hidden;
- position: absolute;
- bottom: 26px;
- right: -51px;
- width: 85px;
- height: 100px;
- background: url("background.png");
- background: rgba(50,50,50,0.7);
- border: solid 1px transparent;
- padding: 10px 10px 0 10px;
- overflow: hidden;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
-}
-
-.mejs-controls .mejs-captions-button:hover .mejs-captions-selector {
- visibility: visible;
-}
-
-.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
- margin: 0;
- padding: 0;
- display: block;
- list-style-type: none !important;
- overflow: hidden;
-}
-
-.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
- margin: 0 0 6px 0;
- padding: 0;
- list-style-type: none !important;
- display: block;
- color: #fff;
- overflow: hidden;
-}
-
-.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
- clear: both;
- float: left;
- margin: 3px 3px 0 5px;
-}
-
-.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
- width: 55px;
- float: left;
- padding: 4px 0 0 0;
- line-height: 15px;
- font-family: "Helvetica", Arial, serif;
- font-size: 10px;
-}
-
-.mejs-controls .mejs-captions-button .mejs-captions-translations {
- font-size: 10px;
- margin: 0 0 5px 0;
-}
-
-.mejs-chapters {
- position: absolute;
- top: 0;
- left: 0;
- border-right: solid 1px #fff;
- width: 10000px;
- z-index: 1;
-}
-
-.mejs-chapters .mejs-chapter {
- position: absolute;
- float: left;
- background: #222;
- background: rgba(0, 0, 0, 0.7);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
- background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000);
- overflow: hidden;
- border: 0;
-}
-
-.mejs-chapters .mejs-chapter .mejs-chapter-block {
- font-size: 11px;
- color: #fff;
- padding: 5px;
- display: block;
- border-right: solid 1px #333;
- border-bottom: solid 1px #333;
- cursor: pointer;
-}
-
-.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
- border-right: none;
-}
-
-.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
- background: #666;
- background: rgba(102,102,102, 0.7);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
- background: -webkit-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
- background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
- background: -o-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
- background: -ms-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
- background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6));
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);
-}
+.mejs__time-hovered.negative {
+ background: rgba(0, 0, 0, 0.2);
+}
-.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
- font-size: 12px;
- font-weight: bold;
- display: block;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin: 0 0 3px 0;
- line-height: 12px;
+.mejs__time-current, .mejs__time-buffering, .mejs__time-loaded, .mejs__time-hovered {
+ width: 100%;
+ left: 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
+ -ms-transform: scaleX(0);
+ transform: scaleX(0);
+ transition: .15s ease-in all;
}
-.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
- font-size: 12px;
- line-height: 12px;
- margin: 3px 0 4px 0;
- display: block;
- white-space: nowrap;
- text-overflow: ellipsis;
+.mejs__time-hovered {
+ transition: height .1s cubic-bezier(0.44, 0.0, 1, 1);
}
-.mejs-captions-layer {
- position: absolute;
- bottom: 0;
- left: 0;
- text-align:center;
- line-height: 20px;
- font-size: 16px;
- color: #fff;
+.mejs__time-hovered.no-hover {
+ -ms-transform: scaleX(0) !important;
+ transform: scaleX(0) !important;
}
-.mejs-captions-layer a {
- color: #fff;
- text-decoration: underline;
+.mejs__time-handle, .mejs__time-handle-content {
+ position: absolute;
+ cursor: pointer;
+ width: 10px;
+ height: 10px;
+ border: 4px solid transparent;
+ z-index: 11;
+ left: 0;
+ -ms-transform: translateX(0px);
+ transform: translateX(0px);
}
-.mejs-captions-layer[lang=ar] {
- font-size: 20px;
- font-weight: normal;
-}
-
-.mejs-captions-position {
- position: absolute;
- width: 100%;
- bottom: 15px;
- left: 0;
-}
-
-.mejs-captions-position-hover {
- bottom: 35px;
-}
-
-.mejs-captions-text {
- padding: 0;
- background: url("background.png");
- background: rgba(20, 20, 20, 0.5);
- white-space: pre-wrap;
- -webkit-box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
- box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
+.mejs__time-handle-content {
+ left: -4px;
+ border: 4px solid rgba(255, 255, 255, 0.9);
+ -ms-transform: scale(0);
+ transform: scale(0);
+ top: -4px;
+ border-radius: 50%;
}
-/* End: Track (Captions and Chapters) */
-/* Start: Error */
-.me-cannotplay {
+.mejs__time-rail:hover .mejs__time-handle-content, .mejs__time-rail .mejs__time-handle-content:focus, .mejs__time-rail .mejs__time-handle-content:active {
+ -ms-transform: scale(1);
+ transform: scale(1);
}
-.me-cannotplay a {
- color: #fff;
- font-weight: bold;
+.mejs__time-float {
+ position: absolute;
+ display: none;
+ background: #eee;
+ width: 36px;
+ height: 17px;
+ border: solid 1px #333;
+ top: -26px;
+ margin-left: -18px;
+ text-align: center;
+ color: #111;
}
-.me-cannotplay span {
- padding: 15px;
- display: block;
+.mejs__time-float-current {
+ margin: 2px;
+ width: 30px;
+ display: block;
+ text-align: center;
+ left: 0;
}
-/* End: Error */
+.mejs__time-float-corner {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ line-height: 0;
+ border: solid 5px #eee;
+ border-color: #eee transparent transparent transparent;
+ border-radius: 0;
+ top: 15px;
+ left: 13px;
+}
-/* Start: Loop */
-.mejs-controls .mejs-loop-off button {
- background-position: -64px -16px;
+.mejs__long-video .mejs__time-float {
+ width: 64px;
+ margin-left: -23px;
}
-.mejs-controls .mejs-loop-on button {
- background-position: -64px 0;
+.mejs__long-video .mejs__time-float-current {
+ width: 60px;
}
-/* End: Loop */
+.mejs__long-video .mejs__time-float-corner {
+ left: 18px;
+}
-/* Start: backlight */
-.mejs-controls .mejs-backlight-off button {
- background-position: -80px -16px;
+.mejs__broadcast {
+ color: #fff;
+ position: absolute;
+ width: 100%;
+ height: 10px;
+ top: 15px;
}
-.mejs-controls .mejs-backlight-on button {
- background-position: -80px 0;
+/* End: Progress Bar */
+
+/* Start: Fullscreen */
+.mejs__fullscreen-button > button {
+ background-position: -80px 0;
}
-/* End: backlight */
-/* Start: Picture Controls */
-.mejs-controls .mejs-picturecontrols-button {
- background-position: -96px 0;
+.mejs__unfullscreen > button {
+ background-position: -100px 0;
}
-/* End: Picture Controls */
+/* End: Fullscreen */
+
+/* Start: Mute/Volume */
+.mejs__mute > button {
+ background-position: -60px 0;
+}
-/* context menu */
-.mejs-contextmenu {
- position: absolute;
- width: 150px;
- padding: 10px;
- border-radius: 4px;
- top: 0;
- left: 0;
- background: #fff;
- border: solid 1px #999;
- z-index: 1001; /* make sure it shows on fullscreen */
+.mejs__unmute > button {
+ background-position: -40px 0;
}
-.mejs-contextmenu .mejs-contextmenu-separator {
- height: 1px;
- font-size: 0;
- margin: 5px 6px;
- background: #333;
+
+.mejs__volume-button {
+ position: relative;
}
-.mejs-contextmenu .mejs-contextmenu-item {
- font-family: "Helvetica", Arial, serif;
- font-size: 12px;
- padding: 4px 6px;
- cursor: pointer;
- color: #333;
+.mejs__volume-button > .mejs__volume-slider {
+ display: none;
+ height: 115px;
+ width: 25px;
+ background: rgba(50, 50, 50, 0.7);
+ border-radius: 0;
+ top: -115px;
+ left: 5px;
+ z-index: 1;
+ position: absolute;
+ margin: 0;
}
-.mejs-contextmenu .mejs-contextmenu-item:hover {
- background: #2C7C91;
- color: #fff;
+
+.mejs__volume-button:hover {
+ border-radius: 0 0 4px 4px;
}
-/* Start: Source Chooser */
-.mejs-controls .mejs-sourcechooser-button {
- position: relative;
+.mejs__volume-total {
+ position: absolute;
+ left: 11px;
+ top: 8px;
+ width: 2px;
+ height: 100px;
+ background: rgba(255, 255, 255, 0.5);
+ margin: 0;
}
-.mejs-controls .mejs-sourcechooser-button button {
- background-position: -128px 0;
+.mejs__volume-current {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.9);
+ margin: 0;
}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
- position: absolute;
- bottom: 26px;
- right: -10px;
- width: 130px;
- height: 100px;
- background: url("background.png");
- background: rgba(50,50,50,0.7);
- border: solid 1px transparent;
- padding: 10px;
- overflow: hidden;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
+.mejs__volume-handle {
+ position: absolute;
+ left: 0;
+ bottom: 100%;
+ width: 16px;
+ height: 6px;
+ margin: 0 0 -3px -7px;
+ background: rgba(255, 255, 255, 0.9);
+ cursor: ns-resize;
+ border-radius: 1px;
}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
- margin: 0;
- padding: 0;
- display: block;
- list-style-type: none !important;
- overflow: hidden;
+.mejs__horizontal-volume-slider {
+ height: 36px;
+ width: 56px;
+ position: relative;
+ display: block;
+ float: left;
+ vertical-align: middle;
}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
- margin: 0 0 6px 0;
- padding: 0;
- list-style-type: none !important;
- display: block;
- color: #fff;
- overflow: hidden;
+.mejs__horizontal-volume-total {
+ position: absolute;
+ left: 0;
+ top: 16px;
+ width: 50px;
+ height: 8px;
+ margin: 0;
+ padding: 0;
+ font-size: 1px;
+ border-radius: 2px;
+ background: rgba(50, 50, 50, 0.8);
}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
- clear: both;
- float: left;
- margin: 3px 3px 0 5px;
+.mejs__horizontal-volume-current {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ font-size: 1px;
+ border-radius: 2px;
+ background: rgba(255, 255, 255, 0.8);
}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
- width: 100px;
- float: left;
- padding: 4px 0 0 0;
- line-height: 15px;
- font-family: "Helvetica", Arial, serif;
- font-size: 10px;
-}
-/* End: Source Chooser */
-
-/* Start: Postroll */
-.mejs-postroll-layer {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: url("background.png");
- background: rgba(50,50,50,0.7);
- z-index: 1000;
- overflow: hidden;
-}
-.mejs-postroll-layer-content {
- width: 100%;
- height: 100%;
-}
-.mejs-postroll-close {
- position: absolute;
- right: 0;
- top: 0;
- background: url("background.png");
- background: rgba(50,50,50,0.7);
- color: #fff;
- padding: 4px;
- z-index: 100;
- cursor: pointer;
+.mejs__horizontal-volume-handle {
+ display: none;
}
-/* End: Postroll */
+/* End: Mute/Volume */
-/* Start: Speed */
-div.mejs-speed-button {
- width: 46px !important;
- position: relative;
+/* Start: Track (Captions and Chapters) */
+.mejs__captions-button, .mejs__chapters-button {
+ position: relative;
}
-.mejs-controls .mejs-button.mejs-speed-button button {
- background: transparent;
- width: 36px;
- font-size: 11px;
- line-height: normal;
- color: #ffffff;
+.mejs__captions-button > button {
+ background-position: -140px 0;
}
-.mejs-controls .mejs-speed-button .mejs-speed-selector {
- display: none;
- position: absolute;
- top: -100px;
- left: -10px;
- width: 60px;
- height: 100px;
- background: url("background.png");
- background: rgba(50, 50, 50, 0.7);
- border: solid 1px transparent;
- padding: 0;
- overflow: hidden;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
+.mejs__chapters-button > button {
+ background-position: -180px 0;
}
+.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector {
+ visibility: hidden;
+ position: absolute;
+ bottom: 40px;
+ right: -51px;
+ width: 85px;
+ background: rgba(50, 50, 50, 0.7);
+ border: solid 1px transparent;
+ padding: 0;
+ overflow: hidden;
+ border-radius: 0;
+}
-.mejs-controls .mejs-speed-button:hover > .mejs-speed-selector {
- display: block;
+.mejs__chapters-button > .mejs__chapters-selector {
+ width: 110px;
}
-.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected {
- color: rgba(33, 248, 248, 1);
+.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector {
+ visibility: visible;
}
-.mejs-controls .mejs-speed-button .mejs-speed-selector ul {
- margin: 0;
- padding: 0;
- display: block;
- list-style-type: none !important;
- overflow: hidden;
+.mejs__captions-selector-list, .mejs__chapters-selector-list {
+ margin: 0;
+ padding: 0;
+ display: block;
+ list-style-type: none !important;
+ overflow: hidden;
}
-.mejs-controls .mejs-speed-button .mejs-speed-selector ul li {
- margin: 0 0 6px 0;
- padding: 0 10px;
- list-style-type: none !important;
- display: block;
- color: #fff;
- overflow: hidden;
+.mejs__captions-selector-list-item, .mejs__chapters-selector-list-item {
+ margin: 0 0 6px 0;
+ padding: 0 10px;
+ list-style-type: none !important;
+ display: block;
+ color: #fff;
+ overflow: hidden;
+ cursor: pointer;
}
-.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input {
- clear: both;
- float: left;
- margin: 3px 3px 0 5px;
- display: none;
+.mejs__captions-selector-list-item:hover, .mejs__chapters-selector-list-item:hover {
+ background-color: rgb(200, 200, 200) !important;
+ background-color: rgba(255, 255, 255, 0.4) !important;
}
-.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label {
- width: 60px;
- float: left;
- padding: 4px 0 0 0;
- line-height: 15px;
- font-family: "Helvetica", Arial, serif;
- font-size: 11px;
- color: white;
- margin-left: 5px;
- cursor: pointer;
+.mejs__captions-selector-input, .mejs__chapters-selector-input {
+ clear: both;
+ float: left;
+ margin: 3px 3px 0 5px;
+ position: absolute;
+ left: -1000px;
}
-.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover {
- background-color: rgb(200, 200, 200) !important;
- background-color: rgba(255,255,255,.4) !important;
+.mejs__captions-selector-label, .mejs__chapters-selector-label {
+ width: 55px;
+ float: left;
+ padding: 4px 0 0 0;
+ line-height: 15px;
+ font-size: 10px;
+ cursor: pointer;
}
-/* End: Speed */
-/* Start: Jump Forward */
+.mejs__captions-selected, .mejs__chapters-selected {
+ color: rgba(33, 248, 248, 1);
+}
-.mejs-controls .mejs-button.mejs-jump-forward-button {
- background: transparent url("jumpforward.png") no-repeat 3px 3px;
+.mejs__captions-translations {
+ font-size: 10px;
+ margin: 0 0 5px 0;
}
-.mejs-controls .mejs-button.mejs-jump-forward-button button {
- background: transparent;
- font-size: 9px;
- line-height: normal;
- color: #ffffff;
+
+.mejs__captions-layer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ text-align: center;
+ line-height: 20px;
+ font-size: 16px;
+ color: #fff;
}
-/* End: Jump Forward */
+.mejs__captions-layer a {
+ color: #fff;
+ text-decoration: underline;
+}
-/* Start: Skip Back */
+.mejs__captions-layer[lang=ar] {
+ font-size: 20px;
+ font-weight: normal;
+}
-.mejs-controls .mejs-button.mejs-skip-back-button {
- background: transparent url("skipback.png") no-repeat 3px 3px;
+.mejs__captions-position {
+ position: absolute;
+ width: 100%;
+ bottom: 15px;
+ left: 0;
}
-.mejs-controls .mejs-button.mejs-skip-back-button button {
- background: transparent;
- font-size: 9px;
- line-height: normal;
- color: #ffffff;
+
+.mejs__captions-position-hover {
+ bottom: 35px;
}
-/* End: Skip Back */
+.mejs__captions-text, .mejs__captions-text * {
+ padding: 0;
+ background: rgba(20, 20, 20, 0.5);
+ white-space: pre-wrap;
+ box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
+}
+.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container {
+ display: none;
+}
+
+/* End: Track (Captions and Chapters) */
+
+/* Start: Error */
+.me_cannotplay a {
+ font-weight: bold;
+}
+
+.mejs__container .me_cannotplay a {
+ color: #fff;
+}
+
+.me_cannotplay span {
+ padding: 15px;
+ display: block;
+}
+
+/* End: Error */
diff --git a/media/vendor/mediaelement/css/mediaelementplayer.min.css b/media/vendor/mediaelement/css/mediaelementplayer.min.css
index 3959c11ec933a..36dbb3ce5b58b 100644
--- a/media/vendor/mediaelement/css/mediaelementplayer.min.css
+++ b/media/vendor/mediaelement/css/mediaelementplayer.min.css
@@ -1 +1 @@
-.mejs-offscreen{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);clip-path:polygon(0px 0,0 0,0 0,0 0);position:absolute!important;height:1px;width:1px;overflow:hidden}.mejs-container{position:relative;background:#000;font-family:Helvetica,Arial,serif;text-align:left;vertical-align:top;text-indent:0}.mejs-fill-container,.mejs-fill-container .mejs-container{width:100%;height:100%}.mejs-fill-container{overflow:hidden}.mejs-container:focus{outline:0}.me-plugin{position:absolute}.mejs-embed,.mejs-embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs-fullscreen{overflow:hidden!important}.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width:100%;height:100%}.mejs-clear{clear:both}.mejs-background{position:absolute;top:0;left:0}.mejs-mediaelement{position:absolute;top:0;left:0;width:100%;height:100%}.mejs-poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat}:root .mejs-poster img{display:none}.mejs-poster img{border:0;padding:0}.mejs-overlay{position:absolute;top:0;left:0}.mejs-overlay-play{cursor:pointer}.mejs-overlay-button{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:url(bigplay.svg) no-repeat}.no-svg .mejs-overlay-button{background-image:url(bigplay.png)}.mejs-overlay:hover .mejs-overlay-button{background-position:0 -100px}.mejs-overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:#333;background:url(background.png);background:rgba(0,0,0,.9);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.9)),to(rgba(0,0,0,.9)));background:-webkit-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-moz-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-o-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-ms-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:linear-gradient(rgba(50,50,50,.9),rgba(0,0,0,.9))}.mejs-overlay-loading span{display:block;width:80px;height:80px;background:transparent url(loading.gif) 50% 50% no-repeat}.mejs-container .mejs-controls{position:absolute;list-style-type:none;margin:0;padding:0;bottom:0;left:0;background:url(background.png);background:rgba(0,0,0,.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.7)),to(rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.7));height:30px;width:100%}.mejs-container .mejs-controls div{list-style-type:none;background-image:none;display:block;float:left;margin:0;padding:0;width:26px;height:26px;font-size:11px;line-height:11px;font-family:Helvetica,Arial,serif;border:0}.mejs-controls .mejs-button button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:7px 5px;padding:0;position:absolute;height:16px;width:16px;border:0;background:transparent url(controls.svg) no-repeat}.no-svg .mejs-controls .mejs-button button{background-image:url(controls.png)}.mejs-controls .mejs-button button:focus{outline:dotted 1px #999}.mejs-container .mejs-controls .mejs-time{color:#fff;display:block;height:17px;width:auto;padding:10px 3px 0;overflow:hidden;text-align:center;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.mejs-container .mejs-controls .mejs-time a{color:#fff;font-size:11px;line-height:12px;display:block;float:left;margin:1px 2px 0 0;width:auto}.mejs-controls .mejs-play button{background-position:0 0}.mejs-controls .mejs-pause button{background-position:0 -16px}.mejs-controls .mejs-stop button{background-position:-112px 0}.mejs-controls div.mejs-time-rail{direction:ltr;width:200px;padding-top:5px}.mejs-controls .mejs-time-rail span,.mejs-controls .mejs-time-rail a{display:block;position:absolute;width:180px;height:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer}.mejs-controls .mejs-time-rail .mejs-time-total{margin:5px;background:#333;background:rgba(50,50,50,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8))}.mejs-controls .mejs-time-rail .mejs-time-buffering{width:100%;background-image:-o-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:15px 15px;-moz-background-size:15px 15px;-o-background-size:15px 15px;background-size:15px 15px;-webkit-animation:buffering-stripes 2s linear infinite;-moz-animation:buffering-stripes 2s linear infinite;-ms-animation:buffering-stripes 2s linear infinite;-o-animation:buffering-stripes 2s linear infinite;animation:buffering-stripes 2s linear infinite}@-webkit-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-moz-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-ms-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-o-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}.mejs-controls .mejs-time-rail .mejs-time-loaded{background:#3caac8;background:rgba(60,170,200,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(44,124,145,.8)),to(rgba(78,183,212,.8)));background:-webkit-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-moz-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-o-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-ms-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:linear-gradient(rgba(44,124,145,.8),rgba(78,183,212,.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-current{background:#fff;background:rgba(255,255,255,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.9)),to(rgba(200,200,200,.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-moz-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-o-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-ms-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:linear-gradient(rgba(255,255,255,.9),rgba(200,200,200,.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-handle{display:none;position:absolute;margin:0;width:10px;background:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;border:solid 2px #333;top:-2px;text-align:center}.mejs-controls .mejs-time-rail .mejs-time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:solid 1px #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs-controls .mejs-time-rail .mejs-time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs-controls .mejs-time-rail .mejs-time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:solid 5px #eee;border-color:#eee transparent transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:15px;left:13px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float{width:48px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current{width:44px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner{left:18px}.mejs-controls .mejs-fullscreen-button button{background-position:-32px 0}.mejs-controls .mejs-unfullscreen button{background-position:-32px -16px}.mejs-controls .mejs-volume-button{}.mejs-controls .mejs-mute button{background-position:-16px -16px}.mejs-controls .mejs-unmute button{background-position:-16px 0}.mejs-controls .mejs-volume-button{position:relative}.mejs-controls .mejs-volume-button .mejs-volume-slider{display:none;height:115px;width:25px;background:url(background.png);background:rgba(50,50,50,.7);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:-115px;left:0;z-index:1;position:absolute;margin:0}.mejs-controls .mejs-volume-button:hover{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.5);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.9);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle{position:absolute;left:4px;top:-3px;width:16px;height:6px;background:#ddd;background:rgba(255,255,255,.9);cursor:N-resize;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;margin:0}.mejs-controls a.mejs-horizontal-volume-slider{height:26px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#333;background:rgba(50,50,50,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#fff;background:rgba(255,255,255,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.9)),to(rgba(200,200,200,.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-moz-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-o-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-ms-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:linear-gradient(rgba(255,255,255,.9),rgba(200,200,200,.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle{display:none}.mejs-controls .mejs-captions-button{position:relative}.mejs-controls .mejs-captions-button button{background-position:-48px 0}.mejs-controls .mejs-captions-button .mejs-captions-selector{visibility:hidden;position:absolute;bottom:26px;right:-51px;width:85px;height:100px;background:url(background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:10px 10px 0;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-captions-button:hover .mejs-captions-selector{visibility:visible}.mejs-controls .mejs-captions-button .mejs-captions-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li{margin:0 0 6px;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{width:55px;float:left;padding:4px 0 0;line-height:15px;font-family:Helvetica,Arial,serif;font-size:10px}.mejs-controls .mejs-captions-button .mejs-captions-translations{font-size:10px;margin:0 0 5px}.mejs-chapters{position:absolute;top:0;left:0;border-right:solid 1px #fff;width:10000px;z-index:1}.mejs-chapters .mejs-chapter{position:absolute;float:left;background:#222;background:rgba(0,0,0,.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.7)),to(rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.7));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);overflow:hidden;border:0}.mejs-chapters .mejs-chapter .mejs-chapter-block{font-size:11px;color:#fff;padding:5px;display:block;border-right:solid 1px #333;border-bottom:solid 1px #333;cursor:pointer}.mejs-chapters .mejs-chapter .mejs-chapter-block-last{border-right:0}.mejs-chapters .mejs-chapter .mejs-chapter-block:hover{background:#666;background:rgba(102,102,102,.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(102,102,102,.7)),to(rgba(50,50,50,.6)));background:-webkit-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-moz-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-o-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-ms-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:linear-gradient(rgba(102,102,102,.7),rgba(50,50,50,.6));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232)}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{font-size:12px;font-weight:700;display:block;white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px;line-height:12px}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{font-size:12px;line-height:12px;margin:3px 0 4px;display:block;white-space:nowrap;text-overflow:ellipsis}.mejs-captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs-captions-layer a{color:#fff;text-decoration:underline}.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs-captions-position{position:absolute;width:100%;bottom:15px;left:0}.mejs-captions-position-hover{bottom:35px}.mejs-captions-text{padding:0;background:url(background.png);background:rgba(20,20,20,.5);white-space:pre-wrap;-webkit-box-shadow:5px 0 0 rgba(20,20,20,.5),-5px 0 0 rgba(20,20,20,.5);box-shadow:5px 0 0 rgba(20,20,20,.5),-5px 0 0 rgba(20,20,20,.5)}.me-cannotplay{}.me-cannotplay a{color:#fff;font-weight:700}.me-cannotplay span{padding:15px;display:block}.mejs-controls .mejs-loop-off button{background-position:-64px -16px}.mejs-controls .mejs-loop-on button{background-position:-64px 0}.mejs-controls .mejs-backlight-off button{background-position:-80px -16px}.mejs-controls .mejs-backlight-on button{background-position:-80px 0}.mejs-controls .mejs-picturecontrols-button{background-position:-96px 0}.mejs-contextmenu{position:absolute;width:150px;padding:10px;border-radius:4px;top:0;left:0;background:#fff;border:solid 1px #999;z-index:1001}.mejs-contextmenu .mejs-contextmenu-separator{height:1px;font-size:0;margin:5px 6px;background:#333}.mejs-contextmenu .mejs-contextmenu-item{font-family:Helvetica,Arial,serif;font-size:12px;padding:4px 6px;cursor:pointer;color:#333}.mejs-contextmenu .mejs-contextmenu-item:hover{background:#2C7C91;color:#fff}.mejs-controls .mejs-sourcechooser-button{position:relative}.mejs-controls .mejs-sourcechooser-button button{background-position:-128px 0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector{position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:url(background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{margin:0 0 6px;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{width:100px;float:left;padding:4px 0 0;line-height:15px;font-family:Helvetica,Arial,serif;font-size:10px}.mejs-postroll-layer{position:absolute;bottom:0;left:0;width:100%;height:100%;background:url(background.png);background:rgba(50,50,50,.7);z-index:1000;overflow:hidden}.mejs-postroll-layer-content{width:100%;height:100%}.mejs-postroll-close{position:absolute;right:0;top:0;background:url(background.png);background:rgba(50,50,50,.7);color:#fff;padding:4px;z-index:100;cursor:pointer}div.mejs-speed-button{width:46px!important;position:relative}.mejs-controls .mejs-button.mejs-speed-button button{background:transparent;width:36px;font-size:11px;line-height:normal;color:#fff}.mejs-controls .mejs-speed-button .mejs-speed-selector{display:none;position:absolute;top:-100px;left:-10px;width:60px;height:100px;background:url(background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:0;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-speed-button:hover>.mejs-speed-selector{display:block}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected{color:rgba(33,248,248,1)}.mejs-controls .mejs-speed-button .mejs-speed-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li{margin:0 0 6px;padding:0 10px;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px;display:none}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label{width:60px;float:left;padding:4px 0 0;line-height:15px;font-family:Helvetica,Arial,serif;font-size:11px;color:#fff;margin-left:5px;cursor:pointer}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover{background-color:#c8c8c8!important;background-color:rgba(255,255,255,.4)!important}.mejs-controls .mejs-button.mejs-jump-forward-button{background:transparent url(jumpforward.png) no-repeat 3px 3px}.mejs-controls .mejs-button.mejs-jump-forward-button button{background:transparent;font-size:9px;line-height:normal;color:#fff}.mejs-controls .mejs-button.mejs-skip-back-button{background:transparent url(skipback.png) no-repeat 3px 3px}.mejs-controls .mejs-button.mejs-skip-back-button button{background:transparent;font-size:9px;line-height:normal;color:#fff}
\ No newline at end of file
+.mejs__offscreen{clip:rect(1px,1px,1px,1px);-webkit-clip-path:polygon(0 0,0 0,0 0,0 0);clip-path:polygon(0 0,0 0,0 0,0 0);position:absolute!important;height:1px;width:1px;overflow:hidden}.mejs__container{position:relative;background:#000;font-family:Helvetica,Arial,serif;text-align:left;vertical-align:top;text-indent:0;box-sizing:border-box;min-width:250px}.mejs__container .mejs__video{min-height:140px}.mejs__container *{box-sizing:border-box}.mejs__container video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}.mejs__fill-container,.mejs__fill-container .mejs__container{width:100%;height:100%}.mejs__fill-container{overflow:hidden;position:relative;margin:0 auto;background:transparent}.mejs__container:focus{outline:none}.mejs__iframe-overlay{position:absolute;width:100%;height:100%}.mejs__embed,.mejs__embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs__fullscreen{overflow:hidden!important}.mejs__container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:4}.mejs__container-fullscreen .mejs__mediaelement,.mejs__container-fullscreen video{width:100%!important;height:100%!important}.mejs__clear{clear:both}.mejs__background,.mejs__mediaelement{position:absolute;top:0;left:0}.mejs__mediaelement{width:100%;height:100%;z-index:0}.mejs__poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat;z-index:1}:root .mejs__poster-img{display:none}.mejs__poster-img{border:0;padding:0}.mejs__overlay{position:absolute;top:0;left:0;z-index:1}.mejs__layer{z-index:1}.mejs__overlay-play{cursor:pointer}.mejs__overlay-button{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:url(mejs-controls.svg) no-repeat;background-position:0 -39px;overflow:hidden;z-index:1}.mejs__overlay:hover>.mejs__overlay-button{background-position:-80px -39px}.mejs__overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px}.mejs__overlay-loading-bg-img{display:block;width:80px;height:80px;background:transparent url(mejs-controls.svg) -160px -40px no-repeat;animation:a 1s linear infinite;z-index:1}@keyframes a{to{transform:rotate(1turn)}}.mejs__controls{position:absolute;list-style-type:none;margin:0;padding:0 10px;bottom:0;left:0;height:40px;width:100%;z-index:1}.mejs__controls:not([style*="display: none"]){background:rgba(255,0,0,.7);background:linear-gradient(transparent,rgba(0,0,0,.35))}.mejs__button,.mejs__time,.mejs__time-rail{float:left;margin:0;width:32px;height:40px;font-size:10px;line-height:10px}.mejs__button>button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:10px 6px;padding:0;position:absolute;height:20px;width:20px;border:0;background:transparent url(mejs-controls.svg);overflow:hidden}.mejs__button>button:focus{outline:1px dotted #999}.mejs__container-keyboard-inactive [role=slider],.mejs__container-keyboard-inactive [role=slider]:focus,.mejs__container-keyboard-inactive a,.mejs__container-keyboard-inactive a:focus,.mejs__container-keyboard-inactive button,.mejs__container-keyboard-inactive button:focus{outline:0}.mejs__time{color:#fff;display:block;height:24px;width:auto;font-weight:700;font-size:11px;padding:16px 6px 0;overflow:hidden;text-align:center;box-sizing:content-box}.mejs__play>button{background-position:0 0}.mejs__pause>button{background-position:-20px 0}.mejs__replay>button{background-position:-160px 0}.mejs__time-rail{direction:ltr;width:200px;padding-top:10px;height:40px;position:relative;margin:0 10px}.mejs__time-buffering,.mejs__time-current,.mejs__time-float,.mejs__time-float-corner,.mejs__time-float-current,.mejs__time-hovered,.mejs__time-loaded,.mejs__time-marker,.mejs__time-total{cursor:pointer;display:block;position:absolute;height:10px;border-radius:2px}.mejs__time-total{margin:5px 0 0;background:hsla(0,0%,100%,.3);width:100%}.mejs__time-buffering{width:100%;background:linear-gradient(-45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:15px 15px;animation:b 2s linear infinite}@keyframes b{0%{background-position:0 0}to{background-position:30px 0}}.mejs__time-loaded{background:hsla(0,0%,100%,.3)}.mejs__time-current,.mejs__time-handle-content{background:hsla(0,0%,100%,.9)}.mejs__time-hovered{background:hsla(0,0%,100%,.5);z-index:2}.mejs__time-hovered.negative{background:rgba(0,0,0,.2)}.mejs__time-buffering,.mejs__time-current,.mejs__time-hovered,.mejs__time-loaded{width:100%;left:0;-ms-transform-origin:0 0;transform-origin:0 0;-ms-transform:scaleX(0);transform:scaleX(0);transition:all .15s ease-in}.mejs__time-hovered{transition:height .1s cubic-bezier(.44,0,1,1)}.mejs__time-hovered.no-hover{-ms-transform:scaleX(0)!important;transform:scaleX(0)!important}.mejs__time-handle,.mejs__time-handle-content{position:absolute;cursor:pointer;width:10px;height:10px;border:4px solid transparent;z-index:3;left:0;-ms-transform:translateX(0);transform:translateX(0)}.mejs__time-handle-content{left:-4px;border:4px solid hsla(0,0%,100%,.9);-ms-transform:scale(0);transform:scale(0);top:-4px;border-radius:50%}.mejs__time-rail .mejs__time-handle-content:active,.mejs__time-rail .mejs__time-handle-content:focus,.mejs__time-rail:hover .mejs__time-handle-content{-ms-transform:scale(1);transform:scale(1)}.mejs__time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:1px solid #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs__time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs__time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:5px solid #eee;border-color:#eee transparent transparent;border-radius:0;top:15px;left:13px}.mejs__long-video .mejs__time-float{width:64px;margin-left:-23px}.mejs__long-video .mejs__time-float-current{width:60px}.mejs__long-video .mejs__time-float-corner{left:18px}.mejs__broadcast{color:#fff;position:absolute;width:100%;height:10px;top:15px}.mejs__fullscreen-button>button{background-position:-80px 0}.mejs__unfullscreen>button{background-position:-100px 0}.mejs__mute>button{background-position:-60px 0}.mejs__unmute>button{background-position:-40px 0}.mejs__volume-button{position:relative}.mejs__volume-button>.mejs__volume-slider{display:none;height:115px;width:25px;background:rgba(50,50,50,.7);border-radius:0;top:-115px;left:5px;z-index:1;position:absolute;margin:0}.mejs__volume-button:hover{border-radius:0 0 4px 4px}.mejs__volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:hsla(0,0%,100%,.5);margin:0}.mejs__volume-current{bottom:0;width:100%;height:100%;margin:0}.mejs__volume-current,.mejs__volume-handle{position:absolute;left:0;background:hsla(0,0%,100%,.9)}.mejs__volume-handle{bottom:100%;width:16px;height:6px;margin:0 0 -3px -7px;cursor:ns-resize;border-radius:1px}.mejs__horizontal-volume-slider{height:36px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs__horizontal-volume-total{top:16px;width:50px;height:8px;background:rgba(50,50,50,.8)}.mejs__horizontal-volume-current,.mejs__horizontal-volume-total{position:absolute;left:0;margin:0;padding:0;font-size:1px;border-radius:2px}.mejs__horizontal-volume-current{top:0;width:100%;height:100%;background:hsla(0,0%,100%,.8)}.mejs__horizontal-volume-handle{display:none}.mejs__captions-button,.mejs__chapters-button{position:relative}.mejs__captions-button>button{background-position:-140px 0}.mejs__chapters-button>button{background-position:-180px 0}.mejs__captions-button>.mejs__captions-selector,.mejs__chapters-button>.mejs__chapters-selector{visibility:hidden;position:absolute;bottom:40px;right:-51px;width:85px;background:rgba(50,50,50,.7);border:1px solid transparent;padding:0;overflow:hidden;border-radius:0}.mejs__chapters-button>.mejs__chapters-selector{width:110px}.mejs__captions-button>.mejs__captions-selector,.mejs__chapters-button>.mejs__chapters-selector{visibility:visible}.mejs__captions-selector-list,.mejs__chapters-selector-list{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs__captions-selector-list-item,.mejs__chapters-selector-list-item{margin:0 0 6px;padding:0 10px;list-style-type:none!important;display:block;color:#fff;overflow:hidden;cursor:pointer}.mejs__captions-selector-list-item:hover,.mejs__chapters-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}.mejs__captions-selector-input,.mejs__chapters-selector-input{clear:both;float:left;margin:3px 3px 0 5px;position:absolute;left:-1000px}.mejs__captions-selector-label,.mejs__chapters-selector-label{width:55px;float:left;padding:4px 0 0;line-height:15px;font-size:10px;cursor:pointer}.mejs__captions-selected,.mejs__chapters-selected{color:#21f8f8}.mejs__captions-translations{font-size:10px;margin:0 0 5px}.mejs__captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs__captions-layer a{color:#fff;text-decoration:underline}.mejs__captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs__captions-position{position:absolute;width:100%;bottom:15px;left:0}.mejs__captions-position-hover{bottom:35px}.mejs__captions-text,.mejs__captions-text *{padding:0;background:hsla(0,0%,8%,.5);white-space:pre-wrap;box-shadow:5px 0 0 hsla(0,0%,8%,.5),-5px 0 0 hsla(0,0%,8%,.5)}.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container{display:none}.me_cannotplay a{font-weight:700}.mejs__container .me_cannotplay a{color:#fff}.me_cannotplay span{padding:15px;display:block}
\ No newline at end of file
diff --git a/media/vendor/mediaelement/css/mejs-controls.png b/media/vendor/mediaelement/css/mejs-controls.png
new file mode 100644
index 0000000000000..a8e0fd2770205
Binary files /dev/null and b/media/vendor/mediaelement/css/mejs-controls.png differ
diff --git a/media/vendor/mediaelement/css/mejs-controls.svg b/media/vendor/mediaelement/css/mejs-controls.svg
new file mode 100644
index 0000000000000..e4db236e54067
--- /dev/null
+++ b/media/vendor/mediaelement/css/mejs-controls.svg
@@ -0,0 +1,122 @@
+
+
+
diff --git a/media/vendor/mediaelement/css/mejs-skins.css b/media/vendor/mediaelement/css/mejs-skins.css
deleted file mode 100644
index 5c27cf156fcd0..0000000000000
--- a/media/vendor/mediaelement/css/mejs-skins.css
+++ /dev/null
@@ -1,289 +0,0 @@
-/* TED player */
-.mejs-container.mejs-ted {
-
-}
-.mejs-ted .mejs-controls {
- background: #eee;
- height: 65px;
-}
-
-.mejs-ted .mejs-button,
-.mejs-ted .mejs-time {
- position: absolute;
- background: #ddd;
-}
-.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-total {
- background-color: none;
- background: url(controls-ted.png) repeat-x 0 -52px;
- height: 6px;
-}
-.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-buffering {
- height: 6px;
-}
-.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded {
- background-color: none;
- background: url(controls-ted.png) repeat-x 0 -52px;
- width: 0;
- height: 6px;
-}
-.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current {
- width: 0;
- height: 6px;
- background-color: none;
- background: url(controls-ted.png) repeat-x 0 -59px;
-}
-.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-handle {
- display: block;
- margin: 0;
- width: 14px;
- height: 21px;
- top: -7px;
- border: 0;
- background: url(controls-ted.png) no-repeat 0 0;
-}
-.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-float {
- display: none;
-}
-.mejs-ted .mejs-controls .mejs-playpause-button {
- top: 29px;
- left: 9px;
- width: 49px;
- height: 28px;
-}
-.mejs-ted .mejs-controls .mejs-playpause-button button {
- width: 49px;
- height: 28px;
- background: url(controls-ted.png) no-repeat -50px -23px;
- margin: 0;
- padding: 0;
-}
-.mejs-ted .mejs-controls .mejs-pause button {
- background-position: 0 -23px;
-}
-
-.mejs-ted .mejs-controls .mejs-fullscreen-button {
- top: 34px;
- right: 9px;
- width: 17px;
- height: 15px;
- background : none;
-}
-.mejs-ted .mejs-controls .mejs-fullscreen-button button {
- width: 19px;
- height: 17px;
- background: transparent url(controls-ted.png) no-repeat 0 -66px;
- margin: 0;
- padding: 0;
-}
-.mejs-ted .mejs-controls .mejs-unfullscreen button {
- background: transparent url(controls-ted.png) no-repeat -21px -66px;
- margin: 0;
- padding: 0;
-}
-.mejs-ted .mejs-controls .mejs-volume-button {
- top: 30px;
- right: 35px;
- width: 24px;
- height: 22px;
-}
-.mejs-ted .mejs-controls .mejs-mute button {
- background: url(controls-ted.png) no-repeat -15px 0;
- width: 24px;
- height: 22px;
- margin: 0;
- padding: 0;
-}
-.mejs-ted .mejs-controls .mejs-unmute button {
- background: url(controls-ted.png) no-repeat -40px 0;
- width: 24px;
- height: 22px;
- margin: 0;
- padding: 0;
-}
-.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-slider {
- background: #fff;
- border: solid 1px #aaa;
- border-width: 1px 1px 0 1px;
- width: 22px;
- height: 65px;
- top: -65px;
-}
-.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-total {
- background: url(controls-ted.png) repeat-y -41px -66px;
- left: 8px;
- width: 6px;
- height: 50px;
-}
-.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-current {
- left: 8px;
- width: 6px;
- background: url(controls-ted.png) repeat-y -48px -66px;
- height: 50px;
-}
-
-.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-handle {
- display: none;
-}
-
-.mejs-ted .mejs-controls .mejs-time span {
- color: #333;
-}
-.mejs-ted .mejs-controls .mejs-currenttime-container {
- position: absolute;
- top: 32px;
- right: 100px;
- border: solid 1px #999;
- background: #fff;
- color: #333;
- padding-top: 2px;
- border-radius: 3px;
- color: #333;
-}
-.mejs-ted .mejs-controls .mejs-duration-container {
-
- position: absolute;
- top: 32px;
- right: 65px;
- border: solid 1px #999;
- background: #fff;
- color: #333;
- padding-top: 2px;
- border-radius: 3px;
- color: #333;
-}
-
-.mejs-ted .mejs-controls .mejs-time button{
- color: #333;
-}
-.mejs-ted .mejs-controls .mejs-captions-button {
- display: none;
-}
-/* END: TED player */
-
-
-/* WMP player */
-.mejs-container.mejs-wmp {
-
-}
-.mejs-wmp .mejs-controls {
- background: transparent url(controls-wmp-bg.png) center 16px no-repeat;
- height: 65px;
-}
-
-.mejs-wmp .mejs-button,
-.mejs-wmp .mejs-time {
- position: absolute;
- background: transparent;
-}
-.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-total {
- background-color: transparent;
- border: solid 1px #ccc;
- height: 3px;
-}
-.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-buffering {
- height: 3px;
-}
-.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-loaded {
- background-color: rgba(255,255,255,0.3);
- width: 0;
- height: 3px;
-}
-.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-current {
- width: 0;
- height: 1px;
- background-color: #014CB6;
- border: solid 1px #7FC9FA;
- border-width: 1px 0;
- border-color: #7FC9FA #fff #619FF2 #fff;
-}
-.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-handle {
- display: block;
- margin: 0;
- width: 16px;
- height: 9px;
- top: -3px;
- border: 0;
- background: url(controls-wmp.png) no-repeat 0 -80px;
-}
-.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-float {
- display: none;
-}
-.mejs-wmp .mejs-controls .mejs-playpause-button {
- top: 10px;
- left: 50%;
- margin: 10px 0 0 -20px;
- width: 40px;
- height: 40px;
-
-}
-.mejs-wmp .mejs-controls .mejs-playpause-button button {
- width: 40px;
- height: 40px;
- background: url(controls-wmp.png) no-repeat 0 0;
- margin: 0;
- padding: 0;
-}
-.mejs-wmp .mejs-controls .mejs-pause button {
- background-position: 0 -40px;
-}
-
-.mejs-wmp .mejs-controls .mejs-currenttime-container {
- position: absolute;
- top: 25px;
- left: 50%;
- margin-left: -93px;
-}
-.mejs-wmp .mejs-controls .mejs-duration-container {
- position: absolute;
- top: 25px;
- left: 50%;
- margin-left: -58px;
-}
-
-
-.mejs-wmp .mejs-controls .mejs-volume-button {
- top: 32px;
- right: 50%;
- margin-right: -55px;
- width: 20px;
- height: 15px;
-}
-.mejs-wmp .mejs-controls .mejs-volume-button button {
- margin: 0;
- padding: 0;
- background: url(controls-wmp.png) no-repeat -42px -17px;
- width: 20px;
- height: 15px;
-}
-.mejs-wmp .mejs-controls .mejs-unmute button {
- margin: 0;
- padding: 0;
- background: url(controls-wmp.png) no-repeat -42px 0;
- width: 20px;
- height: 15px;
-}
-.mejs-wmp .mejs-controls .mejs-volume-button .mejs-volume-slider {
- background: rgba(102,102,102,0.6);
-}
-
-.mejs-wmp .mejs-controls .mejs-fullscreen-button {
- top: 32px;
- right: 50%;
- margin-right: -82px;
- width: 15px;
- height: 14px;
-}
-.mejs-wmp .mejs-controls .mejs-fullscreen-button button {
- margin: 0;
- padding: 0;
- background: url(controls-wmp.png) no-repeat -63px 0;
- width: 15px;
- height: 14px;
-}
-.mejs-wmp .mejs-controls .mejs-captions-button {
- display: none;
-}
-/* END: WMP player */
-
-
-
diff --git a/media/vendor/mediaelement/css/skipback.png b/media/vendor/mediaelement/css/skipback.png
deleted file mode 100644
index 04756f966d760..0000000000000
Binary files a/media/vendor/mediaelement/css/skipback.png and /dev/null differ
diff --git a/media/vendor/mediaelement/js/flashmediaelement-cdn.swf b/media/vendor/mediaelement/js/flashmediaelement-cdn.swf
deleted file mode 100644
index a40d7c988b375..0000000000000
Binary files a/media/vendor/mediaelement/js/flashmediaelement-cdn.swf and /dev/null differ
diff --git a/media/vendor/mediaelement/js/flashmediaelement-debug.swf b/media/vendor/mediaelement/js/flashmediaelement-debug.swf
deleted file mode 100644
index 74e77a3d59d8e..0000000000000
Binary files a/media/vendor/mediaelement/js/flashmediaelement-debug.swf and /dev/null differ
diff --git a/media/vendor/mediaelement/js/flashmediaelement.swf b/media/vendor/mediaelement/js/flashmediaelement.swf
deleted file mode 100644
index ff25d19a50743..0000000000000
Binary files a/media/vendor/mediaelement/js/flashmediaelement.swf and /dev/null differ
diff --git a/media/vendor/mediaelement/js/mediaelement-and-player.js b/media/vendor/mediaelement/js/mediaelement-and-player.js
index bd0416327532e..958b971c7b3a8 100644
--- a/media/vendor/mediaelement/js/mediaelement-and-player.js
+++ b/media/vendor/mediaelement/js/mediaelement-and-player.js
@@ -1,6655 +1,9292 @@
/*!
- *
* MediaElement.js
- * HTML5