1 /* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
2 Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
5 clip: rect
( 1px, 1px, 1px, 1px );
6 -webkit-clip-path: inset
( 50% );
7 clip-path: inset
( 50% );
19 box-sizing: border-box
;
20 font-family: 'Helvetica', Arial
, serif
;
28 box-sizing: border-box
;
31 /* Hide native play button and control bar from iOS to favor plugin button */
32 .mejs-container
video::-webkit-media-controls
,
33 .mejs-container
video::-webkit-media-controls-panel
,
34 .mejs-container
video::-webkit-media-controls-panel-container
,
35 .mejs-container video::-webkit-media-controls-start-playback-button {
36 -webkit-appearance: none
;
37 display: none
!important
;
41 .mejs-fill-container .mejs-container {
46 .mejs-fill-container {
47 background: transparent
;
53 .mejs-container:focus {
57 .mejs-iframe-overlay {
74 overflow: hidden
!important
;
77 .mejs-container-fullscreen {
87 .mejs-container-fullscreen
.mejs-mediaelement
,
88 .mejs-container-fullscreen video {
89 height: 100% !important
;
90 width: 100% !important
;
110 background-position: 50% 50%;
111 background-repeat: no-repeat
;
112 background-size: cover
;
119 :root
.mejs-poster-img
{
129 -webkit-box-align: center
;
130 -webkit-align-items: center
;
131 -ms-flex-align: center
;
133 display: -webkit-box
;
134 display: -webkit-flex
;
135 display: -ms-flexbox
;
137 -webkit-box-pack: center
;
138 -webkit-justify-content: center
;
139 -ms-flex-pack: center
;
140 justify-content: center
;
154 .mejs-overlay-button {
155 background: url
('mejs-controls.svg') no-repeat
;
156 background-position: 0 -39px;
161 .mejs-overlay:hover > .mejs-overlay-button {
162 background-position: -80px -39px;
165 .mejs-overlay-loading {
170 .mejs-overlay-loading-bg-img {
171 -webkit-animation: mejs-loading-spinner
1s linear infinite
;
172 animation: mejs-loading-spinner
1s linear infinite
;
173 background: transparent url
('mejs-controls.svg') -160px -40px no-repeat
;
180 @-webkit-keyframes mejs-loading-spinner
{
182 -webkit-transform: rotate
(360deg);
183 transform: rotate
(360deg);
187 @keyframes mejs-loading-spinner
{
189 -webkit-transform: rotate
(360deg);
190 transform: rotate
(360deg);
196 /* Start: CONTROL BAR */
199 display: -webkit-box
;
200 display: -webkit-flex
;
201 display: -ms-flexbox
;
205 list-style-type: none
;
213 .mejs-controls:not([style*='display: none']) {
214 background: rgba
(255, 0, 0, 0.7);
215 background: -webkit-linear-gradient
(transparent
, rgba
(0, 0, 0, 0.35));
216 background: linear-gradient
(transparent
, rgba
(0, 0, 0, 0.35));
229 .mejs-button > button {
230 background: transparent url
('mejs-controls.svg');
241 text-decoration: none
;
245 /* :focus for accessibility */
246 .mejs-button > button:focus {
247 outline: dotted
1px #999;
250 .mejs-container-keyboard-inactive a
,
251 .mejs-container-keyboard-inactive
a:focus
,
252 .mejs-container-keyboard-inactive button
,
253 .mejs-container-keyboard-inactive
button:focus
,
254 .mejs-container-keyboard-inactive
[role
=slider
],
255 .mejs-container-keyboard-inactive [role=slider]:focus {
259 /* End: CONTROL BAR */
261 /* Start: Time (Current / Duration) */
263 box-sizing: content-box
;
274 /* End: Time (Current / Duration) */
276 /* Start: Play/Pause/Stop */
277 .mejs-play > button {
278 background-position: 0 0;
281 .mejs-pause > button {
282 background-position: -20px 0;
285 .mejs-replay > button {
286 background-position: -160px 0;
289 /* End: Play/Pause/Stop */
291 /* Start: Progress Bar */
295 -webkit-flex-grow: 1;
296 -ms-flex-positive: 1;
305 .mejs-time-buffering
,
310 .mejs-time-float-current
,
311 .mejs-time-float-corner
,
321 background: rgba
(255, 255, 255, 0.3);
326 .mejs-time-buffering {
327 -webkit-animation: buffering-stripes
2s linear infinite
;
328 animation: buffering-stripes
2s linear infinite
;
329 background: -webkit-linear-gradient
(135deg, rgba
(255, 255, 255, 0.4) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.4) 50%, rgba
(255, 255, 255, 0.4) 75%, transparent
75%, transparent
);
330 background: linear-gradient
(-45deg, rgba
(255, 255, 255, 0.4) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.4) 50%, rgba
(255, 255, 255, 0.4) 75%, transparent
75%, transparent
);
331 background-size: 15px 15px;
335 @-webkit-keyframes buffering-stripes
{
337 background-position: 0 0;
340 background-position: 30px 0;
344 @keyframes buffering-stripes
{
346 background-position: 0 0;
349 background-position: 30px 0;
354 background: rgba
(255, 255, 255, 0.3);
358 .mejs-time-handle-content {
359 background: rgba
(255, 255, 255, 0.9);
363 background: rgba
(255, 255, 255, 0.5);
367 .mejs-time-hovered.negative {
368 background: rgba
(0, 0, 0, 0.2);
372 .mejs-time-buffering
,
376 -webkit-transform: scaleX
(0);
377 -ms-transform: scaleX
(0);
378 transform: scaleX
(0);
379 -webkit-transform-origin: 0 0;
380 -ms-transform-origin: 0 0;
381 transform-origin: 0 0;
382 -webkit-transition: 0.15s ease-in all
;
383 transition: 0.15s ease-in all
;
387 .mejs-time-buffering {
388 -webkit-transform: scaleX
(1);
389 -ms-transform: scaleX
(1);
390 transform: scaleX
(1);
394 -webkit-transition: height
0.1s cubic-bezier
(0.44, 0, 1, 1);
395 transition: height
0.1s cubic-bezier
(0.44, 0, 1, 1);
398 .mejs-time-hovered.no-hover {
399 -webkit-transform: scaleX
(0) !important
;
400 -ms-transform: scaleX
(0) !important
;
401 transform: scaleX
(0) !important
;
405 .mejs-time-handle-content {
406 border: 4px solid transparent
;
410 -webkit-transform: translateX
(0);
411 -ms-transform: translateX
(0);
412 transform: translateX
(0);
416 .mejs-time-handle-content {
417 border: 4px solid rgba
(255, 255, 255, 0.9);
422 -webkit-transform: scale
(0);
423 -ms-transform: scale
(0);
428 .mejs-time-rail:hover
.mejs-time-handle-content
,
429 .mejs-time-rail
.mejs-time-handle-content:focus
,
430 .mejs-time-rail .mejs-time-handle-content:active {
431 -webkit-transform: scale
(1);
432 -ms-transform: scale
(1);
438 border: solid
1px #333;
446 -webkit-transform: translateX
(-50%);
447 -ms-transform: translateX
(-50%);
448 transform: translateX
(-50%);
452 .mejs-time-float-current {
460 .mejs-time-float-corner {
461 border: solid
5px #eee;
462 border-color: #eee transparent transparent
;
470 -webkit-transform: translateX
(-50%);
471 -ms-transform: translateX
(-50%);
472 transform: translateX
(-50%);
476 .mejs-long-video .mejs-time-float {
481 .mejs-long-video .mejs-time-float-current {
493 /* End: Progress Bar */
495 /* Start: Fullscreen */
496 .mejs-fullscreen-button > button {
497 background-position: -80px 0;
500 .mejs-unfullscreen > button {
501 background-position: -100px 0;
504 /* End: Fullscreen */
506 /* Start: Mute/Volume */
507 .mejs-mute > button {
508 background-position: -60px 0;
511 .mejs-unmute > button {
512 background-position: -40px 0;
515 .mejs-volume-button {
519 .mejs-volume-button > .mejs-volume-slider {
520 background: rgba
(50, 50, 50, 0.7);
528 -webkit-transform: translateX
(-50%);
529 -ms-transform: translateX
(-50%);
530 transform: translateX
(-50%);
535 .mejs-volume-button:hover {
536 border-radius: 0 0 4px 4px;
540 background: rgba
(255, 255, 255, 0.5);
546 -webkit-transform: translateX
(-50%);
547 -ms-transform: translateX
(-50%);
548 transform: translateX
(-50%);
552 .mejs-volume-current {
553 background: rgba
(255, 255, 255, 0.9);
560 .mejs-volume-handle {
561 background: rgba
(255, 255, 255, 0.9);
567 -webkit-transform: translateX
(-50%);
568 -ms-transform: translateX
(-50%);
569 transform: translateX
(-50%);
573 .mejs-horizontal-volume-slider {
577 vertical-align: middle
;
581 .mejs-horizontal-volume-total {
582 background: rgba
(50, 50, 50, 0.8);
594 .mejs-horizontal-volume-current {
595 background: rgba
(255, 255, 255, 0.8);
607 .mejs-horizontal-volume-handle {
611 /* End: Mute/Volume */
613 /* Start: Track (Captions and Chapters) */
614 .mejs-captions-button
,
615 .mejs-chapters-button {
619 .mejs-captions-button > button {
620 background-position: -140px 0;
623 .mejs-chapters-button > button {
624 background-position: -180px 0;
627 .mejs-captions-button
> .mejs-captions-selector
,
628 .mejs-chapters-button > .mejs-chapters-selector {
629 background: rgba
(50, 50, 50, 0.7);
630 border: solid
1px transparent
;
642 .mejs-chapters-button > .mejs-chapters-selector {
647 .mejs-captions-selector-list
,
648 .mejs-chapters-selector-list {
649 list-style-type: none
!important
;
655 .mejs-captions-selector-list-item
,
656 .mejs-chapters-selector-list-item {
660 list-style-type: none
!important
;
666 .mejs-captions-selector-list-item:hover
,
667 .mejs-chapters-selector-list-item:hover {
668 background-color: rgb
(200, 200, 200) !important
;
669 background-color: rgba
(255, 255, 255, 0.4) !important
;
672 .mejs-captions-selector-input
,
673 .mejs-chapters-selector-input {
677 margin: 3px 3px 0 5px;
681 .mejs-captions-selector-label
,
682 .mejs-chapters-selector-label {
690 .mejs-captions-selected
,
691 .mejs-chapters-selected {
692 color: rgba
(33, 248, 248, 1);
695 .mejs-captions-translations {
700 .mejs-captions-layer {
710 .mejs-captions-layer a {
712 text-decoration: underline
;
715 .mejs-captions-layer[lang=ar] {
720 .mejs-captions-position {
727 .mejs-captions-position-hover {
732 .mejs-captions-text * {
733 background: rgba
(20, 20, 20, 0.5);
734 box-shadow: 5px 0 0 rgba
(20, 20, 20, 0.5), -5px 0 0 rgba
(20, 20, 20, 0.5);
736 white-space: pre-wrap
;
739 .mejs-container.mejs-hide-cues video::-webkit-media-text-track-container {
743 /* End: Track (Captions and Chapters) */
746 .mejs-overlay-error {
749 .mejs-overlay-error > img {
767 display: inline-block
;