body{position:fixed;} .video-player {} .video-play, .volume-button { cursor: pointer; } .video-timer { cursor: default; } /*Start of circle*/ .video-player.circle{ position:absolute; } .video-player.circle .bevel{ width:0px; height:0px; display:none; } .video-circle-controls{ z-index : 50; top: 2px; background : rgba(0,0,0,0.2); cursor:hand; } .video-circle-play{ width: 22px; height: 28px; position:absolute; margin:auto; top: 0px; bottom: 0px; left: 0px; right: 0px; background: url(icon/video-circle.png) no-repeat -10px -39px; z-index:120; cursor:hand; -moz-transition: all 0.2s ease-in-out; /* Firefox */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-out; /* Opera */ transition: all 0.2s ease-in-out; } .video-paused-button { background: url(icon/video-circle.png) no-repeat -43px -41px; } .video-circle-play:hover { opacity: 1; } /* volume button */ .video-circle-volume-button { margin-top:7px; right:50px; position : absolute; display: block; width: 15px; height: 15px; background: url(icon/video-circle.png) no-repeat -6px -6px; } .video-circle-volume-mute { background: url(icon/video-circle.png) no-repeat -32px -6px; } /*fullscreen*/ .video-circle-player-fullscreen { margin-top:7px; right : 15px; display: block; width: 15px; height: 15px; position : absolute; background: url(icon/video-circle.png) no-repeat -57px -6px; } .video-circle-exit-fullscreen { background: url(icon/video-circle.png) no-repeat -79px -6px; } /*video seek*/ /* seek */ .video-circle-seek { position:absolute; width: 70px; height: 70px; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; border-radius: 50%; background: rgba(0,0,0,0.7); z-index: 50; } .video-circle-time{ position:absolute; width: 55px; height: 35px; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; color: red; } .video-circle-range{ position:absolute; top:0px; left:0px; width:60px; height:60px; z-index:1; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; border-radius: 50%; border:2px solid white; z-index: 100; z-index:2; } /*Start of default*/ .video-player.default{ position:absolute; } .video-player.default .bevel{ width:0px; height:0px; display:none; } .video-player.default .video-controls{ position: absolute; z-index : 2; visibility: hidden; opacity: 0; width: 100%; left:0px; bottom : 4px; height:30px; background:#222222; -moz-transition: all 0.2s ease-in-out; /* Firefox */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-out; /* Opera */ transition: all 0.2s ease-in-out; } .video-player.default .control-border{ position: absolute; width: 100%; left:0px; top:1px; height:1px; background:#444444; } /*.video-player.default video:hover + .video-controls { visibility: visible; opacity: 1; } .video-player.default .video-controls:hover { visibility: visible; opacity: 1; }*/ .video-player.default .video-play, .video-player.default .volume-box, .video-player.default .volume-button, .video-player.default .video-timer, .video-player.default .player-fullscreen { float: left; margin-top:4px; } .video-player.default .video-play { width: 22px; height: 22px; margin-left:5px; margin-right: 10px; background: url(icon/player-play.png) no-repeat; opacity:0.7; cursor:hand; -moz-transition: all 0.2s ease-in-out; /* Firefox */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-out; /* Opera */ transition: all 0.2s ease-in-out; } .video-player.default .paused-button { background: url(icon/player-pause.png) no-repeat; } .video-player.default .video-play:hover { opacity: 1; } .video-player.default .video-timer { margin-top: 8px; margin-right: 10px; cursor : default; color: #999; font-family:Arial, Tahoma; font-size: 0.7em; font-weight: bold; } /* volume button */ .video-player.default .volume-button { margin-right:10px; display: block; width: 22px; height: 22px; background: url(icon/player-volume-full.png) no-repeat; cursor:hand; opacity: 0.8; } .video-player.default .volume-button:hover { opacity: 1; } .video-player.default .volume-mute { background: url(icon/player-volume.png) no-repeat; } /*fullscreen*/ .video-player.default .player-fullscreen { margin-top:6px; display: block; width: 22px; height: 22px; background: url(icon/player-fullscreen.png) no-repeat; cursor:hand; opacity: 0.8; } .video-player.default .player-fullscreen:hover { opacity: 1; } .video-player.default .player-exit-fullscreen { margin-top:4px; background: url(icon/player-exit-fullscreen.png) no-repeat; } /*video seek*/ /* seek */ .video-player.default .video-seek { float:left; position:relative; width: 80px; height: 10px; margin-top: 10px; margin-right:10px; } .video-player.default .video-seek .slider-total{ position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1; border: 1px solid #494949; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; background: #535353; background-image: -moz-linear-gradient(top, #535353, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333)); box-shadow: inset 0 -3px 3px #333333; } .video-player.default .video-seek .slider-range{ position:absolute; top:1px; left:0px; height:100%; -moz-border-radius:15px 0px 0px 15px; -webkit-border-radius:15px 0px 0px 15px; border-radius:15px 0px 0px 15px; z-index:2; background: #4cbae8; background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce)); box-shadow: inset 0 -3px 3px #39a2ce; } .video-player.default .video-seek .slider-handle{ position:absolute; top:0px; left:0px; width: 10px; height: 10px; border: 1px solid #323232; z-index:3; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background: #e6e6e6; background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5)); box-shadow: inset 0 -3px 3px #d5d5d5; } .video-player.default .volume-seek{ position: absolute; height: 60px; width: 6px; bottom:30px; visibility: hidden; opacity: 0; } .video-player.default .volume-seek:hover { visibility: visible; opacity: 1; } .video-player.default .volume-seek .slider-total{ position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1; border: 1px solid #444; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background: #535353; background-image: -moz-linear-gradient(top, #535353, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333)); box-shadow: inset 0 3px 3px #333333; } .video-player.default .volume-seek .slider-range{ position:absolute; bottom:0px; left:1px; width:100%; height:0; -moz-border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; z-index:2; background: #e6e6e6; background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5)); box-shadow: inset 0 -3px 3px #b9a2ce; } .video-player.default .volume-seek .slider-handle{ position:absolute; bottom:0px; left:-2px; width: 10px; height: 10px; border: 1px solid #323232; z-index:3; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background: #e6e6e6; background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5)); box-shadow: inset 0 -3px 3px #b9a2ce; } /*start of round*/ .video-player.round{ position:absolute; -webkit-mask:none; } .video-player.round .bevel{ display:block; float:left; position:relative; height:80%; top:10%; width:0px; margin-right:10px; border-left:1px solid #000000; border-right:1px solid #555555; } .video-player.round .video-controls{ position: absolute; z-index : 2; visibility: hidden; opacity: 0; width:90%; left: 5%; bottom : 10px; height:30px; background:#222222; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -moz-transition: all 0.2s ease-in-out; /* Firefox */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-out; /* Opera */ transition: all 0.2s ease-in-out; } .video-player.round .control-border{ display:none; } /*.video-player.round video:hover + .video-controls { visibility: visible; opacity: 0.8; } .video-player.round .video-controls:hover { visibility: visible; opacity: 0.8; }*/ .video-player.round .video-play, .video-player.round .volume-box, .video-player.round .volume-button, .video-player.round .video-timer, .video-player.round .player-fullscreen { float: left; margin-top:4px; } .video-player.round .video-play { width: 22px; height: 22px; margin-left:10px; margin-right: 10px; background: url(icon/player-play.png) no-repeat; opacity:0.7; cursor:hand; -moz-transition: all 0.2s ease-in-out; /* Firefox */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-out; /* Opera */ transition: all 0.2s ease-in-out; } .video-player.round .paused-button { background: url(icon/player-pause.png) no-repeat; } .video-player.round .video-play:hover { opacity: 1; } .video-player.round .video-timer { margin-top: 8px; margin-right: 10px; cursor : default; color: #999; font-family:Arial, Tahoma; font-size: 0.7em; font-weight: bold; } /* volume button */ .video-player.round .volume-button { margin-right:10px; display: block; width: 22px; height: 22px; background: url(icon/player-volume-full.png) no-repeat; cursor:hand; opacity: 0.8; } .video-player.round .volume-button:hover { opacity: 1; } .video-player.round .volume-mute { background: url(icon/player-volume.png) no-repeat; } /*fullscreen*/ .video-player.round .player-fullscreen { display: block; margin-right: 10px; width: 22px; height: 22px; background: url(icon/round-player-fullscreen.png) no-repeat; cursor:hand; opacity: 0.8; } .video-player.round .player-fullscreen:hover { opacity: 1; } .video-player.round .player-exit-fullscreen { margin-top:4px; background: url(icon/round-player-exit-fullscreen.png) no-repeat; } /*video seek*/ /* seek */ .video-player.round .video-seek { float:left; position:relative; width: 80px; height: 5px; margin-top: 12px; margin-right:15px; } .video-player.round .video-seek .slider-total{ position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1; border: 1px solid #968F89; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; background: #535353; background-image: -moz-linear-gradient(top, #C8C8CA, #CECECE); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #CECECE),color-stop(1, #C8C8CA)); box-shadow: inset 0 -3px 3px #C8C8CA; } .video-player.round .video-seek .slider-range{ position:absolute; top:1px; left:1px; height:100%; -moz-border-radius:15px 0px 0px 15px; -webkit-border-radius:15px 0px 0px 15px; border-radius:15px 0px 0px 15px; z-index:2; background: #F68100; background-image: -moz-linear-gradient(top, #F68100, #EE840E); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F68100),color-stop(1, #EE840E)); box-shadow: inset 0 -3px 3px #EE840E; } .video-player.round .video-seek .slider-handle{ position:absolute; top:-5px; left:0px; background: url(icon/round-seek-handle.png) no-repeat; width: 20px; height: 20px; z-index:3; } .video-player.round .volume-seek{ position: absolute; height: 60px; width: 6px; bottom:25px; visibility: hidden; opacity: 0; } .video-player.round .volume-seek:hover { visibility: visible; opacity: 1; } .video-player.round .volume-seek .slider-total{ position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1; border: 1px solid #444; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background: #535353; background-image: -moz-linear-gradient(top, #535353, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333)); box-shadow: inset 0 3px 3px #333333; } .video-player.round .volume-seek .slider-range{ position:absolute; bottom:0px; left:1px; width:100%; height:0; -moz-border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; z-index:2; background: #e6e6e6; background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5)); box-shadow: inset 0 -3px 3px #b9a2ce; } .video-player.round .volume-seek .slider-handle{ position:absolute; bottom:0px; left:-2px; width: 10px; height: 10px; border: 1px s