body {
background-image: ;
background-color: #999;
background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: -o-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -o-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: -ms-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -ms-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
/*background-size*/
-webkit-background-size: 13px, 29px, 37px, 53px;
-moz-background-size: 13px, 29px, 37px, 53px;
-o-background-size: 13px, 29px, 37px, 53px;
background-size: 13px, 29px, 37px, 53px;
padding-top: 50px;
text-align: center;
}
.videoPlayer {
background-color: hsla(0,0%,0%,.75);
background-image: linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.025) 50%, transparent 50%, hsla(0,0%,0%,.1));
border: 1px solid #111;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*box-shadow*/
-webkit-box-shadow: inset 0 1px 1px hsla(0,0%,100%,.15), inset 0 -1px 1px hsla(0,0%,0%,.25), 0 2px 2px hsla(0,0%,0%,.25);
-moz-box-shadow: inset 0 1px 1px hsla(0,0%,100%,.15), inset 0 -1px 1px hsla(0,0%,0%,.25), 0 2px 2px hsla(0,0%,0%,.25);
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.15), inset 0 -1px 1px hsla(0,0%,0%,.25), 0 2px 2px hsla(0,0%,0%,.25);
display: inline-block;
font-size: 0;
padding: 16px;
text-align: left;
}
.videoPlayer div {
color: #fff;
display: inline-block;
font: bold 14px/10px sans-serif;
}
a {
color: #fff;
text-decoration: none;
}
.videoPlayer .play {
font-size: 20px;
margin-right: 16px;
position: relative;
text-shadow: 0 1px 1px #000;
top: -2px;
}
.videoPlayer .progress {
background: hsla(0,0%,0%,.25);
border: 1px solid #111;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*box-shadow*/
-webkit-box-shadow: inset 0 0 1px 1px hsla(0,0%,0%,.1), inset 0 2px 3px hsla(0,0%,0%,.25), 0 1px 1px hsla(0,0%,100%,.1);
-moz-box-shadow: inset 0 0 1px 1px hsla(0,0%,0%,.1), inset 0 2px 3px hsla(0,0%,0%,.25), 0 1px 1px hsla(0,0%,100%,.1);
box-shadow: inset 0 0 1px 1px hsla(0,0%,0%,.1), inset 0 2px 3px hsla(0,0%,0%,.25), 0 1px 1px hsla(0,0%,100%,.1);
height: 10px;
margin-right: 16px;
width: 300px;
position: relative;
}
.videoPlayer .loading {
background-color: hsla(0,0%,100%,.05);
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*box-shadow*/
-webkit-box-shadow: inset 0 0 1px 1px hsla(0,0%,0%,.1), inset 0 1px 1px hsla(0,0%,100%,.1), inset 0 -1px 1px hsla(0,0%,0%,.1);
-moz-box-shadow: inset 0 0 1px 1px hsla(0,0%,0%,.1), inset 0 1px 1px hsla(0,0%,100%,.1), inset 0 -1px 1px hsla(0,0%,0%,.1);
box-shadow: inset 0 0 1px 1px hsla(0,0%,0%,.1), inset 0 1px 1px hsla(0,0%,100%,.1), inset 0 -1px 1px hsla(0,0%,0%,.1);
height: 10px;
width: 0;
position: absolute;
-webkit-animation: incr 10s linear forwards;
-moz-animation: incr 10s linear forwards;
}
.videoPlayer .playback {
background-color: #f60;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*box-shadow*/
-webkit-box-shadow: inset 0 1px 1px hsla(0,0%,100%,.25), inset 0 -1px 1px hsla(0,0%,0%,.25);
-moz-box-shadow: inset 0 1px 1px hsla(0,0%,100%,.25), inset 0 -1px 1px hsla(0,0%,0%,.25);
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.25), inset 0 -1px 1px hsla(0,0%,0%,.25);
height: 10px;
position: absolute;
width: 0;
-webkit-animation: incr 20s linear forwards;
-moz-animation: incr 20s linear forwards;
}
.videoPlayer .time {
margin-right: 16px;
position: relative;
text-shadow: 0 1px 1px hsla(0,0%,0%,.5);
top: -1px;
}
.videoPlayer .hd a {
color: #f60;
font-style: italic;
position: relative;
text-shadow: 0 1px 1px hsla(0,0%,0%,.5), 0 0 5px hsla(30,50%,75%,.5);
top: -1px;
}
@-webkit-keyframes incr{
from {width: 0}
to {width: 100%}
}
@-moz-keyframes incr{
from {width: 0}
to {width: 100%}
}
*<div class="videoPlayer">
<div class="play"><a href="javascript:void(0);">▶</a></div>
<div class="progress">
<div class="loading"></div>
<div class="playback"></div>
</div>
<div class="time">11:57</div>
<div class="hd"><a href="javascript:void(0);">HD</a></div>
</div>
