javascript/vdo.css at master · sangmin0816/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
@charset "UTF-8";

.player { width:640px; margin: 0 auto; margin-top:20px; clear:both; position:relative; height: 100vh;  overflow-x:hidden; }

.vdo_fr { width: 640px; height: 360px; position:relative; overflow:hidden; clear:both; }

button { background-color:transparent; outline:0; border:0; }

#video { display:block;  position:absolute; }
#progress { height:10px; width:640px; position:relative; margin-top:20px; border-radius:6px; background:#333; overflow:hidden; }
#progressBar { width:0px; height:10px;  background:#c30;  }
#buttonbar { height:37px; padding:3px; background:#333; width: 100%;
box-sizing:border-box; }


.player_btn, #buttonbar input { display:inline-block; cursor:pointer; }


.player_btn { margin: 6px; width:18px; height:18px; background-repeat:no-repeat; background-image:url("./vdo/control.png");}

/*
#restart { background-position:-48px 0px; background-image:url("./vdo/controls2.png"); }
#rew { background-position:-24px 0px; background-image:url("./vdo/controls2.png"); } */


#play {position:relative; }
/* #play:after { content:"▶"; display:block; color:deepskyblue; margin-top:-8px; font-size:10px; position:absolute; top:1px; left:0px; } */
#pause {display:none; position:relative; }
/* #pause:after { content:"||"; display:block; color:deepskyblue; margin-top:-8px; font-size:10px; position:absolute; top:3px; left:0px; } */
/* #stop { background-position:-48px -48px;  }
#fastFwd { background-position:-72px 0px;  }
#mute { background-position:0px 0px; background-image:url("./vdo/controls2.png"); }
#unmute { background-position:0px -72px; display:none; }
#vmup { background-position:-48px -72px; }
#vmdown { background-position:0px -24px; background-image:url("./vdo/controls2.png"); } */


#sizeup { background-size:72px 72px; background-image:url("./vdo/controls3.png");
background-position:0px 0px; }
#sizedown { background-size:72px 72px; background-image:url("./vdo/controls3.png");
background-position:-24px 0px; }
#full { background-size:72px 72px; background-image:url("./vdo/controls3.png");
background-position:-48px 0px; }
#original { background-size:72px 72px; background-image:url("./vdo/controls3.png");
background-position:0px -24px; display:none; }
#currentTime { position:absolute; right:1.5%; top:46%; color:#fff; }
#volTxt { color:#fff; line-height: 10px;  width: 35px; text-align:center; padding: 0; }


.player_btn {
    background-image: url("./vdo/sprite.png");
}

#unmute { background-position: -230px 0; display: none;}
#restart { background-position: -23px 0; }
#vmdown { background-position: -46px 0; }
#mute { background-position: -69px 0; }
#pause { background-position: -92px 0; }
#play { background-position: -115px 0; }
#fastFwd { background-position: -161px 0;}
#vmup  { background-position: -138px 0; }
#rew { background-position: -184px 0; }
#stop { background-position: -207px 0; }