.mejs-container { position: relative; min-width:150px; background: none; font-family: sans-serif; text-align: left; vertical-align: top; width:100% !important; } .me-plugin { position: absolute; } .mejs-embed, .mejs-embed body { width: 100%; height: 100%; margin: 0; padding: 0; background: #000; overflow: hidden; } .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-container.mejs-audio{ border-radius: 3px; } /* Start: LAYERS */ .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; overflow:hidden; } .mejs-poster img { border: 0; padding: 0; border: 0; display: block; width: auto; height: 100%; } .mejs-overlay { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .mejs-overlay-play { cursor: pointer; width:100% !important; height:100% !important; } div .mejs-overlay-button { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px !important; } .mejs-overlay-loading { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; } /* div .mejs-overlay-loading span { display:block; width: 80px; height: 80px; background: #3A3C3D url(loading.gif) 50% 50% no-repeat; border-radius: 40px; z-index: 10000; } */ /* End: LAYERS */ /* Start: CONTROL BAR */ div .mejs-container .mejs-controls { position: absolute; margin: 0; padding: 0; bottom: 0; left: 0; height: 30px; width: 100%; background: #3a3c3d url(background.png); background: -webkit-linear-gradient(#4a4c4d, #2b2d2d); background: -moz-linear-gradient(#4a4c4d, #2b2d2d); background: linear-gradient(#4a4c4d, #2b2d2d); list-style: none; white-space: nowrap; } .mejs-audio .mejs-controls{ border-radius:3px; } div .mejs-container .mejs-controls div { list-style-type: none; display: inline-block; margin: 0; padding: 0; width: 32px; height: 30px; font-size: 11px; line-height: 11px; font-family: sans-serif; background: url(sep.png) left no-repeat; border: 0; } div .mejs-controls .mejs-button button { cursor: pointer; display: block; font-size: 0; line-height: 0; text-decoration: none; margin: 7px 7px 0 9px; padding: 0; position: absolute; height: 16px; width: 15px; border: 0; background: transparent url(controls.png) no-repeat; } /* :focus for accessibility */ body .mejs-controls .mejs-button button:focus { outline:none } /* End: CONTROL BAR */ /* Start: Time (current / duration) */ body .mejs-container .mejs-controls .mejs-time { color: #fff; display: inline-block; height: 17px; width: auto; padding: 8px 8px 5px 10px; overflow: hidden; text-align: center; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } body .mejs-container .mejs-controls .mejs-time span { font-size: 11px; color: #ddd; line-height: 12px; display: block; float: left; width: auto; margin:1px 2px 0 2px; } /* End: Time (current / duration) */ /* Start: Play/pause */ body .mejs-container .mejs-controls .mejs-playpause-button { cursor: pointer; background: none; width: 30px; } body .mejs-controls .mejs-playpause-button button { margin:7px 8px; } body .mejs-controls .mejs-play button { background-position:0 0; } body .mejs-controls .mejs-play:hover button { background-position:0 -32px; } body .mejs-controls .mejs-pause button { background-position:0 -16px; } body .mejs-controls .mejs-pause:hover button { background-position:0 -48px; } /* End: Play/pause */ /* Stop */ body .mejs-controls .mejs-stop button { background-position: -112px 0; } body .mejs-controls .mejs-stop:hover button { background-position: -112px -32px; } /* End: Play/pause */ /* Start: Progress bar */ body .mejs-controls div.mejs-time-rail { width: 200px; } body .mejs-controls .mejs-time-rail span { display: block; position: absolute; width: 180px; height: 5px; cursor: pointer; } body .mejs-controls .mejs-time-rail .mejs-time-total { padding: 1px; margin: 12px 8px 0 10px; background: #262929; border-bottom: #3d3f40 1px solid; box-shadow: inset 1px 1px rgba(0, 0, 0, .4); display: block; height:7px; } body .mejs-controls .mejs-time-rail .mejs-time-buffering { width:100%; background:#464849; background-image: -webkit-linear-gradient(-45deg, #464849 25%, #262929 25%, #262929 50%, #464849 50%, #464849 75%, #262929 75%, #262929); background-image: -moz-linear-gradient(-45deg, #464849 25%, #262929 25%, #262929 50%, #464849 50%, #464849 75%, #262929 75%, #262929); background-image: linear-gradient(-45deg, #464849 25%, #262929 25%, #262929 50%, #464849 50%, #464849 75%, #262929 75%, #262929); background-size: 10px 10px; -webkit-animation: buffering-stripes 2s linear infinite; -moz-animation: buffering-stripes 2s linear infinite; animation: buffering-stripes 2s linear infinite; z-index: 1; } @-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;} } @keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } body .mejs-controls .mejs-time-rail .mejs-time-loaded { background: #464849; width: 0; } body .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; background: #feea36; background-image: -webkit-linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-image: -moz-linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-image: linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-size: 6px 6px; z-index: 1; } body .mejs-controls .mejs-time-rail .mejs-time-handle { display: none; position: absolute; margin: 0; width: 5px; background: transparent; cursor: pointer; top: 1px; z-index: 1; text-align: center; } body .mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; background: #C2C8CF; background: -webkit-linear-gradient(#E3E6E9, #C2C8CF); background: -moz-linear-gradient(#E3E6E9, #C2C8CF); background: linear-gradient(#E3E6E9, #C2C8CF); width: 36px; height: 17px; border-radius: 2px; box-shadow:0 1px 1px rgba(0, 0, 0, .4); top: -26px; margin-left: -18px; text-align: center; color: #111; border:none; } body .mejs-controls .mejs-time-rail .mejs-time-float-current { margin: 3px; width: 30px; display: block; text-align: center; left: 0; } body .mejs-controls .mejs-time-rail .mejs-time-float-corner { position: absolute; display: block; width: 0; height: 0; line-height: 0; border: solid 4px #C2C8CF; border-color: #C2C8CF transparent transparent transparent; border-radius: 0; top: 17px; left: 13px; } /* .mejs-controls .mejs-time-rail:hover .mejs-time-handle { visibility:visible; } */ /* End: Progress bar */ /* Start: Fullscreen */ body .mejs-controls .mejs-fullscreen-button button { background-position:-32px 0; } body .mejs-controls .mejs-unfullscreen button { background-position:-32px -16px; } /* End: Fullscreen */ /* Start: Mute/Volume */ body .mejs-controls .mejs-volume-button { } div .mejs-controls .mejs-mute button { background-position:-16px -16px; } div .mejs-controls .mejs-mute button:hover { background-position:-16px -48px; } div .mejs-controls .mejs-unmute button { background-position:-16px 0; } div .mejs-controls .mejs-unmute button:hover { background-position:-16px -32px; } div .mejs-controls .mejs-volume-button { position: relative; } div .mejs-controls .mejs-volume-button .mejs-volume-slider { display: none; height: 68px; width: 31px; background: #3A3C3D; border-radius: 0; top: -68px; left: 1px; z-index: 1; position: absolute; margin: 0; } div .mejs-controls .mejs-volume-button:hover { border-radius: 0 0 4px 4px; } /* .mejs-controls .mejs-volume-button:hover .mejs-volume-slider { display: block; } */ div .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { position: absolute; left: 13px; top: 8px; width: 5px; height: 50px; background: #262929; border-bottom: #3d3f40 1px solid; box-shadow: inset 1px 1px rgba(0, 0, 0, .4); margin: 0; padding: 1px; } div .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { position: absolute; left: 13px; top: 8px; width: 5px; height: 50px; background: #feea36; background-image: -webkit-linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-image: -moz-linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-image: linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-size: 6px 6px; background-position: bottom; margin: 1px; } div .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { position: absolute; left: 14px; top: 16px; width: 5px; height: 5px; background: transparent; margin: 0; } /* horizontal version */ div .mejs-controls div.mejs-horizontal-volume-slider { height: 30px; width: 62px; position: relative; background:none; } div .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { position: absolute; left: 0; top: 12px; width: 50px; height: 7px; margin: 0; padding: 1px; font-size: 1px; background: #262929; border-bottom: #3d3f40 1px solid; box-shadow: inset 1px 1px rgba(0, 0, 0, .4); } div .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; left: 0; top: 12px; width: 50px; height: 5px; margin: 1px; padding: 0; font-size: 1px; background: #feea36; background-image: -webkit-linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-image: -moz-linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-image: linear-gradient(-45deg, #feea36 25%, #fdd500 25%, #fdd500 50%, #feea36 50%, #feea36 75%, #fdd500 75%, #fdd500); background-size: 6px 6px; } div .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { display: none; } /* End: Mute/Volume */ /* Start: TRACK (Captions and Chapters) */ div .mejs-controls .mejs-captions-button { position: relative; } div .mejs-controls .mejs-captions-button button { background-position:-48px 0; } div .mejs-controls .mejs-captions-button:hover button { background-position:-48px -32px; } div .mejs-controls .mejs-captions-button .mejs-captions-selector { visibility: hidden; position: absolute; bottom: 30px; right: -10px; width: 130px; height: 100px; background: #3A3C3D; border: solid 1px transparent; padding: 10px; overflow: hidden; border-radius: 0; } /* .mejs-controls .mejs-captions-button:hover .mejs-captions-selector { visibility: visible; } */ div .mejs-controls .mejs-captions-button .mejs-captions-selector ul { margin: 0; padding: 0; display: block; list-style-type: none !important; overflow: hidden; } div .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; } div .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{ clear: both; float: left; margin: 3px 3px 0 5px; } div .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{ width: 100px; float: left; padding: 4px 0 0 0; line-height: 15px; font-family: sans-serif; font-size: 10px; } div .mejs-controls .mejs-captions-button .mejs-captions-translations { font-size: 10px; margin: 0 0 5px 0; } div .mejs-chapters { position: absolute; top: 0; left: 0; -xborder-right: solid 1px #fff; width: 10000px; z-index: 1; } div .mejs-chapters .mejs-chapter { position: absolute; float: left; background: #3A3C3D; background: rgba(58, 60, 61, 0.7); background: -webkit-linear-gradient(top, rgba(74, 76, 77, 0.7), rgba(0, 0, 0, 0.7)); background: -moz-linear-gradient(top, rgba(74, 76, 77, 0.7), rgba(0, 0, 0, 0.7)); background: linear-gradient(top, rgba(74, 76, 77, 0.7), rgba(0, 0, 0, 0.7)); overflow: hidden; border: 0; } div .mejs-chapters .mejs-chapter .mejs-chapter-block { font-size: 11px; color: #fff; padding: 5px; display: block; border-right: solid 1px #313335; border-right: solid 1px rgba(49, 51, 53, .7); border-bottom: solid 1px #313335; border-bottom: solid 1px rgba(49, 51, 53, .7); cursor: pointer; } div .mejs-chapters .mejs-chapter .mejs-chapter-block-last { border-right: none; } div .mejs-chapters .mejs-chapter .mejs-chapter-block:hover { background: #333; 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: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6)); } div .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; } div .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; } div .mejs-captions-layer { position: absolute; bottom: 0; left: 0; text-align:center; /*font-weight: bold;*/ line-height: 22px; font-size: 12px; color: #fff; } div .mejs-captions-layer a { color: #fff; text-decoration: underline; } div .mejs-captions-layer[lang=ar] { font-size: 20px; font-weight: normal; } div .mejs-captions-position { position: absolute; width: 100%; bottom: 15px; left: 0; } div .mejs-captions-position-hover { bottom: 45px; } div .mejs-captions-text { padding: 5px 7px; background: #3a3c3d; background: rgba(58, 60, 61, 0.8); border-radius: 4px; } /* End: TRACK (Captions and Chapters) */ div .mejs-clear { clear: both; } /* Start: ERROR */ div .me-cannotplay { } div .me-cannotplay a { color: #fff; font-weight: bold; } div .me-cannotplay span { padding: 15px; display: block; } /* End: ERROR */ /* Start: Loop */ div .mejs-controls .mejs-loop-off button{ background-position: -64px -16px; } div .mejs-controls .mejs-loop-off:hover button{ background-position: -64px -48px; } div .mejs-controls .mejs-loop-on button { background-position: -64px 0; } div .mejs-controls .mejs-loop-on::hover button { background-position: -64px -32px; } /* End: Loop */ /* Start: backlight */ div .mejs-controls .mejs-backlight-off button{ background-position: -80px -16px; } div .mejs-controls .mejs-backlight-off:hover button{ background-position: -80px -48px; } div .mejs-controls .mejs-backlight-on button { background-position: -80px 0; } div .mejs-controls .mejs-backlight-on:hover button { background-position: -80px -32px; } /* End: backlight */ /* Start: picture controls */ div .mejs-controls .mejs-picturecontrols-button{ background-position: -96px 0; } div .mejs-controls .mejs-picturecontrols-button:hover{ background-position: -96px -32px; } /* End: picture controls */ /* context menu */ div .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 */ } div .mejs-contextmenu .mejs-contextmenu-separator { height: 1px; font-size: 0; margin: 5px 6px; background: #333; } div .mejs-contextmenu .mejs-contextmenu-item { font-family: sans-serif; font-size: 12px; padding: 4px 6px; cursor: pointer; color: #333; } div .mejs-contextmenu .mejs-contextmenu-item:hover { background: #2C7C91; color: #fff; } /* Start: SourceChooser */ div .mejs-controls .mejs-sourcechooser-button { position: relative; } div .mejs-controls .mejs-sourcechooser-button button { background-position: -128px 0; } div .mejs-controls .mejs-sourcechooser-button button { background-position: -128px -32px; } div .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { visibility: hidden; position: absolute; bottom: 26px; right: -10px; width: 130px; height: 100px; background: #3A3C3D; border: solid 1px transparent; padding: 10px; overflow: hidden; border-radius: 0; } div .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul { margin: 0; padding: 0; display: block; list-style-type: none !important; overflow: hidden; } div .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; } div .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{ clear: both; float: left; margin: 3px 3px 0 5px; } div .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: sans-serif; font-size: 10px; } /* End: SourceChooser */ /*additions:*/ div .mejs-video{overflow: hidden;} .one_third .mejs-controls div.mejs-time-rail, .one_fourth .mejs-controls div.mejs-time-rail, .one_fourth .mejs-controls .mejs-volume-button{ display:none; } .one_third .mejs-controls div.mejs-horizontal-volume-slider, .one_fourth .mejs-controls div.mejs-horizontal-volume-slider, .one_third .mejs-controls .mejs-volume-button{ float:right; } .avia_mobile .mejs-overlay-button{ display:none; }