@vidispine/vdt-videojs 21.4.0-pre.2 → 22.1.0-pre.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +4 -4
  2. package/deprecated-app/README.md +21 -0
  3. package/{demo.html → deprecated-app/index.html} +1 -1
  4. package/{demo.js → deprecated-app/index.js} +69 -41
  5. package/{samples → deprecated-app/samples}/birds-es.vvt +0 -0
  6. package/{samples → deprecated-app/samples}/birds.vvt +0 -0
  7. package/{tests.js → deprecated-app/tests.js} +87 -54
  8. package/{lib/style.css → dist/index.css} +621 -6
  9. package/dist/index.es.js +2099 -0
  10. package/dist/index.js +2112 -0
  11. package/{lib → dist}/index.umd.js +910 -2039
  12. package/package.json +29 -85
  13. package/rollup.config.js +54 -0
  14. package/src/constants.js +1 -1
  15. package/src/externalControls.js +14 -18
  16. package/src/helpOverlay.js +12 -16
  17. package/src/helpers.js +3 -3
  18. package/src/index.js +3 -9
  19. package/src/index.stories.mdx +59 -0
  20. package/src/menu.api.stories.mdx +59 -0
  21. package/src/menu.js +23 -19
  22. package/src/{menu.example.md → menu.usage.stories.mdx} +31 -21
  23. package/src/osd.js +24 -18
  24. package/src/player.api.stories.mdx +120 -0
  25. package/src/player.js +157 -108
  26. package/src/player.scss +2 -0
  27. package/src/{player.example.md → player.usage.stories.mdx} +18 -8
  28. package/src/seekBar.js +85 -48
  29. package/src/timeCodeDisplay.js +39 -31
  30. package/src/videoTime.js +4 -4
  31. package/build.js +0 -233
  32. package/lib/index.cjs.js +0 -3241
  33. package/lib/index.esm.js +0 -3228
  34. package/lib/package.json +0 -13
  35. package/lib/src/constants.js +0 -51
  36. package/lib/src/externalControls.js +0 -307
  37. package/lib/src/helpOverlay.js +0 -106
  38. package/lib/src/helpers.js +0 -34
  39. package/lib/src/index.js +0 -13
  40. package/lib/src/menu.js +0 -365
  41. package/lib/src/osd.js +0 -91
  42. package/lib/src/player.js +0 -943
  43. package/lib/src/seekBar.js +0 -833
  44. package/lib/src/timeCodeDisplay.js +0 -253
  45. package/lib/src/videoTime.js +0 -66
  46. package/log.js +0 -24
  47. package/src/_index.stories.js +0 -24
  48. package/src/externalControls.stories.js +0 -6
  49. package/src/helpOverlay.stories.js +0 -6
  50. package/src/menu.classMethods.md +0 -47
  51. package/src/player.classMethods.md +0 -108
  52. package/src/player.stories.js +0 -14
  53. package/src/seekBar.stories.js +0 -8
  54. package/tmp/player.css +0 -1
@@ -1,4 +1,3 @@
1
- @charset "UTF-8";
2
1
  .vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
3
2
  position: absolute;
4
3
  top: 0;
@@ -497,7 +496,13 @@ body.vjs-full-window {
497
496
  border: 0.06666em solid #fff;
498
497
  background-color: #2B333F;
499
498
  background-color: rgba(43, 51, 63, 0.7);
499
+ -webkit-border-radius: 0.3em;
500
+ -moz-border-radius: 0.3em;
500
501
  border-radius: 0.3em;
502
+ -webkit-transition: all 0.4s;
503
+ -moz-transition: all 0.4s;
504
+ -ms-transition: all 0.4s;
505
+ -o-transition: all 0.4s;
501
506
  transition: all 0.4s;
502
507
  }
503
508
  .vjs-big-play-centered .vjs-big-play-button {
@@ -512,6 +517,10 @@ body.vjs-full-window {
512
517
  border-color: #fff;
513
518
  background-color: #73859f;
514
519
  background-color: rgba(115, 133, 159, 0.5);
520
+ -webkit-transition: all 0s;
521
+ -moz-transition: all 0s;
522
+ -ms-transition: all 0s;
523
+ -o-transition: all 0s;
515
524
  transition: all 0s;
516
525
  }
517
526
 
@@ -556,6 +565,7 @@ body.vjs-full-window {
556
565
  }
557
566
  .video-js .vjs-modal-dialog {
558
567
  background: rgba(0, 0, 0, 0.8);
568
+ background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
559
569
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
560
570
  overflow: auto;
561
571
  }
@@ -685,6 +695,10 @@ body.vjs-full-window {
685
695
  }
686
696
 
687
697
  .video-js .vjs-menu-button-inline {
698
+ -webkit-transition: all 0.4s;
699
+ -moz-transition: all 0.4s;
700
+ -ms-transition: all 0.4s;
701
+ -o-transition: all 0.4s;
688
702
  transition: all 0.4s;
689
703
  overflow: hidden;
690
704
  }
@@ -709,6 +723,10 @@ body.vjs-full-window {
709
723
  top: 0;
710
724
  padding: 0;
711
725
  margin: 0;
726
+ -webkit-transition: all 0.4s;
727
+ -moz-transition: all 0.4s;
728
+ -ms-transition: all 0.4s;
729
+ -o-transition: all 0.4s;
712
730
  transition: all 0.4s;
713
731
  }
714
732
 
@@ -752,9 +770,16 @@ body.vjs-full-window {
752
770
  }
753
771
 
754
772
  .vjs-has-started .vjs-control-bar {
773
+ display: -webkit-box;
774
+ display: -webkit-flex;
775
+ display: -ms-flexbox;
755
776
  display: flex;
756
777
  visibility: visible;
757
778
  opacity: 1;
779
+ -webkit-transition: visibility 0.1s, opacity 0.1s;
780
+ -moz-transition: visibility 0.1s, opacity 0.1s;
781
+ -ms-transition: visibility 0.1s, opacity 0.1s;
782
+ -o-transition: visibility 0.1s, opacity 0.1s;
758
783
  transition: visibility 0.1s, opacity 0.1s;
759
784
  }
760
785
 
@@ -762,6 +787,10 @@ body.vjs-full-window {
762
787
  visibility: visible;
763
788
  opacity: 0;
764
789
  pointer-events: none;
790
+ -webkit-transition: visibility 1s, opacity 1s;
791
+ -moz-transition: visibility 1s, opacity 1s;
792
+ -ms-transition: visibility 1s, opacity 1s;
793
+ -o-transition: visibility 1s, opacity 1s;
765
794
  transition: visibility 1s, opacity 1s;
766
795
  }
767
796
 
@@ -787,6 +816,10 @@ body.vjs-full-window {
787
816
  padding: 0;
788
817
  height: 100%;
789
818
  width: 4em;
819
+ -webkit-box-flex: none;
820
+ -moz-box-flex: none;
821
+ -webkit-flex: none;
822
+ -ms-flex: none;
790
823
  flex: none;
791
824
  }
792
825
 
@@ -826,8 +859,18 @@ body.vjs-full-window {
826
859
 
827
860
  .video-js .vjs-progress-control {
828
861
  cursor: pointer;
862
+ -webkit-box-flex: auto;
863
+ -moz-box-flex: auto;
864
+ -webkit-flex: auto;
865
+ -ms-flex: auto;
829
866
  flex: auto;
867
+ display: -webkit-box;
868
+ display: -webkit-flex;
869
+ display: -ms-flexbox;
830
870
  display: flex;
871
+ -webkit-box-align: center;
872
+ -webkit-align-items: center;
873
+ -ms-flex-align: center;
831
874
  align-items: center;
832
875
  min-width: 4em;
833
876
  touch-action: none;
@@ -842,7 +885,13 @@ body.vjs-full-window {
842
885
  }
843
886
 
844
887
  .vjs-liveui .vjs-progress-control {
888
+ display: -webkit-box;
889
+ display: -webkit-flex;
890
+ display: -ms-flexbox;
845
891
  display: flex;
892
+ -webkit-box-align: center;
893
+ -webkit-align-items: center;
894
+ -ms-flex-align: center;
846
895
  align-items: center;
847
896
  }
848
897
 
@@ -851,7 +900,15 @@ body.vjs-full-window {
851
900
  }
852
901
 
853
902
  .video-js .vjs-progress-holder {
903
+ -webkit-box-flex: auto;
904
+ -moz-box-flex: auto;
905
+ -webkit-flex: auto;
906
+ -ms-flex: auto;
854
907
  flex: auto;
908
+ -webkit-transition: all 0.2s;
909
+ -moz-transition: all 0.2s;
910
+ -ms-transition: all 0.2s;
911
+ -o-transition: all 0.2s;
855
912
  transition: all 0.2s;
856
913
  height: 0.3em;
857
914
  }
@@ -901,6 +958,8 @@ body.vjs-full-window {
901
958
  .video-js .vjs-time-tooltip {
902
959
  background-color: #fff;
903
960
  background-color: rgba(255, 255, 255, 0.8);
961
+ -webkit-border-radius: 0.3em;
962
+ -moz-border-radius: 0.3em;
904
963
  border-radius: 0.3em;
905
964
  color: #000;
906
965
  float: right;
@@ -949,6 +1008,10 @@ body.vjs-full-window {
949
1008
  .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
950
1009
  visibility: hidden;
951
1010
  opacity: 0;
1011
+ -webkit-transition: visibility 1s, opacity 1s;
1012
+ -moz-transition: visibility 1s, opacity 1s;
1013
+ -ms-transition: visibility 1s, opacity 1s;
1014
+ -o-transition: visibility 1s, opacity 1s;
952
1015
  transition: visibility 1s, opacity 1s;
953
1016
  }
954
1017
 
@@ -972,6 +1035,7 @@ body.vjs-full-window {
972
1035
  /* Safari */
973
1036
  -webkit-user-select: none;
974
1037
  /* Konqueror HTML */
1038
+ -khtml-user-select: none;
975
1039
  /* Firefox */
976
1040
  -moz-user-select: none;
977
1041
  /* Internet Explorer/Edge */
@@ -988,16 +1052,25 @@ body.vjs-full-window {
988
1052
 
989
1053
  .video-js .vjs-slider:focus {
990
1054
  text-shadow: 0em 0em 1em white;
1055
+ -webkit-box-shadow: 0 0 1em #fff;
1056
+ -moz-box-shadow: 0 0 1em #fff;
991
1057
  box-shadow: 0 0 1em #fff;
992
1058
  }
993
1059
 
994
1060
  .video-js .vjs-mute-control {
995
1061
  cursor: pointer;
1062
+ -webkit-box-flex: none;
1063
+ -moz-box-flex: none;
1064
+ -webkit-flex: none;
1065
+ -ms-flex: none;
996
1066
  flex: none;
997
1067
  }
998
1068
  .video-js .vjs-volume-control {
999
1069
  cursor: pointer;
1000
1070
  margin-right: 1em;
1071
+ display: -webkit-box;
1072
+ display: -webkit-flex;
1073
+ display: -ms-flexbox;
1001
1074
  display: flex;
1002
1075
  }
1003
1076
 
@@ -1014,12 +1087,20 @@ body.vjs-full-window {
1014
1087
  }
1015
1088
 
1016
1089
  .video-js .vjs-volume-panel {
1090
+ -webkit-transition: width 1s;
1091
+ -moz-transition: width 1s;
1092
+ -ms-transition: width 1s;
1093
+ -o-transition: width 1s;
1017
1094
  transition: width 1s;
1018
1095
  }
1019
1096
  .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
1020
1097
  visibility: visible;
1021
1098
  opacity: 1;
1022
1099
  position: relative;
1100
+ -webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
1101
+ -moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
1102
+ -ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
1103
+ -o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
1023
1104
  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
1024
1105
  }
1025
1106
  .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
@@ -1029,10 +1110,18 @@ body.vjs-full-window {
1029
1110
  }
1030
1111
  .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
1031
1112
  left: -3.5em;
1113
+ -webkit-transition: left 0s;
1114
+ -moz-transition: left 0s;
1115
+ -ms-transition: left 0s;
1116
+ -o-transition: left 0s;
1032
1117
  transition: left 0s;
1033
1118
  }
1034
1119
  .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
1035
1120
  width: 10em;
1121
+ -webkit-transition: width 0.1s;
1122
+ -moz-transition: width 0.1s;
1123
+ -ms-transition: width 0.1s;
1124
+ -o-transition: width 0.1s;
1036
1125
  transition: width 0.1s;
1037
1126
  }
1038
1127
  .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
@@ -1043,10 +1132,18 @@ body.vjs-full-window {
1043
1132
  height: 8em;
1044
1133
  width: 3em;
1045
1134
  left: -3000em;
1135
+ -webkit-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
1136
+ -moz-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
1137
+ -ms-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
1138
+ -o-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
1046
1139
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
1047
1140
  }
1048
1141
 
1049
1142
  .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1143
+ -webkit-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
1144
+ -moz-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
1145
+ -ms-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
1146
+ -o-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
1050
1147
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
1051
1148
  }
1052
1149
 
@@ -1056,6 +1153,10 @@ body.vjs-full-window {
1056
1153
  visibility: visible;
1057
1154
  opacity: 1;
1058
1155
  position: relative;
1156
+ -webkit-transition: none;
1157
+ -moz-transition: none;
1158
+ -ms-transition: none;
1159
+ -o-transition: none;
1059
1160
  transition: none;
1060
1161
  }
1061
1162
 
@@ -1067,6 +1168,9 @@ body.vjs-full-window {
1067
1168
  }
1068
1169
 
1069
1170
  .video-js .vjs-volume-panel {
1171
+ display: -webkit-box;
1172
+ display: -webkit-flex;
1173
+ display: -ms-flexbox;
1070
1174
  display: flex;
1071
1175
  }
1072
1176
 
@@ -1141,6 +1245,8 @@ body.vjs-full-window {
1141
1245
  .video-js .vjs-volume-tooltip {
1142
1246
  background-color: #fff;
1143
1247
  background-color: rgba(255, 255, 255, 0.8);
1248
+ -webkit-border-radius: 0.3em;
1249
+ -moz-border-radius: 0.3em;
1144
1250
  border-radius: 0.3em;
1145
1251
  color: #000;
1146
1252
  float: right;
@@ -1196,6 +1302,10 @@ body.vjs-full-window {
1196
1302
  .video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
1197
1303
  visibility: hidden;
1198
1304
  opacity: 0;
1305
+ -webkit-transition: visibility 1s, opacity 1s;
1306
+ -moz-transition: visibility 1s, opacity 1s;
1307
+ -ms-transition: visibility 1s, opacity 1s;
1308
+ -o-transition: visibility 1s, opacity 1s;
1199
1309
  transition: visibility 1s, opacity 1s;
1200
1310
  }
1201
1311
 
@@ -1240,8 +1350,18 @@ body.vjs-full-window {
1240
1350
  }
1241
1351
 
1242
1352
  .video-js .vjs-live-control {
1353
+ display: -webkit-box;
1354
+ display: -webkit-flex;
1355
+ display: -ms-flexbox;
1243
1356
  display: flex;
1357
+ -webkit-box-align: flex-start;
1358
+ -webkit-align-items: flex-start;
1359
+ -ms-flex-align: flex-start;
1244
1360
  align-items: flex-start;
1361
+ -webkit-box-flex: auto;
1362
+ -moz-box-flex: auto;
1363
+ -webkit-flex: auto;
1364
+ -ms-flex: auto;
1245
1365
  flex: auto;
1246
1366
  font-size: 1em;
1247
1367
  line-height: 3em;
@@ -1261,6 +1381,10 @@ body.vjs-full-window {
1261
1381
  .video-js .vjs-seek-to-live-control {
1262
1382
  align-items: center;
1263
1383
  cursor: pointer;
1384
+ -webkit-box-flex: none;
1385
+ -moz-box-flex: none;
1386
+ -webkit-flex: none;
1387
+ -ms-flex: none;
1264
1388
  flex: none;
1265
1389
  display: inline-flex;
1266
1390
  height: 100%;
@@ -1297,6 +1421,10 @@ body.vjs-full-window {
1297
1421
  }
1298
1422
 
1299
1423
  .video-js .vjs-time-control {
1424
+ -webkit-box-flex: none;
1425
+ -moz-box-flex: none;
1426
+ -webkit-flex: none;
1427
+ -ms-flex: none;
1300
1428
  flex: none;
1301
1429
  font-size: 1em;
1302
1430
  line-height: 3em;
@@ -1334,6 +1462,10 @@ body.vjs-full-window {
1334
1462
  }
1335
1463
 
1336
1464
  .video-js .vjs-play-control .vjs-icon-placeholder {
1465
+ -webkit-box-flex: none;
1466
+ -moz-box-flex: none;
1467
+ -webkit-flex: none;
1468
+ -ms-flex: none;
1337
1469
  flex: none;
1338
1470
  }
1339
1471
 
@@ -1369,19 +1501,35 @@ body.vjs-full-window {
1369
1501
  }
1370
1502
 
1371
1503
  video::-webkit-media-text-track-display {
1504
+ -moz-transform: translateY(-3em);
1505
+ -ms-transform: translateY(-3em);
1506
+ -o-transform: translateY(-3em);
1507
+ -webkit-transform: translateY(-3em);
1372
1508
  transform: translateY(-3em);
1373
1509
  }
1374
1510
 
1375
1511
  .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
1512
+ -moz-transform: translateY(-1.5em);
1513
+ -ms-transform: translateY(-1.5em);
1514
+ -o-transform: translateY(-1.5em);
1515
+ -webkit-transform: translateY(-1.5em);
1376
1516
  transform: translateY(-1.5em);
1377
1517
  }
1378
1518
 
1379
1519
  .video-js .vjs-picture-in-picture-control {
1380
1520
  cursor: pointer;
1521
+ -webkit-box-flex: none;
1522
+ -moz-box-flex: none;
1523
+ -webkit-flex: none;
1524
+ -ms-flex: none;
1381
1525
  flex: none;
1382
1526
  }
1383
1527
  .video-js .vjs-fullscreen-control {
1384
1528
  cursor: pointer;
1529
+ -webkit-box-flex: none;
1530
+ -moz-box-flex: none;
1531
+ -webkit-flex: none;
1532
+ -ms-flex: none;
1385
1533
  flex: none;
1386
1534
  }
1387
1535
  .vjs-playback-rate > .vjs-menu-button,
@@ -1446,8 +1594,7 @@ video::-webkit-media-text-track-display {
1446
1594
  .vjs-seeking .vjs-loading-spinner,
1447
1595
  .vjs-waiting .vjs-loading-spinner {
1448
1596
  display: block;
1449
- -webkit-animation: vjs-spinner-show 0s linear 0.3s forwards;
1450
- animation: vjs-spinner-show 0s linear 0.3s forwards;
1597
+ animation: vjs-spinner-show 0s linear 0.3s forwards;
1451
1598
  }
1452
1599
 
1453
1600
  .vjs-loading-spinner:before,
@@ -1551,7 +1698,7 @@ video::-webkit-media-text-track-display {
1551
1698
 
1552
1699
  .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
1553
1700
  font-family: VideoJS;
1554
- content: "";
1701
+ content: "\f10d";
1555
1702
  font-size: 1.5em;
1556
1703
  line-height: inherit;
1557
1704
  }
@@ -1564,7 +1711,7 @@ video::-webkit-media-text-track-display {
1564
1711
 
1565
1712
  .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
1566
1713
  font-family: VideoJS;
1567
- content: " ";
1714
+ content: " \f11d";
1568
1715
  font-size: 1.5em;
1569
1716
  line-height: inherit;
1570
1717
  }
@@ -1610,6 +1757,10 @@ video::-webkit-media-text-track-display {
1610
1757
  display: none;
1611
1758
  }
1612
1759
  .video-js.vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer, .video-js.vjs-layout-tiny .vjs-custom-control-spacer {
1760
+ -webkit-box-flex: auto;
1761
+ -moz-box-flex: auto;
1762
+ -webkit-flex: auto;
1763
+ -ms-flex: auto;
1613
1764
  flex: auto;
1614
1765
  display: block;
1615
1766
  }
@@ -1746,4 +1897,468 @@ video::-webkit-media-text-track-display {
1746
1897
  .video-js *:focus:not(:focus-visible) {
1747
1898
  outline: none;
1748
1899
  }
1749
- button,input,select,textarea,video{outline:none}.video-js .vjs-menu-item,button:focus{outline:initial}.video-js{max-width:100%;overflow:hidden}.video-js.init{height:0!important;display:none}.video-js video{transform:translateZ(0);-webkit-transform:translateZ(0);display:block}.video-js .vjs-poster{background-size:cover}.video-js .vjs-control-bar{height:50px;padding-top:6px;display:flex;background:-moz-linear-gradient(top,transparent 0,transparent 15%,rgba(0,0,0,.3) 100%);background:-webkit-linear-gradient(top,transparent,transparent 15%,rgba(0,0,0,.3));background:linear-gradient(180deg,transparent 0,transparent 15%,rgba(0,0,0,.3));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000",endColorstr="#4d000000",GradientType=0);transform:translateZ(0);-webkit-transform:translateZ(0);z-index:2}.video-js .vjs-control-bar .vdt-seekbar-wrapper{top:0;left:0;height:10px;width:100%;position:absolute;margin:0 auto}.video-js .vjs-big-play-button{font-size:90px;border:0;background-color:transparent;text-shadow:1px 2px 40px rgba(0,0,0,.4);z-index:2}.video-js .vjs-big-play-button .vjs-icon-placeholder:before{padding-top:5px}.video-js:hover .vjs-big-play-button,.video-js:hover .vjs-big-play-button:focus{background-color:transparent}.video-js .vjs-progress-control{top:0;left:0;position:absolute;display:block;width:100%;height:10px}.video-js .vjs-progress-control .vjs-load-progress{background:hsla(0,0%,100%,.2)}.video-js .vjs-progress-control .vjs-play-progress .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip{display:none}.video-js .vjs-time-control.duration,.video-js .vjs-time-control.vjs-duration{margin-right:auto}.video-js .vdt-screenshot-button .vjs-icon-placeholder,.video-js .vjs-subs-caps-button .vjs-icon-placeholder{opacity:.6}.video-js.has-vdt-menu .vjs-subs-caps-button{display:none}.video-js.subtitles-active .vjs-subs-caps-button .vjs-icon-placeholder{opacity:1}.video-js .vjs-control{font-size:14px}.video-js .vjs-play-progress.vjs-slider-bar{background-color:red}.video-js .vjs-current-time,.video-js .vjs-no-flex .vjs-current-time,.video-js .vjs-time-control{display:block}.video-js .vjs-time-control{font-size:14px;padding:0;min-width:14px;text-align:center}.video-js .vjs-volume-panel,.video-js .vjs-volume-panel .vjs-mute-control{width:3em}.video-js .vjs-menu-button-popup .vjs-menu{bottom:20px}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:rgba(28,28,28,.9);border-radius:7px}.video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:focus:not(.vjs-selected){background-color:transparent}.video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:hover:not(.vjs-selected){background-color:hsla(0,0%,100%,.2)}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item-text{color:#fff}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected .vjs-menu-item-text{color:#333}.video-js .vdt-player-osd{pointer-events:none;position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;z-index:4;-webkit-transform:translateZ(0) scale3d(.5,.5,.5);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0) scale3d(.5,.5,.5);transition:all .2s ease-out}.video-js .vdt-player-osd.active{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.video-js .vdt-player-osd table{width:100%;height:100%}.video-js .vdt-player-osd table td{vertical-align:middle;text-align:center}.video-js .vdt-player-osd table td .osd-feedback-icon:before{font-family:VideoJS;content:"\f101";font-size:50px;padding:15px;display:inline-block;height:80px;width:80px;text-align:center;background:rgba(0,0,0,.2);border-radius:100%}.video-js .vdt-player-osd table td .pause:before{content:"\f103"}.video-js .vdt-player-osd table td .volchange.high:before{content:"\f107"}.video-js .vdt-player-osd table td .volchange.mid:before{content:"\f106"}.video-js .vdt-player-osd table td .volchange.low:before{content:"\f105"}.video-js .vdt-player-osd table td .mute:before,.video-js .vdt-player-osd table td .volchange.null:before{content:"\f104"}.video-js .vdt-player-osd table td .unmute:before{content:"\f107"}.video-js .vdt-player-osd table td .backward-jump:before,.video-js .vdt-player-osd table td .forward-jump:before{content:"\f101\f101";letter-spacing:-38px;padding-left:0;padding-right:34px}.video-js .vdt-player-osd table td .backward-jump:before{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@keyframes vjs-spinner-fade{0%{border-top-color:hsla(0,0%,100%,.6)}35%{border-top-color:#fff}to{border-top-color:hsla(0,0%,100%,.6)}}.video-js .vjs-loading-spinner{margin:-40px 0 0 -40px;opacity:.85;border:5px solid hsla(0,0%,100%,.7);width:80px;height:80px;border-radius:100px;z-index:5}.video-js .vjs-loading-spinner:after,.video-js .vjs-loading-spinner:before{margin:-5px}.video-js .vjs-text-track-display,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:0;transition:transform .3s ease-out;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.video-js .vjs-text-track-display>div,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display>div{display:table;width:100%;height:100%;margin:0!important}.video-js .vjs-text-track-display .vjs-text-track-cue,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue{width:100%!important;bottom:0!important;top:auto!important;left:auto!important;right:auto!important;font-size:18px!important;height:auto!important;padding-bottom:1.5%;display:table-cell}.video-js .vjs-text-track-display .vjs-text-track-cue>div,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue>div{padding:2px 4px;line-height:1.25;border-radius:2px}.video-js.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue,.video-js.vjs-user-inactive.vjs-playing.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue{-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:24px!important}.video-js.vjs-controls-enabled.vjs-user-active .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen) .vjs-control-bar,.video-jsdiv .vjs-control-bar{opacity:1}.video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar,.video-js:not(.controls-below-player) .vjs-control-bar{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate3d(0,50px,0);transition:transform .3s ease-in-out}.video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player) .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player) .vjs-control-bar{transform:translateZ(0);-webkit-transform:translateZ(0)}.video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display{transform:translate3d(0,-50px,0)}.video-js .vdt-timecode{display:inline;font-family:"monospace",sans-serif;margin-left:20px}.video-js .vdt-timecode input,.video-js .vdt-timecode span{font-size:16px}.video-js .vdt-timecode span{text-align:center;display:inline-block}.video-js .vdt-timecode input{display:inline-block;width:auto;border:0;background:transparent;color:inherit;width:21px}@media (max-width:640px){.video-js .vdt-timecode{flex-grow:3}}.video-js .vdt-timecode.duration{margin-left:0;margin-right:auto}.video-js .vdt-timecode.duration span{cursor:default}.video-js .vdt-timecode.duration:before{content:"/";display:inline-block;margin:0 5px;font-size:16px}@media (max-width:640px){.video-js .vdt-timecode.duration{display:none}}.video-js .vdt-cinema-button,.video-js .vdt-screenshot-button,.video-js .vdt-settings-menu-button{cursor:pointer}.video-js .vdt-cinema-button:after,.video-js .vdt-screenshot-button:after,.video-js .vdt-settings-menu-button:after{content:"\f10b";font-family:VideoJS;font-size:22px}.video-js .vdt-cinema-button:active,.video-js .vdt-cinema-button:focus,.video-js .vdt-screenshot-button:active,.video-js .vdt-screenshot-button:focus,.video-js .vdt-settings-menu-button:active,.video-js .vdt-settings-menu-button:focus{opacity:.6}.video-js .vdt-cinema-button:after{content:"\f10a"}.video-js .vdt-settings-menu-button:after{content:"\f110"}.video-js .vdt-help-overlay,.video-js .vdt-waveform-visual{position:absolute;top:0;left:0;background:#888;height:100%;width:100%;display:none;background:#88bfe8;background:-moz-linear-gradient(top,#88bfe8 0,#71a1c4 100%);background:-webkit-linear-gradient(top,#88bfe8,#71a1c4);background:linear-gradient(180deg,#88bfe8 0,#71a1c4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#88bfe8",endColorstr="#71a1c4",GradientType=0)}.video-js .vdt-help-overlay canvas,.video-js .vdt-waveform-visual canvas{height:100%;width:100%}.video-js.vjs-has-started .vdt-waveform-visual{display:block}.video-js .vdt-help-overlay{font-size:15px;background:transparent;z-index:2;transition:opacity 1s ease-in-out;opacity:0;padding-bottom:12px}.video-js .vdt-help-overlay>table{height:100%;margin:0 auto}.video-js .vdt-help-overlay>table td.vdt-help-contents table{border-radius:7px;max-height:400px;-webkit-backdrop-filter:blur(10px);background:rgba(0,0,0,.6)}.video-js .vdt-help-overlay>table td.vdt-help-contents table td{padding:6px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(2),.video-js .vdt-help-overlay>table td.vdt-help-contents table td td:nth-child(4){padding:4px 9px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(2){padding-right:32px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:first-child div,.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(3) div{text-align:center;padding:3px;border:1px solid #fff;border-radius:2px;background:hsla(0,0%,100%,.1);font-size:13px;min-width:21px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:first-child{padding-left:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:last-child{padding-right:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table tr:first-child td{padding-top:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table tr:last-child td{padding-bottom:16px}.video-js .vdt-help-overlay>table td{vertical-align:middle}.video-js .vdt-help-overlay.active{display:block;opacity:1}.video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen .vjs-text-track-display,.video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:60px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled){overflow:visible;width:auto;height:auto;background-color:transparent;margin-bottom:70px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) video{position:relative}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar{transform:translate3d(0,60px,0);transition:all .3s ease-in-out;background:transparent}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text),.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vjs-button:not(.vjs-menu-item-text){color:#333}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text),.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vjs-button:not(.vjs-menu-item-text){color:#efefef}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-progress-holder{margin:0 auto}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-menu{bottom:35px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-poster{height:auto}.video-js .vjs-picture-in-picture-control,.video-js .vjs-play-progress .vjs-time-tooltip,.video-js .vjs-play-progress:before,.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltips,.video-js .vjs-remaining-time{display:none}
1900
+
1901
+ textarea, select, input, button, video {
1902
+ outline: none;
1903
+ }
1904
+
1905
+ button:focus, .video-js .vjs-menu-item {
1906
+ outline: initial;
1907
+ }
1908
+
1909
+ .video-js {
1910
+ max-width: 100%;
1911
+ overflow: hidden;
1912
+ }
1913
+ .video-js.init {
1914
+ height: 0px !important;
1915
+ display: none;
1916
+ }
1917
+ .video-js video {
1918
+ transform: translate3d(0px, 0px, 0px);
1919
+ -webkit-transform: translate3d(0px, 0px, 0px);
1920
+ display: block;
1921
+ }
1922
+ .video-js .vjs-poster {
1923
+ background-size: cover;
1924
+ }
1925
+ .video-js .vjs-control-bar {
1926
+ height: 50px;
1927
+ padding-top: 6px;
1928
+ display: flex;
1929
+ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+15,0.3+100 */
1930
+ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 100%);
1931
+ /* FF3.6-15 */
1932
+ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 100%);
1933
+ /* Chrome10-25,Safari5.1-6 */
1934
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 100%);
1935
+ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
1936
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#4d000000",GradientType=0 );
1937
+ /* IE6-9 */
1938
+ transform: translate3d(0px, 0px, 0px);
1939
+ -webkit-transform: translate3d(0px, 0px, 0px);
1940
+ z-index: 2;
1941
+ }
1942
+ .video-js .vjs-control-bar .vdt-seekbar-wrapper {
1943
+ top: 0px;
1944
+ left: 0px;
1945
+ height: 10px;
1946
+ width: 100%;
1947
+ position: absolute;
1948
+ margin: 0 auto;
1949
+ }
1950
+ .video-js .vjs-big-play-button {
1951
+ font-size: 90px;
1952
+ border: 0px;
1953
+ background-color: transparent;
1954
+ text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.4);
1955
+ z-index: 2;
1956
+ }
1957
+ .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
1958
+ padding-top: 5px;
1959
+ }
1960
+ .video-js:hover .vjs-big-play-button,
1961
+ .video-js:hover .vjs-big-play-button:focus {
1962
+ background-color: transparent;
1963
+ }
1964
+ .video-js .vjs-progress-control {
1965
+ top: 0px;
1966
+ left: 0px;
1967
+ position: absolute;
1968
+ display: block;
1969
+ width: 100%;
1970
+ height: 10px;
1971
+ }
1972
+ .video-js .vjs-progress-control .vjs-load-progress {
1973
+ background: rgba(255, 255, 255, 0.2);
1974
+ }
1975
+ .video-js .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip,
1976
+ .video-js .vjs-progress-control .vjs-play-progress .vjs-time-tooltip {
1977
+ display: none;
1978
+ }
1979
+ .video-js .vjs-time-control.duration, .video-js .vjs-time-control.vjs-duration {
1980
+ margin-right: auto;
1981
+ }
1982
+ .video-js .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vdt-screenshot-button .vjs-icon-placeholder {
1983
+ opacity: 0.6;
1984
+ }
1985
+ .video-js.has-vdt-menu .vjs-subs-caps-button {
1986
+ display: none;
1987
+ }
1988
+ .video-js.subtitles-active .vjs-subs-caps-button .vjs-icon-placeholder {
1989
+ opacity: 1;
1990
+ }
1991
+ .video-js .vjs-control {
1992
+ font-size: 14px;
1993
+ }
1994
+ .video-js .vjs-play-progress.vjs-slider-bar {
1995
+ background-color: #f00;
1996
+ }
1997
+ .video-js .vjs-current-time,
1998
+ .video-js .vjs-time-control,
1999
+ .video-js .vjs-no-flex .vjs-current-time {
2000
+ display: block;
2001
+ }
2002
+ .video-js .vjs-time-control {
2003
+ font-size: 14px;
2004
+ padding: 0px;
2005
+ min-width: 14px;
2006
+ text-align: center;
2007
+ }
2008
+ .video-js .vjs-volume-panel {
2009
+ width: 3em;
2010
+ }
2011
+ .video-js .vjs-volume-panel .vjs-mute-control {
2012
+ width: 3em;
2013
+ }
2014
+ .video-js .vjs-menu-button-popup .vjs-menu {
2015
+ bottom: 20px;
2016
+ }
2017
+ .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
2018
+ background-color: rgba(28, 28, 28, 0.9);
2019
+ border-radius: 7px;
2020
+ }
2021
+ .video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:focus:not(.vjs-selected) {
2022
+ background-color: transparent;
2023
+ }
2024
+ .video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:hover:not(.vjs-selected) {
2025
+ background-color: rgba(255, 255, 255, 0.2);
2026
+ }
2027
+ .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item-text {
2028
+ color: white;
2029
+ }
2030
+ .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected .vjs-menu-item-text {
2031
+ color: #333;
2032
+ }
2033
+ .video-js .vdt-player-osd {
2034
+ pointer-events: none;
2035
+ position: absolute;
2036
+ top: 0px;
2037
+ left: 0px;
2038
+ height: 100%;
2039
+ width: 100%;
2040
+ opacity: 0;
2041
+ z-index: 4;
2042
+ -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 0.5);
2043
+ -webkit-backface-visibility: hidden;
2044
+ backface-visibility: hidden;
2045
+ transform: translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 0.5);
2046
+ transition: 200ms ease-out all;
2047
+ }
2048
+ .video-js .vdt-player-osd.active {
2049
+ opacity: 1;
2050
+ -webkit-transform: scale3d(1, 1, 1);
2051
+ transform: scale3d(1, 1, 1);
2052
+ }
2053
+ .video-js .vdt-player-osd table {
2054
+ width: 100%;
2055
+ height: 100%;
2056
+ }
2057
+ .video-js .vdt-player-osd table td {
2058
+ vertical-align: middle;
2059
+ text-align: center;
2060
+ }
2061
+ .video-js .vdt-player-osd table td .osd-feedback-icon:before {
2062
+ font-family: VideoJS;
2063
+ content: "\f101";
2064
+ font-size: 50px;
2065
+ padding: 15px;
2066
+ display: inline-block;
2067
+ height: 80px;
2068
+ width: 80px;
2069
+ text-align: center;
2070
+ background: rgba(0, 0, 0, 0.2);
2071
+ border-radius: 100%;
2072
+ }
2073
+ .video-js .vdt-player-osd table td .pause:before {
2074
+ content: "\f103";
2075
+ }
2076
+ .video-js .vdt-player-osd table td .volchange.high:before {
2077
+ content: "\f107";
2078
+ }
2079
+ .video-js .vdt-player-osd table td .volchange.mid:before {
2080
+ content: "\f106";
2081
+ }
2082
+ .video-js .vdt-player-osd table td .volchange.low:before {
2083
+ content: "\f105";
2084
+ }
2085
+ .video-js .vdt-player-osd table td .mute:before, .video-js .vdt-player-osd table td .volchange.null:before {
2086
+ content: "\f104";
2087
+ }
2088
+ .video-js .vdt-player-osd table td .unmute:before {
2089
+ content: "\f107";
2090
+ }
2091
+ .video-js .vdt-player-osd table td .forward-jump:before, .video-js .vdt-player-osd table td .backward-jump:before {
2092
+ content: "\f101\f101";
2093
+ letter-spacing: -38px;
2094
+ padding-left: 0px;
2095
+ padding-right: 34px;
2096
+ }
2097
+ .video-js .vdt-player-osd table td .backward-jump:before {
2098
+ -webkit-transform: scaleX(-1);
2099
+ transform: scaleX(-1);
2100
+ }
2101
+ @keyframes vjs-spinner-fade {
2102
+ 0% {
2103
+ border-top-color: rgba(255, 255, 255, 0.6);
2104
+ }
2105
+ 35% {
2106
+ border-top-color: white;
2107
+ }
2108
+ 100% {
2109
+ border-top-color: rgba(255, 255, 255, 0.6);
2110
+ }
2111
+ }
2112
+ .video-js .vjs-loading-spinner {
2113
+ margin: -40px 0 0 -40px;
2114
+ opacity: 0.85;
2115
+ border: 5px solid rgba(255, 255, 255, 0.7);
2116
+ width: 80px;
2117
+ height: 80px;
2118
+ border-radius: 100px;
2119
+ z-index: 5;
2120
+ }
2121
+ .video-js .vjs-loading-spinner:after, .video-js .vjs-loading-spinner:before {
2122
+ margin: -5px;
2123
+ }
2124
+ .video-js .vjs-text-track-display, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
2125
+ bottom: 0px;
2126
+ transition: transform 300ms ease-out;
2127
+ -webkit-transform: translate3d(0px, 0px, 0px);
2128
+ -webkit-backface-visibility: hidden;
2129
+ backface-visibility: hidden;
2130
+ }
2131
+ .video-js .vjs-text-track-display > div, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display > div {
2132
+ display: table;
2133
+ width: 100%;
2134
+ height: 100%;
2135
+ margin: 0px !important;
2136
+ }
2137
+ .video-js .vjs-text-track-display .vjs-text-track-cue, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue {
2138
+ width: 100% !important;
2139
+ bottom: 0px !important;
2140
+ top: initial !important;
2141
+ left: initial !important;
2142
+ right: initial !important;
2143
+ font-size: 18px !important;
2144
+ height: auto !important;
2145
+ padding-bottom: 1.5%;
2146
+ display: table-cell;
2147
+ }
2148
+ .video-js .vjs-text-track-display .vjs-text-track-cue > div, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue > div {
2149
+ padding: 2px 4px 2px 4px;
2150
+ line-height: 1.25;
2151
+ border-radius: 2px;
2152
+ }
2153
+ .video-js.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue, .video-js.vjs-user-inactive.vjs-playing.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue {
2154
+ -webkit-backface-visibility: hidden;
2155
+ backface-visibility: hidden;
2156
+ font-size: 24px !important;
2157
+ }
2158
+ .video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen) .vjs-control-bar, .video-jsdiv .vjs-control-bar, .video-js.vjs-controls-enabled.vjs-user-active .vjs-control-bar, .video-js.vjs-has-started.vjs-user-inactive.vjs-paused .vjs-control-bar {
2159
+ opacity: 1;
2160
+ }
2161
+ .video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar, .video-js:not(.controls-below-player) .vjs-control-bar {
2162
+ -webkit-backface-visibility: hidden;
2163
+ backface-visibility: hidden;
2164
+ transform: translate3d(0px, 50px, 0px);
2165
+ transition: transform 300ms ease-in-out;
2166
+ }
2167
+ .video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player) .vjs-control-bar, .video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player) .vjs-control-bar {
2168
+ transform: translate3d(0px, 0px, 0px);
2169
+ -webkit-transform: translate3d(0px, 0px, 0px);
2170
+ }
2171
+ .video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display, .video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display {
2172
+ transform: translate3d(0px, -50px, 0px);
2173
+ }
2174
+ .video-js .vdt-timecode {
2175
+ display: inline;
2176
+ font-family: "monospace", sans-serif;
2177
+ margin-left: 20px;
2178
+ }
2179
+ .video-js .vdt-timecode input, .video-js .vdt-timecode span {
2180
+ font-size: 16px;
2181
+ }
2182
+ .video-js .vdt-timecode span {
2183
+ text-align: center;
2184
+ display: inline-block;
2185
+ }
2186
+ .video-js .vdt-timecode input {
2187
+ display: inline-block;
2188
+ width: auto;
2189
+ border: 0px;
2190
+ background: transparent;
2191
+ color: inherit;
2192
+ width: 21px;
2193
+ }
2194
+ @media all and (max-width: 640px) {
2195
+ .video-js .vdt-timecode {
2196
+ flex-grow: 3;
2197
+ }
2198
+ }
2199
+ .video-js .vdt-timecode.duration {
2200
+ margin-left: 0px;
2201
+ margin-right: auto;
2202
+ }
2203
+ .video-js .vdt-timecode.duration span {
2204
+ cursor: default;
2205
+ }
2206
+ .video-js .vdt-timecode.duration:before {
2207
+ content: "/";
2208
+ display: inline-block;
2209
+ margin: 0px 5px;
2210
+ font-size: 16px;
2211
+ }
2212
+ @media all and (max-width: 640px) {
2213
+ .video-js .vdt-timecode.duration {
2214
+ display: none;
2215
+ }
2216
+ }
2217
+ .video-js .vdt-cinema-button,
2218
+ .video-js .vdt-settings-menu-button,
2219
+ .video-js .vdt-screenshot-button {
2220
+ cursor: pointer;
2221
+ }
2222
+ .video-js .vdt-cinema-button:after,
2223
+ .video-js .vdt-settings-menu-button:after,
2224
+ .video-js .vdt-screenshot-button:after {
2225
+ content: "\f10b";
2226
+ font-family: VideoJS;
2227
+ font-size: 22px;
2228
+ }
2229
+ .video-js .vdt-cinema-button:active, .video-js .vdt-cinema-button:focus,
2230
+ .video-js .vdt-settings-menu-button:active,
2231
+ .video-js .vdt-settings-menu-button:focus,
2232
+ .video-js .vdt-screenshot-button:active,
2233
+ .video-js .vdt-screenshot-button:focus {
2234
+ opacity: 0.6;
2235
+ }
2236
+ .video-js .vdt-cinema-button:after {
2237
+ content: "\f10a";
2238
+ }
2239
+ .video-js .vdt-settings-menu-button:after {
2240
+ content: "\f110";
2241
+ }
2242
+ .video-js .vdt-waveform-visual, .video-js .vdt-help-overlay {
2243
+ position: absolute;
2244
+ top: 0px;
2245
+ left: 0px;
2246
+ background: #888;
2247
+ height: 100%;
2248
+ width: 100%;
2249
+ display: none;
2250
+ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#88bfe8+0,71a1c4+100 */
2251
+ background: #88bfe8;
2252
+ /* Old browsers */
2253
+ background: -moz-linear-gradient(top, #88bfe8 0%, #71a1c4 100%);
2254
+ /* FF3.6-15 */
2255
+ background: -webkit-linear-gradient(top, #88bfe8 0%, #71a1c4 100%);
2256
+ /* Chrome10-25,Safari5.1-6 */
2257
+ background: linear-gradient(to bottom, #88bfe8 0%, #71a1c4 100%);
2258
+ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
2259
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#88bfe8", endColorstr="#71a1c4",GradientType=0 );
2260
+ /* IE6-9 */
2261
+ }
2262
+ .video-js .vdt-waveform-visual canvas, .video-js .vdt-help-overlay canvas {
2263
+ height: 100%;
2264
+ width: 100%;
2265
+ }
2266
+ .video-js.vjs-has-started .vdt-waveform-visual {
2267
+ display: block;
2268
+ }
2269
+ .video-js .vdt-help-overlay {
2270
+ font-size: 15px;
2271
+ background: transparent;
2272
+ z-index: 2;
2273
+ transition: opacity 1s ease-in-out;
2274
+ opacity: 0;
2275
+ padding-bottom: 12px;
2276
+ }
2277
+ .video-js .vdt-help-overlay > table {
2278
+ height: 100%;
2279
+ margin: 0 auto;
2280
+ }
2281
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table {
2282
+ border-radius: 7px;
2283
+ max-height: 400px;
2284
+ -webkit-backdrop-filter: blur(10px);
2285
+ background: rgba(0, 0, 0, 0.6);
2286
+ }
2287
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table td {
2288
+ padding: 6px 6px;
2289
+ }
2290
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table td:nth-child(2), .video-js .vdt-help-overlay > table td.vdt-help-contents table td td:nth-child(4) {
2291
+ padding: 4px 9px;
2292
+ }
2293
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table td:nth-child(2) {
2294
+ padding-right: 32px;
2295
+ }
2296
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table td:first-child div, .video-js .vdt-help-overlay > table td.vdt-help-contents table td:nth-child(3) div {
2297
+ text-align: center;
2298
+ padding: 3px;
2299
+ border: 1px solid white;
2300
+ border-radius: 2px;
2301
+ background: rgba(255, 255, 255, 0.1);
2302
+ font-size: 13px;
2303
+ min-width: 21px;
2304
+ }
2305
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table td:first-child {
2306
+ padding-left: 16px;
2307
+ }
2308
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table td:last-child {
2309
+ padding-right: 16px;
2310
+ }
2311
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table tr:first-child td {
2312
+ padding-top: 16px;
2313
+ }
2314
+ .video-js .vdt-help-overlay > table td.vdt-help-contents table tr:last-child td {
2315
+ padding-bottom: 16px;
2316
+ }
2317
+ .video-js .vdt-help-overlay > table td {
2318
+ vertical-align: middle;
2319
+ }
2320
+ .video-js .vdt-help-overlay.active {
2321
+ display: block;
2322
+ opacity: 1;
2323
+ }
2324
+ .video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen.vjs-user-inactive.vjs-playing .vjs-text-track-display, .video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen .vjs-text-track-display {
2325
+ bottom: 60px;
2326
+ }
2327
+ .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) {
2328
+ overflow: visible;
2329
+ width: auto;
2330
+ height: auto;
2331
+ background-color: transparent;
2332
+ margin-bottom: 70px;
2333
+ }
2334
+ .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) video {
2335
+ position: relative;
2336
+ }
2337
+ .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar {
2338
+ transform: translate3d(0px, 60px, 0px);
2339
+ transition: all 300ms ease-in-out;
2340
+ background: transparent;
2341
+ }
2342
+ .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vjs-button:not(.vjs-menu-item-text), .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text) {
2343
+ color: #333;
2344
+ }
2345
+ .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vjs-button:not(.vjs-menu-item-text), .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text) {
2346
+ color: #efefef;
2347
+ }
2348
+ .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-progress-holder {
2349
+ margin: 0 auto;
2350
+ }
2351
+ .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-menu {
2352
+ bottom: 35px;
2353
+ }
2354
+ .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-poster {
2355
+ height: initial;
2356
+ }
2357
+ .video-js .vjs-play-progress:before,
2358
+ .video-js .vjs-remaining-time,
2359
+ .video-js .vjs-picture-in-picture-control,
2360
+ .video-js .vjs-progress-control:hover .vjs-time-tooltips,
2361
+ .video-js .vjs-play-progress .vjs-time-tooltip,
2362
+ .video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
2363
+ display: none;
2364
+ }