video { display: block; width: 510px; height: 280px; } .media-player { position: relative; overflow: hidden; width: 510px; } .media-player .video-box { position: relative; width: 510px; height: 280px; } .media-state { position: absolute; /* don't let overlay video for flash unblock */ display: none; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; /* preload waiting image */ background: url(../css-img/loader.gif) -9000px -9000px no-repeat; } .idle .media-state { display: block; background: url(../css-img/play-icon.png) center no-repeat; } .media-player.waiting .media-state { display: block; background: url(../css-img/loader.gif) center no-repeat; } /* * escaped for development mode .media-controls-wrapper, .media-controls { display: none; } .js-on .media-controls-wrapper, .js-on .media-controls { display: block; } */ .media-controls-wrapper { position: absolute; bottom: 0; width: 100%; } .media-controls { overflow: hidden; zoom: 1; margin: 0; padding: 3px 0; /* ie opacity bug */ position: relative; z-index: 999; } /* buttons general */ .media-controls a.button { overflow: hidden; padding: 2px; } .media-controls a:focus { outline: 1px dotted #666; } a.ui-state-default .button-text { position: absolute; display: block; left: -9999px; width: 3px; } .media-controls a.button, .media-controls .ui-slider, .media-controls .player-display { float: left; margin-left: 5px; margin-right: 5px; } .ui-handle-label, .media-label, a.fullscreen-unsupported { display: none; } .media-controls .player-display { padding: 2px 3px; font-size: 70%; } .media-controls .ui-slider { margin: 3px 0.6em 0; } .media-controls a.ui-slider-handle { padding: 0; margin-left: -0.6em; } .media-controls div.volume-slider { width: 40px; } .media-controls .ui-progressbar { height: 0.8em; opacity: 0.3; } /* on totalerror, flashblocker or showFallback: true */ .totalerror .media-controls { display: none !important; } .flashblocker .media-element-box { min-width: 40px; min-height: 40px; } .fallback { position: relative; zoom: 1; } .fallback-text { position: absolute; padding: 10px; bottom: 0; background: #000; background: rgba(0, 0, 0, 0.8); color: #fff; } .fallback-text p { margin: 0 0 10px; } .fallback-text li { list-style: none; } .fallback-text a { color: #fff; } /* * fullscreen plugin */ .wraps-fullscreen .media-state { z-index: 99999; } .wraps-fullscreen .media-controls-wrapper { z-index: 999999; }