.video-js-box{ text-align:left; position:relative; } video.video-js{ background-color:#000; position:relative; } .video-js-box.vjs-fullscreen{ position:fixed; left:0; top:0; right:0; bottom:0; overflow:hidden; z-index:1000; } .video-js-box.vjs-fullscreen video.video-js{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1001; } .video-js-box.vjs-fullscreen .vjs-controls{ z-index:1002; } .vjs-poster{ display:block; position:absolute; left:0; top:0; width:100%; height:100%; } .vjs-subtitles{ color:#fff; font-size:20px; text-align:center; bottom:20px; left:0; right:0; position:absolute; z-index:1002; } .vjs-controls{ list-style:none; position:absolute; margin:0; border:none; opacity:0.85; color:#fff; display:none; left:0; right:0; height:35px; padding-left:35px; padding-right:165px; } .video-js-box.vjs-controls-below .vjs-controls{ background-color:#000; } .vjs-controls > li{ position:absolute; list-style:none; float:left; padding:0; text-align:center; height:25px; margin:5px 0 0 0; background-color:#0B151A; background:#1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px; background:#1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 12px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:1px 1px 2px #000; -webkit-box-shadow:1px 1px 2px #000; -moz-box-shadow:1px 1px 2px #000; } .vjs-controls > li.vjs-play-control{ width:25px; left:5px; } .vjs-controls > li.vjs-progress-control{ width:100%; position:relative; } .vjs-controls > li.vjs-time-control{ width:75px; right:90px; } .vjs-controls > li.vjs-volume-control{ width:50px; right:35px; } .vjs-controls > li.vjs-fullscreen-control{ width:25px; right:5px; } .vjs-controls > li.vjs-progress-control{ border-top-right-radius:0; -webkit-border-top-right-radius:0; -moz-border-radius-topright:0; border-bottom-right-radius:0; -webkit-border-bottom-right-radius:0; -moz-border-radius-bottomright:0; } .vjs-controls > li.vjs-time-control{ border-top-left-radius:0; -webkit-border-top-left-radius:0; -moz-border-radius-topleft:0; border-bottom-left-radius:0; -webkit-border-bottom-left-radius:0; -moz-border-radius-bottomleft:0; } .vjs-play-control{ cursor:pointer !important; } .vjs-play-control span{ display:block; font-size:0; line-height:0; } .vjs-play-control.vjs-play span{ width:0; height:0; margin:8px 0 0 8px; border-left:10px solid #fff; border-top:5px solid rgba(0,0,0,0); border-bottom:5px solid rgba(0,0,0,0); } .vjs-play-control.vjs-pause span{ width:3px; height:10px; margin:8px auto 0; border-top:0px; border-left:3px solid #fff; border-bottom:0px; border-right:3px solid #fff; } .vjs-progress-holder{ position:relative; list-style:none; padding:0; overflow:hidden; cursor:pointer !important; height:9px; border:1px solid #777; margin:7px 1px 0 5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } .vjs-progress-holder li{ position:absolute; display:block; width:0; height:9px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } .vjs-play-progress{ background:#fff; background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#777)); background:-moz-linear-gradient(top, #fff, #777); } .vjs-load-progress{ opacity:0.8; background-color:#555; background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa)); background:-moz-linear-gradient(top, #555, #aaa); } .vjs-controls .vjs-time-control{ font-size:10px; line-height:1; font-weight:normal; font-family:Helvetica, Arial, sans-serif; } .vjs-controls .vjs-time-control span{ line-height:25px; } .vjs-volume-control{ cursor:pointer !important; } .vjs-volume-control ul{ list-style:none; display:block; margin:0 5px 0 5px; padding:4px 0 0 0; } .vjs-volume-control ul li{ list-style:none; float:left; padding:0; margin:0 2px 0 0; width:5px; height:0px; border-bottom:18px solid #555; } .vjs-volume-control ul li.vjs-volume-level-on{ border-color:#fff; } .vjs-volume-control ul li:nth-child(1){ border-bottom-width:2px; height:16px; } .vjs-volume-control ul li:nth-child(2){ border-bottom-width:4px; height:14px; } .vjs-volume-control ul li:nth-child(3){ border-bottom-width:7px; height:11px; } .vjs-volume-control ul li:nth-child(4){ border-bottom-width:10px; height:8px; } .vjs-volume-control ul li:nth-child(5){ border-bottom-width:14px; height:4px; } .vjs-volume-control ul li:nth-child(6){ margin-right:0; } .vjs-fullscreen-control{ cursor:pointer !important; } .vjs-fullscreen-control ul{ list-style:none; padding:0; text-align:left; vertical-align:top; cursor:pointer !important; margin:5px 0 0 5px; width:20px; height:20px; } .vjs-fullscreen-control ul li{ list-style:none; float:left; margin:0; padding:0; font-size:0; line-height:0; width:0; text-align:left; vertical-align:top; } .vjs-fullscreen-control ul li:nth-child(1){ margin-right:3px; margin-bottom:3px; border-top:6px solid #fff; border-right:6px solid rgba(0,0,0,0); } .vjs-fullscreen-control ul li:nth-child(2){ border-top:6px solid #fff; border-left:6px solid rgba(0,0,0,0); } .vjs-fullscreen-control ul li:nth-child(3){ clear:both; margin:0 3px 0 0; border-bottom:6px solid #fff; border-right:6px solid rgba(0,0,0,0); } .vjs-fullscreen-control ul li:nth-child(4){ border-bottom:6px solid #fff; border-left:6px solid rgba(0,0,0,0); } .vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1){ border:none; border-bottom:6px solid #fff; border-left:6px solid rgba(0,0,0,0); } .vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2){ border:none; border-bottom:6px solid #fff; border-right:6px solid rgba(0,0,0,0); } .vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3){ border:none; border-top:6px solid #fff; border-left:6px solid rgba(0,0,0,0); } .vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4){ border:none; border-top:6px solid #fff; border-right:6px solid rgba(0,0,0,0); } .vjs-no-video{ font-size:small; }