extlib/video-js/video-js.css

   1 /*!
   2 Video.js Default Styles (http://videojs.com)
   3 Version 4.2.1
   4 Create your own skin at http://designer.videojs.com
   5 */
   6 /* SKIN
   7 ================================================================================
   8 The main class name for all skin-specific styles. To make your own skin,
   9 replace all occurances of 'vjs-default-skin' with a new name. Then add your new
  10 skin name to your video tag instead of the default skin.
  11 e.g. <video class="video-js my-skin-name">
  12 */
  13 .vjs-default-skin {
  14   color: #cccccc;
  15 }
  16 /* Custom Icon Font
  17 --------------------------------------------------------------------------------
  18 The 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 --------------------------------------------------------------------------------
  74 The 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 /* IE8 is flakey with fonts, and you have to change the actual content to force
 123 fonts to show/hide properly.
 124   - "\9" IE8 hack didn't work for this
 125   - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
 126 */
 127 @media \0screen {
 128   .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
 129     content: "";
 130   }
 131 }
 132 /* General styles for individual controls. */
 133 .vjs-default-skin .vjs-control {
 134   outline: none;
 135   position: relative;
 136   float: left;
 137   text-align: center;
 138   margin: 0;
 139   padding: 0;
 140   height: 3.0em;
 141   width: 4em;
 142 }
 143 /* FontAwsome button icons */
 144 .vjs-default-skin .vjs-control:before {
 145   font-family: VideoJS;
 146   font-size: 1.5em;
 147   line-height: 2;
 148   position: absolute;
 149   top: 0;
 150   left: 0;
 151   width: 100%;
 152   height: 100%;
 153   text-align: center;
 154   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 155 }
 156 /* Replacement for focus outline */
 157 .vjs-default-skin .vjs-control:focus:before,
 158 .vjs-default-skin .vjs-control:hover:before {
 159   text-shadow: 0em 0em 1em #ffffff;
 160 }
 161 .vjs-default-skin .vjs-control:focus {
 162   /*  outline: 0; */
 163   /* keyboard-only users cannot see the focus on several of the UI elements when
 164   this is set to 0 */
 165
 166 }
 167 /* Hide control text visually, but have it available for screenreaders */
 168 .vjs-default-skin .vjs-control-text {
 169   /* hide-visually */
 170   border: 0;
 171   clip: rect(0 0 0 0);
 172   height: 1px;
 173   margin: -1px;
 174   overflow: hidden;
 175   padding: 0;
 176   position: absolute;
 177   width: 1px;
 178 }
 179 /* Play/Pause
 180 --------------------------------------------------------------------------------
 181 */
 182 .vjs-default-skin .vjs-play-control {
 183   width: 5em;
 184   cursor: pointer;
 185 }
 186 .vjs-default-skin .vjs-play-control:before {
 187   content: "\e001";
 188 }
 189 .vjs-default-skin.vjs-playing .vjs-play-control:before {
 190   content: "\e002";
 191 }
 192 /* Volume/Mute
 193 -------------------------------------------------------------------------------- */
 194 .vjs-default-skin .vjs-mute-control,
 195 .vjs-default-skin .vjs-volume-menu-button {
 196   cursor: pointer;
 197   float: right;
 198 }
 199 .vjs-default-skin .vjs-mute-control:before,
 200 .vjs-default-skin .vjs-volume-menu-button:before {
 201   content: "\e006";
 202 }
 203 .vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
 204 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
 205   content: "\e003";
 206 }
 207 .vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
 208 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
 209   content: "\e004";
 210 }
 211 .vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
 212 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
 213   content: "\e005";
 214 }
 215 .vjs-default-skin .vjs-volume-control {
 216   width: 5em;
 217   float: right;
 218 }
 219 .vjs-default-skin .vjs-volume-bar {
 220   width: 5em;
 221   height: 0.6em;
 222   margin: 1.1em auto 0;
 223 }
 224 .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
 225   height: 2.9em;
 226 }
 227 .vjs-default-skin .vjs-volume-level {
 228   position: absolute;
 229   top: 0;
 230   left: 0;
 231   height: 0.5em;
 232   background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
 233 }
 234 .vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
 235   width: 0.5em;
 236   height: 0.5em;
 237 }
 238 .vjs-default-skin .vjs-volume-handle:before {
 239   font-size: 0.9em;
 240   top: -0.2em;
 241   left: -0.2em;
 242   width: 1em;
 243   height: 1em;
 244 }
 245 .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
 246   width: 6em;
 247   left: -4em;
 248 }
 249 /* Progress
 250 --------------------------------------------------------------------------------
 251 */
 252 .vjs-default-skin .vjs-progress-control {
 253   position: absolute;
 254   left: 0;
 255   right: 0;
 256   width: auto;
 257   font-size: 0.3em;
 258   height: 1em;
 259   /* Set above the rest of the controls. */
 260   top: -1em;
 261   /* Shrink the bar slower than it grows. */
 262   /* transition */
 263   -webkit-transition: all 0.4s;
 264   -moz-transition: all 0.4s;
 265   -o-transition: all 0.4s;
 266   transition: all 0.4s;
 267 }
 268 /* On hover, make the progress bar grow to something that's more clickable.
 269     This simply changes the overall font for the progress bar, and this
 270     updates both the em-based widths and heights, as wells as the icon font */
 271 .vjs-default-skin:hover .vjs-progress-control {
 272   font-size: .9em;
 273   /* Even though we're not changing the top/height, we need to include them in
 274       the transition so they're handled correctly. */
 275
 276   /* transition */
 277   -webkit-transition: all 0.2s;
 278   -moz-transition: all 0.2s;
 279   -o-transition: all 0.2s;
 280   transition: all 0.2s;
 281 }
 282 /* Box containing play and load progresses. Also acts as seek scrubber. */
 283 .vjs-default-skin .vjs-progress-holder {
 284   height: 100%;
 285 }
 286 /* Progress Bars */
 287 .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
 288 .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
 289   position: absolute;
 290   display: block;
 291   height: 100%;
 292   margin: 0;
 293   padding: 0;
 294   /* Needed for IE6 */
 295   left: 0;
 296   top: 0;
 297 }
 298 .vjs-default-skin .vjs-play-progress {
 299   /*
 300     Using a data URI to create the white diagonal lines with a transparent
 301       background. Surprisingly works in IE8.
 302       Created using http://www.patternify.com
 303     Changing the first color value will change the bar color.
 304     Also using a paralax effect to make the lines move backwards.
 305       The -50% left position makes that happen.
 306   */
 307
 308   background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
 309 }
 310 .vjs-default-skin .vjs-load-progress {
 311   background: #646464 /* IE8- Fallback */;
 312   background: rgba(255, 255, 255, 0.4);
 313 }
 314 .vjs-default-skin .vjs-seek-handle {
 315   width: 1.5em;
 316   height: 100%;
 317 }
 318 .vjs-default-skin .vjs-seek-handle:before {
 319   padding-top: 0.1em /* Minor adjustment */;
 320 }
 321 /* Time Display
 322 --------------------------------------------------------------------------------
 323 */
 324 .vjs-default-skin .vjs-time-controls {
 325   font-size: 1em;
 326   /* Align vertically by making the line height the same as the control bar */
 327   line-height: 3em;
 328 }
 329 .vjs-default-skin .vjs-current-time {
 330   float: left;
 331 }
 332 .vjs-default-skin .vjs-duration {
 333   float: left;
 334 }
 335 /* Remaining time is in the HTML, but not included in default design */
 336 .vjs-default-skin .vjs-remaining-time {
 337   display: none;
 338   float: left;
 339 }
 340 .vjs-time-divider {
 341   float: left;
 342   line-height: 3em;
 343 }
 344 /* Fullscreen
 345 --------------------------------------------------------------------------------
 346 */
 347 .vjs-default-skin .vjs-fullscreen-control {
 348   width: 3.8em;
 349   cursor: pointer;
 350   float: right;
 351 }
 352 .vjs-default-skin .vjs-fullscreen-control:before {
 353   content: "\e000";
 354 }
 355 /* Switch to the exit icon when the player is in fullscreen */
 356 .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
 357   content: "\e00b";
 358 }
 359 /* Big Play Button (play button at start)
 360 --------------------------------------------------------------------------------
 361 Positioning of the play button in the center or other corners can be done more
 362 easily in the skin designer. http://designer.videojs.com/
 363 */
 364 .vjs-default-skin .vjs-big-play-button {
 365   left: 0.5em;
 366   top: 0.5em;
 367   font-size: 3em;
 368   display: block;
 369   z-index: 2;
 370   position: absolute;
 371   width: 4em;
 372   height: 2.6em;
 373   text-align: center;
 374   vertical-align: middle;
 375   cursor: pointer;
 376   opacity: 1;
 377   /* Need a slightly gray bg so it can be seen on black backgrounds */
 378   /* background-color-with-alpha */
 379   background-color: #07141e;
 380   background-color: rgba(7, 20, 30, 0.7);
 381   border: 0.1em solid #3b4249;
 382   /* border-radius */
 383   -webkit-border-radius: 0.8em;
 384   -moz-border-radius: 0.8em;
 385   border-radius: 0.8em;
 386   /* box-shadow */
 387   -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
 388   -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
 389   box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
 390   /* transition */
 391   -webkit-transition: all 0.4s;
 392   -moz-transition: all 0.4s;
 393   -o-transition: all 0.4s;
 394   transition: all 0.4s;
 395 }
 396 /* Hide if controls are disabled */
 397 .vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
 398   display: none;
 399 }
 400 /* Hide when video starts playing */
 401 .vjs-default-skin.vjs-has-started .vjs-big-play-button {
 402   display: none;
 403 }
 404 /* Hide on mobile devices. Remove when we stop using native controls
 405     by default on mobile  */
 406 .vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
 407   display: none;
 408 }
 409 .vjs-default-skin:hover .vjs-big-play-button,
 410 .vjs-default-skin .vjs-big-play-button:focus {
 411   outline: 0;
 412   border-color: #fff;
 413   /* IE8 needs a non-glow hover state */
 414   background-color: #505050;
 415   background-color: rgba(50, 50, 50, 0.75);
 416   /* box-shadow */
 417   -webkit-box-shadow: 0 0 3em #ffffff;
 418   -moz-box-shadow: 0 0 3em #ffffff;
 419   box-shadow: 0 0 3em #ffffff;
 420   /* transition */
 421   -webkit-transition: all 0s;
 422   -moz-transition: all 0s;
 423   -o-transition: all 0s;
 424   transition: all 0s;
 425 }
 426 .vjs-default-skin .vjs-big-play-button:before {
 427   content: "\e001";
 428   font-family: VideoJS;
 429   /* In order to center the play icon vertically we need to set the line height
 430      to the same as the button height */
 431
 432   line-height: 2.6em;
 433   text-shadow: 0.05em 0.05em 0.1em #000;
 434   text-align: center /* Needed for IE8 */;
 435   position: absolute;
 436   left: 0;
 437   width: 100%;
 438   height: 100%;
 439 }
 440 /* Loading Spinner
 441 --------------------------------------------------------------------------------
 442 */
 443 .vjs-loading-spinner {
 444   display: none;
 445   position: absolute;
 446   top: 50%;
 447   left: 50%;
 448   font-size: 5em;
 449   line-height: 1;
 450   width: 1em;
 451   height: 1em;
 452   margin-left: -0.5em;
 453   margin-top: -0.5em;
 454   opacity: 0.75;
 455   /* animation */
 456   -webkit-animation: spin 1.5s infinite linear;
 457   -moz-animation: spin 1.5s infinite linear;
 458   -o-animation: spin 1.5s infinite linear;
 459   animation: spin 1.5s infinite linear;
 460 }
 461 .vjs-default-skin .vjs-loading-spinner:before {
 462   content: "\e00a";
 463   font-family: VideoJS;
 464   position: absolute;
 465   top: 0;
 466   left: 0;
 467   width: 1em;
 468   height: 1em;
 469   text-align: center;
 470   text-shadow: 0em 0em 0.1em #000;
 471 }
 472 @-moz-keyframes spin {
 473   0% {
 474     -moz-transform: rotate(0deg);
 475   }
 476   100% {
 477     -moz-transform: rotate(359deg);
 478   }
 479 }
 480 @-webkit-keyframes spin {
 481   0% {
 482     -webkit-transform: rotate(0deg);
 483   }
 484   100% {
 485     -webkit-transform: rotate(359deg);
 486   }
 487 }
 488 @-o-keyframes spin {
 489   0% {
 490     -o-transform: rotate(0deg);
 491   }
 492   100% {
 493     -o-transform: rotate(359deg);
 494   }
 495 }
 496 @keyframes spin {
 497   0% {
 498     transform: rotate(0deg);
 499   }
 500   100% {
 501     transform: rotate(359deg);
 502   }
 503 }
 504 /* Menu Buttons (Captions/Subtitles/etc.)
 505 --------------------------------------------------------------------------------
 506 */
 507 .vjs-default-skin .vjs-menu-button {
 508   float: right;
 509   cursor: pointer;
 510 }
 511 .vjs-default-skin .vjs-menu {
 512   display: none;
 513   position: absolute;
 514   bottom: 0;
 515   left: 0em;
 516   /* (Width of vjs-menu - width of button) / 2 */
 517
 518   width: 0em;
 519   height: 0em;
 520   margin-bottom: 3em;
 521   border-left: 2em solid transparent;
 522   border-right: 2em solid transparent;
 523   border-top: 1.55em solid #000000;
 524   /* Same width top as ul bottom */
 525
 526   border-top-color: rgba(7, 40, 50, 0.5);
 527   /* Same as ul background */
 528
 529 }
 530 /* Button Pop-up Menu */
 531 .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
 532   display: block;
 533   padding: 0;
 534   margin: 0;
 535   position: absolute;
 536   width: 10em;
 537   bottom: 1.5em;
 538   /* Same bottom as vjs-menu border-top */
 539
 540   max-height: 15em;
 541   overflow: auto;
 542   left: -5em;
 543   /* Width of menu - width of button / 2 */
 544
 545   /* background-color-with-alpha */
 546   background-color: #07141e;
 547   background-color: rgba(7, 20, 30, 0.7);
 548   /* box-shadow */
 549   -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
 550   -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
 551   box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
 552 }
 553 .vjs-default-skin .vjs-menu-button:hover .vjs-menu {
 554   display: block;
 555 }
 556 .vjs-default-skin .vjs-menu-button ul li {
 557   list-style: none;
 558   margin: 0;
 559   padding: 0.3em 0 0.3em 0;
 560   line-height: 1.4em;
 561   font-size: 1.2em;
 562   text-align: center;
 563   text-transform: lowercase;
 564 }
 565 .vjs-default-skin .vjs-menu-button ul li.vjs-selected {
 566   background-color: #000;
 567 }
 568 .vjs-default-skin .vjs-menu-button ul li:focus,
 569 .vjs-default-skin .vjs-menu-button ul li:hover,
 570 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
 571 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
 572   outline: 0;
 573   color: #111;
 574   /* background-color-with-alpha */
 575   background-color: #ffffff;
 576   background-color: rgba(255, 255, 255, 0.75);
 577   /* box-shadow */
 578   -webkit-box-shadow: 0 0 1em #ffffff;
 579   -moz-box-shadow: 0 0 1em #ffffff;
 580   box-shadow: 0 0 1em #ffffff;
 581 }
 582 .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
 583   text-align: center;
 584   text-transform: uppercase;
 585   font-size: 1em;
 586   line-height: 2em;
 587   padding: 0;
 588   margin: 0 0 0.3em 0;
 589   font-weight: bold;
 590   cursor: default;
 591 }
 592 /* Subtitles Button */
 593 .vjs-default-skin .vjs-subtitles-button:before {
 594   content: "\e00c";
 595 }
 596 /* Captions Button */
 597 .vjs-default-skin .vjs-captions-button:before {
 598   content: "\e008";
 599 }
 600 /* Replacement for focus outline */
 601 .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
 602 .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
 603   /* box-shadow */
 604   -webkit-box-shadow: 0 0 1em #ffffff;
 605   -moz-box-shadow: 0 0 1em #ffffff;
 606   box-shadow: 0 0 1em #ffffff;
 607 }
 608 /*
 609 REQUIRED STYLES (be careful overriding)
 610 ================================================================================
 611 When loading the player, the video tag is replaced with a DIV,
 612 that will hold the video tag or object tag for other playback methods.
 613 The div contains the video playback element (Flash or HTML5) and controls,
 614 and sets the width and height of the video.
 615
 616 ** If you want to add some kind of border/padding (e.g. a frame), or special
 617 positioning, use another containing element. Otherwise you risk messing up
 618 control positioning and full window mode. **
 619 */
 620 .video-js {
 621   background-color: #000;
 622   position: relative;
 623   padding: 0;
 624   /* Start with 10px for base font size so other dimensions can be em based and
 625      easily calculable. */
 626
 627   font-size: 10px;
 628   /* Allow poster to be vertially aligned. */
 629
 630   vertical-align: middle;
 631   /*  display: table-cell; */
 632   /*This works in Safari but not Firefox.*/
 633
 634   /* Provide some basic defaults for fonts */
 635
 636   font-weight: normal;
 637   font-style: normal;
 638   /* Avoiding helvetica: issue #376 */
 639
 640   font-family: Arial, sans-serif;
 641   /* Turn off user selection (text highlighting) by default.
 642      The majority of player components will not be text blocks.
 643      Text areas will need to turn user selection back on. */
 644
 645   /* user-select */
 646   -webkit-user-select: none;
 647   -moz-user-select: none;
 648   -ms-user-select: none;
 649   user-select: none;
 650 }
 651 /* Playback technology elements expand to the width/height of the containing div
 652     <video> or <object> */
 653 .video-js .vjs-tech {
 654   position: absolute;
 655   top: 0;
 656   left: 0;
 657   width: 100%;
 658   height: 100%;
 659 }
 660 /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
 661    checking fullScreenEnabled. */
 662 .video-js:-moz-full-screen {
 663   position: absolute;
 664 }
 665 /* Fullscreen Styles */
 666 body.vjs-full-window {
 667   padding: 0;
 668   margin: 0;
 669   height: 100%;
 670   /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
 671   overflow-y: auto;
 672 }
 673 .video-js.vjs-fullscreen {
 674   position: fixed;
 675   overflow: hidden;
 676   z-index: 1000;
 677   left: 0;
 678   top: 0;
 679   bottom: 0;
 680   right: 0;
 681   width: 100% !important;
 682   height: 100% !important;
 683   /* IE6 full-window (underscore hack) */
 684   _position: absolute;
 685 }
 686 .video-js:-webkit-full-screen {
 687   width: 100% !important;
 688   height: 100% !important;
 689 }
 690 .video-js.vjs-fullscreen.vjs-user-inactive {
 691   cursor: none;
 692 }
 693 /* Poster Styles */
 694 .vjs-poster {
 695   background-repeat: no-repeat;
 696   background-position: 50% 50%;
 697   background-size: contain;
 698   cursor: pointer;
 699   height: 100%;
 700   margin: 0;
 701   padding: 0;
 702   position: relative;
 703   width: 100%;
 704 }
 705 .vjs-poster img {
 706   display: block;
 707   margin: 0 auto;
 708   max-height: 100%;
 709   padding: 0;
 710   width: 100%;
 711 }
 712 /* Hide the poster when native controls are used otherwise it covers them */
 713 .video-js.vjs-using-native-controls .vjs-poster {
 714   display: none;
 715 }
 716 /* Text Track Styles */
 717 /* Overall track holder for both captions and subtitles */
 718 .video-js .vjs-text-track-display {
 719   text-align: center;
 720   position: absolute;
 721   bottom: 4em;
 722   /* Leave padding on left and right */
 723   left: 1em;
 724   right: 1em;
 725 }
 726 /* Individual tracks */
 727 .video-js .vjs-text-track {
 728   display: none;
 729   font-size: 1.4em;
 730   text-align: center;
 731   margin-bottom: 0.1em;
 732   /* Transparent black background, or fallback to all black (oldIE) */
 733   /* background-color-with-alpha */
 734   background-color: #000000;
 735   background-color: rgba(0, 0, 0, 0.5);
 736 }
 737 .video-js .vjs-subtitles {
 738   color: #ffffff /* Subtitles are white */;
 739 }
 740 .video-js .vjs-captions {
 741   color: #ffcc66 /* Captions are yellow */;
 742 }
 743 .vjs-tt-cue {
 744   display: block;
 745 }
 746 /* Hide disabled or unsupported controls */
 747 .vjs-default-skin .vjs-hidden {
 748   display: none;
 749 }
 750 .vjs-lock-showing {
 751   display: block !important;
 752   opacity: 1;
 753   visibility: visible;
 754 }
 755 /* -----------------------------------------------------------------------------
 756 The original source of this file lives at
 757 https://github.com/videojs/video.js/blob/master/src/css/video-js.less */