master
1/*!
2Video.js Default Styles (http://videojs.com)
3Version 4.6.4
4Create your own skin at http://designer.videojs.com
5*/
6/* SKIN
7================================================================================
8The main class name for all skin-specific styles. To make your own skin,
9replace all occurances of 'vjs-default-skin' with a new name. Then add your new
10skin name to your video tag instead of the default skin.
11e.g. <video class="video-js my-skin-name">
12*/
13.vjs-default-skin {
14 color: #cccccc;
15}
16/* Custom Icon Font
17--------------------------------------------------------------------------------
18The control icons are from a custom font. Each icon corresponds to a character
19(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
20*/
21@font-face {
22 font-family: 'VideoJS';
23 src: url('font/vjs.eot');
24 src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype');
25 font-weight: normal;
26 font-style: normal;
27}
28/* Base UI Component Classes
29--------------------------------------------------------------------------------
30*/
31/* Slider - used for Volume bar and Seek bar */
32.vjs-default-skin .vjs-slider {
33 /* Replace browser focus hightlight with handle highlight */
34 outline: 0;
35 position: relative;
36 cursor: pointer;
37 padding: 0;
38 /* background-color-with-alpha */
39 background-color: #333333;
40 background-color: rgba(51, 51, 51, 0.9);
41}
42.vjs-default-skin .vjs-slider:focus {
43 /* box-shadow */
44 -webkit-box-shadow: 0 0 2em #ffffff;
45 -moz-box-shadow: 0 0 2em #ffffff;
46 box-shadow: 0 0 2em #ffffff;
47}
48.vjs-default-skin .vjs-slider-handle {
49 position: absolute;
50 /* Needed for IE6 */
51 left: 0;
52 top: 0;
53}
54.vjs-default-skin .vjs-slider-handle:before {
55 content: "\e009";
56 font-family: VideoJS;
57 font-size: 1em;
58 line-height: 1;
59 text-align: center;
60 text-shadow: 0em 0em 1em #fff;
61 position: absolute;
62 top: 0;
63 left: 0;
64 /* Rotate the square icon to make a diamond */
65 /* transform */
66 -webkit-transform: rotate(-45deg);
67 -moz-transform: rotate(-45deg);
68 -ms-transform: rotate(-45deg);
69 -o-transform: rotate(-45deg);
70 transform: rotate(-45deg);
71}
72/* Control Bar
73--------------------------------------------------------------------------------
74The default control bar that is a container for most of the controls.
75*/
76.vjs-default-skin .vjs-control-bar {
77 /* Start hidden */
78 display: none;
79 position: absolute;
80 /* Place control bar at the bottom of the player box/video.
81 If you want more margin below the control bar, add more height. */
82 bottom: 0;
83 /* Use left/right to stretch to 100% width of player div */
84 left: 0;
85 right: 0;
86 /* Height includes any margin you want above or below control items */
87 height: 3.0em;
88 /* background-color-with-alpha */
89 background-color: #07141e;
90 background-color: rgba(7, 20, 30, 0.7);
91}
92/* Show the control bar only once the video has started playing */
93.vjs-default-skin.vjs-has-started .vjs-control-bar {
94 display: block;
95 /* Visibility needed to make sure things hide in older browsers too. */
96
97 visibility: visible;
98 opacity: 1;
99 /* transition */
100 -webkit-transition: visibility 0.1s, opacity 0.1s;
101 -moz-transition: visibility 0.1s, opacity 0.1s;
102 -o-transition: visibility 0.1s, opacity 0.1s;
103 transition: visibility 0.1s, opacity 0.1s;
104}
105/* Hide the control bar when the video is playing and the user is inactive */
106.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
107 display: block;
108 visibility: hidden;
109 opacity: 0;
110 /* transition */
111 -webkit-transition: visibility 1s, opacity 1s;
112 -moz-transition: visibility 1s, opacity 1s;
113 -o-transition: visibility 1s, opacity 1s;
114 transition: visibility 1s, opacity 1s;
115}
116.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
117 display: none;
118}
119.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
120 display: none;
121}
122/* The control bar shouldn't show after an error */
123.vjs-default-skin.vjs-error .vjs-control-bar {
124 display: none;
125}
126/* IE8 is flakey with fonts, and you have to change the actual content to force
127fonts to show/hide properly.
128 - "\9" IE8 hack didn't work for this
129 - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
130*/
131@media \0screen {
132 .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
133 content: "";
134 }
135}
136/* General styles for individual controls. */
137.vjs-default-skin .vjs-control {
138 outline: none;
139 position: relative;
140 float: left;
141 text-align: center;
142 margin: 0;
143 padding: 0;
144 height: 3.0em;
145 width: 4em;
146}
147/* FontAwsome button icons */
148.vjs-default-skin .vjs-control:before {
149 font-family: VideoJS;
150 font-size: 1.5em;
151 line-height: 2;
152 position: absolute;
153 top: 0;
154 left: 0;
155 width: 100%;
156 height: 100%;
157 text-align: center;
158 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
159}
160/* Replacement for focus outline */
161.vjs-default-skin .vjs-control:focus:before,
162.vjs-default-skin .vjs-control:hover:before {
163 text-shadow: 0em 0em 1em #ffffff;
164}
165.vjs-default-skin .vjs-control:focus {
166 /* outline: 0; */
167 /* keyboard-only users cannot see the focus on several of the UI elements when
168 this is set to 0 */
169
170}
171/* Hide control text visually, but have it available for screenreaders */
172.vjs-default-skin .vjs-control-text {
173 /* hide-visually */
174 border: 0;
175 clip: rect(0 0 0 0);
176 height: 1px;
177 margin: -1px;
178 overflow: hidden;
179 padding: 0;
180 position: absolute;
181 width: 1px;
182}
183/* Play/Pause
184--------------------------------------------------------------------------------
185*/
186.vjs-default-skin .vjs-play-control {
187 width: 5em;
188 cursor: pointer;
189}
190.vjs-default-skin .vjs-play-control:before {
191 content: "\e001";
192}
193.vjs-default-skin.vjs-playing .vjs-play-control:before {
194 content: "\e002";
195}
196/* Playback toggle
197--------------------------------------------------------------------------------
198*/
199.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value {
200 font-size: 1.5em;
201 line-height: 2;
202 position: absolute;
203 top: 0;
204 left: 0;
205 width: 100%;
206 height: 100%;
207 text-align: center;
208 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
209}
210.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
211 width: 4em;
212 left: -2em;
213 list-style: none;
214}
215/* Volume/Mute
216-------------------------------------------------------------------------------- */
217.vjs-default-skin .vjs-mute-control,
218.vjs-default-skin .vjs-volume-menu-button {
219 cursor: pointer;
220 float: right;
221}
222.vjs-default-skin .vjs-mute-control:before,
223.vjs-default-skin .vjs-volume-menu-button:before {
224 content: "\e006";
225}
226.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
227.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
228 content: "\e003";
229}
230.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
231.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
232 content: "\e004";
233}
234.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
235.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
236 content: "\e005";
237}
238.vjs-default-skin .vjs-volume-control {
239 width: 5em;
240 float: right;
241}
242.vjs-default-skin .vjs-volume-bar {
243 width: 5em;
244 height: 0.6em;
245 margin: 1.1em auto 0;
246}
247.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
248 height: 2.9em;
249}
250.vjs-default-skin .vjs-volume-level {
251 position: absolute;
252 top: 0;
253 left: 0;
254 height: 0.5em;
255 /* assuming volume starts at 1.0 */
256
257 width: 100%;
258 background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
259}
260.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
261 width: 0.5em;
262 height: 0.5em;
263 /* Assumes volume starts at 1.0. If you change the size of the
264 handle relative to the volume bar, you'll need to update this value
265 too. */
266
267 left: 4.5em;
268}
269.vjs-default-skin .vjs-volume-handle:before {
270 font-size: 0.9em;
271 top: -0.2em;
272 left: -0.2em;
273 width: 1em;
274 height: 1em;
275}
276.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
277 width: 6em;
278 left: -4em;
279}
280/* Progress
281--------------------------------------------------------------------------------
282*/
283.vjs-default-skin .vjs-progress-control {
284 position: absolute;
285 left: 0;
286 right: 0;
287 width: auto;
288 font-size: 0.3em;
289 height: 1em;
290 /* Set above the rest of the controls. */
291 top: -1em;
292 /* Shrink the bar slower than it grows. */
293 /* transition */
294 -webkit-transition: all 0.4s;
295 -moz-transition: all 0.4s;
296 -o-transition: all 0.4s;
297 transition: all 0.4s;
298}
299/* On hover, make the progress bar grow to something that's more clickable.
300 This simply changes the overall font for the progress bar, and this
301 updates both the em-based widths and heights, as wells as the icon font */
302.vjs-default-skin:hover .vjs-progress-control {
303 font-size: .9em;
304 /* Even though we're not changing the top/height, we need to include them in
305 the transition so they're handled correctly. */
306
307 /* transition */
308 -webkit-transition: all 0.2s;
309 -moz-transition: all 0.2s;
310 -o-transition: all 0.2s;
311 transition: all 0.2s;
312}
313/* Box containing play and load progresses. Also acts as seek scrubber. */
314.vjs-default-skin .vjs-progress-holder {
315 height: 100%;
316}
317/* Progress Bars */
318.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
319.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
320 position: absolute;
321 display: block;
322 height: 100%;
323 margin: 0;
324 padding: 0;
325 /* updated by javascript during playback */
326
327 width: 0;
328 /* Needed for IE6 */
329 left: 0;
330 top: 0;
331}
332.vjs-default-skin .vjs-play-progress {
333 /*
334 Using a data URI to create the white diagonal lines with a transparent
335 background. Surprisingly works in IE8.
336 Created using http://www.patternify.com
337 Changing the first color value will change the bar color.
338 Also using a paralax effect to make the lines move backwards.
339 The -50% left position makes that happen.
340 */
341
342 background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
343}
344.vjs-default-skin .vjs-load-progress {
345 background: #646464 /* IE8- Fallback */;
346 background: rgba(255, 255, 255, 0.4);
347}
348.vjs-default-skin .vjs-seek-handle {
349 width: 1.5em;
350 height: 100%;
351}
352.vjs-default-skin .vjs-seek-handle:before {
353 padding-top: 0.1em /* Minor adjustment */;
354}
355/* Live Mode
356--------------------------------------------------------------------------------
357*/
358.vjs-default-skin.vjs-live .vjs-time-controls,
359.vjs-default-skin.vjs-live .vjs-time-divider,
360.vjs-default-skin.vjs-live .vjs-progress-control {
361 display: none;
362}
363.vjs-default-skin.vjs-live .vjs-live-display {
364 display: block;
365}
366/* Live Display
367--------------------------------------------------------------------------------
368*/
369.vjs-default-skin .vjs-live-display {
370 display: none;
371 font-size: 1em;
372 line-height: 3em;
373}
374/* Time Display
375--------------------------------------------------------------------------------
376*/
377.vjs-default-skin .vjs-time-controls {
378 font-size: 1em;
379 /* Align vertically by making the line height the same as the control bar */
380 line-height: 3em;
381}
382.vjs-default-skin .vjs-current-time {
383 float: left;
384}
385.vjs-default-skin .vjs-duration {
386 float: left;
387}
388/* Remaining time is in the HTML, but not included in default design */
389.vjs-default-skin .vjs-remaining-time {
390 display: none;
391 float: left;
392}
393.vjs-time-divider {
394 float: left;
395 line-height: 3em;
396}
397/* Fullscreen
398--------------------------------------------------------------------------------
399*/
400.vjs-default-skin .vjs-fullscreen-control {
401 width: 3.8em;
402 cursor: pointer;
403 float: right;
404}
405.vjs-default-skin .vjs-fullscreen-control:before {
406 content: "\e000";
407}
408/* Switch to the exit icon when the player is in fullscreen */
409.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
410 content: "\e00b";
411}
412/* Big Play Button (play button at start)
413--------------------------------------------------------------------------------
414Positioning of the play button in the center or other corners can be done more
415easily in the skin designer. http://designer.videojs.com/
416*/
417.vjs-default-skin .vjs-big-play-button {
418 left: 0.5em;
419 top: 0.5em;
420 font-size: 3em;
421 display: block;
422 z-index: 2;
423 position: absolute;
424 width: 4em;
425 height: 2.6em;
426 text-align: center;
427 vertical-align: middle;
428 cursor: pointer;
429 opacity: 1;
430 /* Need a slightly gray bg so it can be seen on black backgrounds */
431 /* background-color-with-alpha */
432 background-color: #07141e;
433 background-color: rgba(7, 20, 30, 0.7);
434 border: 0.1em solid #3b4249;
435 /* border-radius */
436 -webkit-border-radius: 0.8em;
437 -moz-border-radius: 0.8em;
438 border-radius: 0.8em;
439 /* box-shadow */
440 -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
441 -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
442 box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
443 /* transition */
444 -webkit-transition: all 0.4s;
445 -moz-transition: all 0.4s;
446 -o-transition: all 0.4s;
447 transition: all 0.4s;
448}
449/* Optionally center */
450.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
451 /* Center it horizontally */
452 left: 50%;
453 margin-left: -2.1em;
454 /* Center it vertically */
455 top: 50%;
456 margin-top: -1.4000000000000001em;
457}
458/* Hide if controls are disabled */
459.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
460 display: none;
461}
462/* Hide when video starts playing */
463.vjs-default-skin.vjs-has-started .vjs-big-play-button {
464 display: none;
465}
466/* Hide on mobile devices. Remove when we stop using native controls
467 by default on mobile */
468.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
469 display: none;
470}
471.vjs-default-skin:hover .vjs-big-play-button,
472.vjs-default-skin .vjs-big-play-button:focus {
473 outline: 0;
474 border-color: #fff;
475 /* IE8 needs a non-glow hover state */
476 background-color: #505050;
477 background-color: rgba(50, 50, 50, 0.75);
478 /* box-shadow */
479 -webkit-box-shadow: 0 0 3em #ffffff;
480 -moz-box-shadow: 0 0 3em #ffffff;
481 box-shadow: 0 0 3em #ffffff;
482 /* transition */
483 -webkit-transition: all 0s;
484 -moz-transition: all 0s;
485 -o-transition: all 0s;
486 transition: all 0s;
487}
488.vjs-default-skin .vjs-big-play-button:before {
489 content: "\e001";
490 font-family: VideoJS;
491 /* In order to center the play icon vertically we need to set the line height
492 to the same as the button height */
493
494 line-height: 2.6em;
495 text-shadow: 0.05em 0.05em 0.1em #000;
496 text-align: center /* Needed for IE8 */;
497 position: absolute;
498 left: 0;
499 width: 100%;
500 height: 100%;
501}
502.vjs-error .vjs-big-play-button {
503 display: none;
504}
505/* Error Display
506--------------------------------------------------------------------------------
507*/
508.vjs-error-display {
509 display: none;
510}
511.vjs-error .vjs-error-display {
512 display: block;
513 position: absolute;
514 left: 0;
515 top: 0;
516 width: 100%;
517 height: 100%;
518}
519.vjs-error .vjs-error-display:before {
520 content: 'X';
521 font-family: Arial;
522 font-size: 4em;
523 color: #666666;
524 /* In order to center the play icon vertically we need to set the line height
525 to the same as the button height */
526
527 line-height: 1;
528 text-shadow: 0.05em 0.05em 0.1em #000;
529 text-align: center /* Needed for IE8 */;
530 vertical-align: middle;
531 position: absolute;
532 top: 50%;
533 margin-top: -0.5em;
534 width: 100%;
535}
536.vjs-error-display div {
537 position: absolute;
538 font-size: 1.4em;
539 text-align: center;
540 bottom: 1em;
541 right: 1em;
542 left: 1em;
543}
544.vjs-error-display a,
545.vjs-error-display a:visited {
546 color: #F4A460;
547}
548/* Loading Spinner
549--------------------------------------------------------------------------------
550*/
551.vjs-loading-spinner {
552 display: none;
553 position: absolute;
554 top: 50%;
555 left: 50%;
556 font-size: 4em;
557 line-height: 1;
558 width: 1em;
559 height: 1em;
560 margin-left: -0.5em;
561 margin-top: -0.5em;
562 opacity: 0.75;
563 /* animation */
564 -webkit-animation: spin 1.5s infinite linear;
565 -moz-animation: spin 1.5s infinite linear;
566 -o-animation: spin 1.5s infinite linear;
567 animation: spin 1.5s infinite linear;
568}
569/* Errors are unrecoverable without user interaction,
570 so hide the spinner in the case of an error */
571.video-js.vjs-error .vjs-loading-spinner {
572 /* using !important flag because currently the loading spinner
573 uses hide()/show() instead of classes. The !important can be
574 removed when that's updated */
575
576 display: none !important;
577 /* ensure animation doesn't continue while hidden */
578
579 /* animation */
580 -webkit-animation: none;
581 -moz-animation: none;
582 -o-animation: none;
583 animation: none;
584}
585.vjs-default-skin .vjs-loading-spinner:before {
586 content: "\e01e";
587 font-family: VideoJS;
588 position: absolute;
589 top: 0;
590 left: 0;
591 width: 1em;
592 height: 1em;
593 text-align: center;
594 text-shadow: 0em 0em 0.1em #000;
595}
596@-moz-keyframes spin {
597 0% {
598 -moz-transform: rotate(0deg);
599 }
600 100% {
601 -moz-transform: rotate(359deg);
602 }
603}
604@-webkit-keyframes spin {
605 0% {
606 -webkit-transform: rotate(0deg);
607 }
608 100% {
609 -webkit-transform: rotate(359deg);
610 }
611}
612@-o-keyframes spin {
613 0% {
614 -o-transform: rotate(0deg);
615 }
616 100% {
617 -o-transform: rotate(359deg);
618 }
619}
620@keyframes spin {
621 0% {
622 transform: rotate(0deg);
623 }
624 100% {
625 transform: rotate(359deg);
626 }
627}
628/* Menu Buttons (Captions/Subtitles/etc.)
629--------------------------------------------------------------------------------
630*/
631.vjs-default-skin .vjs-menu-button {
632 float: right;
633 cursor: pointer;
634}
635.vjs-default-skin .vjs-menu {
636 display: none;
637 position: absolute;
638 bottom: 0;
639 left: 0em;
640 /* (Width of vjs-menu - width of button) / 2 */
641
642 width: 0em;
643 height: 0em;
644 margin-bottom: 3em;
645 border-left: 2em solid transparent;
646 border-right: 2em solid transparent;
647 border-top: 1.55em solid #000000;
648 /* Same width top as ul bottom */
649
650 border-top-color: rgba(7, 40, 50, 0.5);
651 /* Same as ul background */
652
653}
654/* Button Pop-up Menu */
655.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
656 display: block;
657 padding: 0;
658 margin: 0;
659 position: absolute;
660 width: 10em;
661 bottom: 1.5em;
662 /* Same bottom as vjs-menu border-top */
663
664 max-height: 15em;
665 overflow: auto;
666 left: -5em;
667 /* Width of menu - width of button / 2 */
668
669 /* background-color-with-alpha */
670 background-color: #07141e;
671 background-color: rgba(7, 20, 30, 0.7);
672 /* box-shadow */
673 -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
674 -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
675 box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
676}
677.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
678 display: block;
679}
680.vjs-default-skin .vjs-menu-button ul li {
681 list-style: none;
682 margin: 0;
683 padding: 0.3em 0 0.3em 0;
684 line-height: 1.4em;
685 font-size: 1.2em;
686 text-align: center;
687 text-transform: lowercase;
688}
689.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
690 background-color: #000;
691}
692.vjs-default-skin .vjs-menu-button ul li:focus,
693.vjs-default-skin .vjs-menu-button ul li:hover,
694.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
695.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
696 outline: 0;
697 color: #111;
698 /* background-color-with-alpha */
699 background-color: #ffffff;
700 background-color: rgba(255, 255, 255, 0.75);
701 /* box-shadow */
702 -webkit-box-shadow: 0 0 1em #ffffff;
703 -moz-box-shadow: 0 0 1em #ffffff;
704 box-shadow: 0 0 1em #ffffff;
705}
706.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
707 text-align: center;
708 text-transform: uppercase;
709 font-size: 1em;
710 line-height: 2em;
711 padding: 0;
712 margin: 0 0 0.3em 0;
713 font-weight: bold;
714 cursor: default;
715}
716/* Subtitles Button */
717.vjs-default-skin .vjs-subtitles-button:before {
718 content: "\e00c";
719}
720/* Captions Button */
721.vjs-default-skin .vjs-captions-button:before {
722 content: "\e008";
723}
724/* Replacement for focus outline */
725.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
726.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
727 /* box-shadow */
728 -webkit-box-shadow: 0 0 1em #ffffff;
729 -moz-box-shadow: 0 0 1em #ffffff;
730 box-shadow: 0 0 1em #ffffff;
731}
732/*
733REQUIRED STYLES (be careful overriding)
734================================================================================
735When loading the player, the video tag is replaced with a DIV,
736that will hold the video tag or object tag for other playback methods.
737The div contains the video playback element (Flash or HTML5) and controls,
738and sets the width and height of the video.
739
740** If you want to add some kind of border/padding (e.g. a frame), or special
741positioning, use another containing element. Otherwise you risk messing up
742control positioning and full window mode. **
743*/
744.video-js {
745 background-color: #000;
746 position: relative;
747 padding: 0;
748 /* Start with 10px for base font size so other dimensions can be em based and
749 easily calculable. */
750
751 font-size: 10px;
752 /* Allow poster to be vertially aligned. */
753
754 vertical-align: middle;
755 /* display: table-cell; */
756 /*This works in Safari but not Firefox.*/
757
758 /* Provide some basic defaults for fonts */
759
760 font-weight: normal;
761 font-style: normal;
762 /* Avoiding helvetica: issue #376 */
763
764 font-family: Arial, sans-serif;
765 /* Turn off user selection (text highlighting) by default.
766 The majority of player components will not be text blocks.
767 Text areas will need to turn user selection back on. */
768
769 /* user-select */
770 -webkit-user-select: none;
771 -moz-user-select: none;
772 -ms-user-select: none;
773 user-select: none;
774}
775/* Playback technology elements expand to the width/height of the containing div
776 <video> or <object> */
777.video-js .vjs-tech {
778 position: absolute;
779 top: 0;
780 left: 0;
781 width: 100%;
782 height: 100%;
783}
784/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
785 checking fullScreenEnabled. */
786.video-js:-moz-full-screen {
787 position: absolute;
788}
789/* Fullscreen Styles */
790body.vjs-full-window {
791 padding: 0;
792 margin: 0;
793 height: 100%;
794 /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
795 overflow-y: auto;
796}
797.video-js.vjs-fullscreen {
798 position: fixed;
799 overflow: hidden;
800 z-index: 1000;
801 left: 0;
802 top: 0;
803 bottom: 0;
804 right: 0;
805 width: 100% !important;
806 height: 100% !important;
807 /* IE6 full-window (underscore hack) */
808 _position: absolute;
809}
810.video-js:-webkit-full-screen {
811 width: 100% !important;
812 height: 100% !important;
813}
814.video-js.vjs-fullscreen.vjs-user-inactive {
815 cursor: none;
816}
817/* Poster Styles */
818.vjs-poster {
819 background-repeat: no-repeat;
820 background-position: 50% 50%;
821 background-size: contain;
822 cursor: pointer;
823 height: 100%;
824 margin: 0;
825 padding: 0;
826 position: relative;
827 width: 100%;
828}
829.vjs-poster img {
830 display: block;
831 margin: 0 auto;
832 max-height: 100%;
833 padding: 0;
834 width: 100%;
835}
836/* Hide the poster when native controls are used otherwise it covers them */
837.video-js.vjs-using-native-controls .vjs-poster {
838 display: none;
839}
840/* Text Track Styles */
841/* Overall track holder for both captions and subtitles */
842.video-js .vjs-text-track-display {
843 text-align: center;
844 position: absolute;
845 bottom: 4em;
846 /* Leave padding on left and right */
847 left: 1em;
848 right: 1em;
849}
850/* Move captions down when controls aren't being shown */
851.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
852 bottom: 1em;
853}
854/* Individual tracks */
855.video-js .vjs-text-track {
856 display: none;
857 font-size: 1.4em;
858 text-align: center;
859 margin-bottom: 0.1em;
860 /* Transparent black background, or fallback to all black (oldIE) */
861 /* background-color-with-alpha */
862 background-color: #000000;
863 background-color: rgba(0, 0, 0, 0.5);
864}
865.video-js .vjs-subtitles {
866 color: #ffffff /* Subtitles are white */;
867}
868.video-js .vjs-captions {
869 color: #ffcc66 /* Captions are yellow */;
870}
871.vjs-tt-cue {
872 display: block;
873}
874/* Hide disabled or unsupported controls */
875.vjs-default-skin .vjs-hidden {
876 display: none;
877}
878.vjs-lock-showing {
879 display: block !important;
880 opacity: 1;
881 visibility: visible;
882}
883/* In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
884 The .video-js classname on the video tag also isn't considered.
885 This optional paragraph inside the video tag can provide a message to users
886 about what's required to play video. */
887.vjs-no-js {
888 padding: 20px;
889 color: #ccc;
890 background-color: #333;
891 font-size: 18px;
892 font-family: Arial, sans-serif;
893 text-align: center;
894 width: 300px;
895 height: 150px;
896 margin: 0px auto;
897}
898.vjs-no-js a,
899.vjs-no-js a:visited {
900 color: #F4A460;
901}
902/* -----------------------------------------------------------------------------
903The original source of this file lives at
904https://github.com/videojs/video.js/blob/master/src/css/video-js.less */