forked from videojs/video.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvideo-js.css
More file actions
203 lines (179 loc) · 11.3 KB
/
video-js.css
File metadata and controls
203 lines (179 loc) · 11.3 KB
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
/*
VideoJS Default Styles (http://videojs.com)
Version 1.1.3
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* Box containing video, controls, and download links.
If you want to add some kind of frame or special positioning, use another containing element, not video-js-box. */
.video-js-box { text-align: left; position: relative; vertical-align: bottom; } /* Will be set to the width of the video element */
/* Video Element */
video.video-js { background-color: #000; position: relative; }
/* Fullscreen styles for main elements */
.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 ul.vjs-controls { z-index: 1002; }
/* Poster Style */
.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
/* Subtiles Style */
.video-js-box .vjs-subtitles { color:#fff; font-size: 20px; text-align: center; bottom: 20px; left: 0; right: 0; position: absolute; z-index: 1002; }
/* DEFAULT SKIN (override in another file)
================================================================================
Using all CSS to draw the controls. Images could be used if desired.
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. */
/* Controls Layout
Using a Holy Grail type method to allow the progress bar holder to expand into all available space,
but using abosolute positioning for individual controls. http://www.alistapart.com/articles/holygrail */
.video-js-box ul.vjs-controls {
list-style: none; position: absolute; margin: 0; border: none; opacity: 0.85; color: #fff;
display: none; /* Start hidden */
left: 0; right: 0; /* 100% width of video-js-box */
height: 35px; /* Including any margin you want above or below control items */
padding-left: 35px; /* Width of play button + margin */
padding-right: 165px; /* Width of all the controls to the right of the progress control + margins */
padding-top: 0; padding-bottom: 0;
}
/* Controls styles when below the video */
.video-js-box.vjs-controls-below ul.vjs-controls { background-color: #000; }
.video-js-box ul.vjs-controls > li { /* Direct li children of control bar */
position: absolute; list-style: none; float: left; padding: 0; text-align: center;
height: 25px; /* Default height of individual controls */
margin: 5px 0 0 0; /* Top margin to put space between video and controls when controls are below */
/* CSS Background Gradients */
/* Default */ background-color: #0B151A;
/* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
/* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 12px;
/* CSS Curved Corners */
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
/* CSS Shadows */
box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000;
}
/* Placement of Control Items */
ul.vjs-controls > li.vjs-play-control { width: 25px; left: 5px; }
ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
ul.vjs-controls > li.vjs-time-control { width: 75px; right: 90px; }
ul.vjs-controls > li.vjs-volume-control { width: 50px; right: 35px; }
ul.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 5px; }
/* Removing curves on progress control and time control to join them. */
ul.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;
}
ul.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;
}
/* Play/Pause
-------------------------------------------------------------------------------- */
li.vjs-play-control { cursor: pointer !important; }
li.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
li.vjs-play-control.vjs-play span {
width: 0; height: 0; margin: 8px 0 0 8px;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left: 10px solid #fff; /* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
}
li.vjs-play-control.vjs-pause span {
width: 3px; height: 10px; margin: 8px auto 0;
/* Drawing the pause bars with borders */
border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
}
/* Progress
-------------------------------------------------------------------------------- */
ul.vjs-progress-holder { /* Box containing play and load progresses */
position: relative; list-style: none; padding: 0; overflow:hidden; cursor: pointer !important;
height: 9px; border: 1px solid #777;
margin: 7px 1px 0 5px; /* Placement within the progress control item */
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
ul.vjs-progress-holder li { /* Progress Bars */
position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0; list-style: none;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
li.vjs-play-progress {
/* Default */ background: #fff;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
/* Firefox */ background: -moz-linear-gradient(top, #fff, #777);
}
li.vjs-load-progress {
opacity: 0.8;
/* Default */ background-color: #555;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
/* Firefox */ background: -moz-linear-gradient(top, #555, #aaa);
}
/* Time Display
-------------------------------------------------------------------------------- */
ul.vjs-controls li.vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
ul.vjs-controls li.vjs-time-control span { line-height: 25px; /* Centering vertically */ }
/* Volume
-------------------------------------------------------------------------------- */
li.vjs-volume-control { cursor: pointer !important; }
li.vjs-volume-control ul { list-style: none; display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
/* Drawing the volume icon using 6 li elements */
li.vjs-volume-control ul li { /* Individual volume bars */
list-style: none; float: left; padding: 0;
margin: 0 2px 0 0; /* Space between */
width: 5px; height: 0px; /* Total height is height + bottom border */
border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
}
li.vjs-volume-control ul li.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
li.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
li.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
li.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
li.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
li.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
li.vjs-volume-control ul li:nth-child(6) { margin-right: 0; }
/* Fullscreen
-------------------------------------------------------------------------------- */
li.vjs-fullscreen-control { cursor: pointer !important; }
li.vjs-fullscreen-control ul {
list-style: none; padding: 0; text-align: left; vertical-align: top; cursor: pointer !important;
margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
width: 20px; height: 20px;
}
/* Drawing the fullscreen icon using 4 li elements */
li.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; }
li.vjs-fullscreen-control ul li:nth-child(1) { /* Top-left triangle */
margin-right: 3px; /* Space between top-left and top-right */
margin-bottom: 3px; /* Space between top-left and bottom-left */
border-top: 6px solid #fff; /* Height and color */
border-right: 6px solid rgba(0,0,0,0); /* Width */
}
li.vjs-fullscreen-control ul li:nth-child(2) { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
li.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); }
li.vjs-fullscreen-control ul li:nth-child(4) { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
/* Icon when video is in fullscreen mode */
.vjs-fullscreen li.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 li.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 li.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 li.vjs-fullscreen-control ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
/* Big Play Button (at start)
---------------------------------------------------------*/
div.vjs-big-play-button {
display: none; /* Start hidden */
position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; z-index: 1003; text-align: center; vertical-align: center; cursor: pointer !important;
border: 3px solid #fff; opacity: 0.9;
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
/* CSS Background Gradients */
/* Default */ background-color: #0B151A;
/* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px;
/* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 40px;
/* CSS Shadows */
box-shadow: 4px 4px 8px #000; -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000;
}
div.vjs-big-play-button:hover {
box-shadow: 0px 0px 80px #fff; -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff;
}
div.vjs-big-play-button span {
display: block; font-size: 0; line-height: 0;
width: 0; height: 0; margin: 20px 0 0 23px;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left: 40px solid #fff; /* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
}
/* Download Links - Used for browsers that don't support any video.
-------------------------------------------------------------------------------- */
.vjs-no-video { font-size: small; }