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