mediaelement_rails 0.5.1 → 0.7.0

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.
@@ -20,6 +20,11 @@
20
20
  overflow: hidden;
21
21
  }
22
22
 
23
+ .mejs-fullscreen {
24
+ /* set it to not show scroll bars so 100% will work */
25
+ overflow: hidden !important;
26
+ }
27
+
23
28
  .mejs-container-fullscreen {
24
29
  position: fixed;
25
30
  left: 0;
@@ -35,12 +40,17 @@
35
40
  height: 100%;
36
41
  }
37
42
 
43
+ .mejs-clear {
44
+ clear: both;
45
+ }
46
+
38
47
  /* Start: LAYERS */
39
48
  .mejs-background {
40
49
  position: absolute;
41
50
  top: 0;
42
51
  left: 0;
43
52
  }
53
+
44
54
  .mejs-mediaelement {
45
55
  position: absolute;
46
56
  top: 0;
@@ -48,25 +58,35 @@
48
58
  width: 100%;
49
59
  height: 100%;
50
60
  }
61
+
51
62
  .mejs-poster {
52
63
  position: absolute;
53
64
  top: 0;
54
65
  left: 0;
66
+ background-size: contain ;
67
+ background-position: 50% 50% ;
68
+ background-repeat: no-repeat ;
55
69
  }
70
+ :root .mejs-poster img {
71
+ display: none ;
72
+ }
73
+
56
74
  .mejs-poster img {
57
75
  border: 0;
58
76
  padding: 0;
59
77
  border: 0;
60
- display: block;
61
78
  }
79
+
62
80
  .mejs-overlay {
63
81
  position: absolute;
64
82
  top: 0;
65
83
  left: 0;
66
84
  }
85
+
67
86
  .mejs-overlay-play {
68
87
  cursor: pointer;
69
88
  }
89
+
70
90
  .mejs-overlay-button {
71
91
  position: absolute;
72
92
  top: 50%;
@@ -76,12 +96,15 @@
76
96
  margin: -50px 0 0 -50px;
77
97
  background: url(<%= asset_path "mediaelement_rails/bigplay.svg" %>) no-repeat;
78
98
  }
99
+
79
100
  .no-svg .mejs-overlay-button {
80
101
  background-image: url(<%= asset_path "mediaelement_rails/bigplay.png" %>);
81
102
  }
103
+
82
104
  .mejs-overlay:hover .mejs-overlay-button {
83
105
  background-position: 0 -100px ;
84
106
  }
107
+
85
108
  .mejs-overlay-loading {
86
109
  position: absolute;
87
110
  top: 50%;
@@ -99,6 +122,7 @@
99
122
  background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
100
123
  background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
101
124
  }
125
+
102
126
  .mejs-overlay-loading span {
103
127
  display: block;
104
128
  width: 80px;
@@ -111,7 +135,6 @@
111
135
  /* Start: CONTROL BAR */
112
136
  .mejs-container .mejs-controls {
113
137
  position: absolute;
114
- background: none;
115
138
  list-style-type: none;
116
139
  margin: 0;
117
140
  padding: 0;
@@ -139,7 +162,6 @@
139
162
  height: 26px;
140
163
  font-size: 11px;
141
164
  line-height: 11px;
142
- background: 0;
143
165
  font-family: Helvetica, Arial;
144
166
  border: 0;
145
167
  }
@@ -170,7 +192,7 @@
170
192
 
171
193
  /* End: CONTROL BAR */
172
194
 
173
- /* Start: Time (current / duration) */
195
+ /* Start: Time (Current / Duration) */
174
196
  .mejs-container .mejs-controls .mejs-time {
175
197
  color: #fff;
176
198
  display: block;
@@ -179,44 +201,43 @@
179
201
  padding: 8px 3px 0 3px ;
180
202
  overflow: hidden;
181
203
  text-align: center;
182
- padding: auto 4px;
183
204
  -moz-box-sizing: content-box;
184
205
  -webkit-box-sizing: content-box;
185
206
  box-sizing: content-box;
186
207
  }
208
+
187
209
  .mejs-container .mejs-controls .mejs-time span {
188
- font-size: 11px;
189
210
  color: #fff;
211
+ font-size: 11px;
190
212
  line-height: 12px;
191
213
  display: block;
192
214
  float: left;
193
215
  margin: 1px 2px 0 0;
194
216
  width: auto;
195
217
  }
196
- /* End: Time (current / duration) */
197
-
218
+ /* End: Time (Current / Duration) */
198
219
 
199
- /* Start: Play/pause */
220
+ /* Start: Play/Pause/Stop */
200
221
  .mejs-controls .mejs-play button {
201
222
  background-position: 0 0;
202
223
  }
224
+
203
225
  .mejs-controls .mejs-pause button {
204
226
  background-position: 0 -16px;
205
227
  }
206
- /* End: Play/pause */
207
228
 
208
-
209
- /* Stop */
210
229
  .mejs-controls .mejs-stop button {
211
230
  background-position: -112px 0;
212
231
  }
213
- /* End: Play/pause */
232
+ /* Start: Play/Pause/Stop */
214
233
 
215
- /* Start: Progress bar */
234
+ /* Start: Progress Bar */
216
235
  .mejs-controls div.mejs-time-rail {
236
+ direction: ltr;
217
237
  width: 200px;
218
238
  padding-top: 5px;
219
239
  }
240
+
220
241
  .mejs-controls .mejs-time-rail span {
221
242
  display: block;
222
243
  position: absolute;
@@ -227,6 +248,7 @@
227
248
  border-radius: 2px;
228
249
  cursor: pointer;
229
250
  }
251
+
230
252
  .mejs-controls .mejs-time-rail .mejs-time-total {
231
253
  margin: 5px;
232
254
  background: #333;
@@ -238,6 +260,7 @@
238
260
  background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
239
261
  background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
240
262
  }
263
+
241
264
  .mejs-controls .mejs-time-rail .mejs-time-buffering {
242
265
  width: 100%;
243
266
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -274,8 +297,8 @@
274
297
  background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
275
298
  width: 0;
276
299
  }
300
+
277
301
  .mejs-controls .mejs-time-rail .mejs-time-current {
278
- width: 0;
279
302
  background: #fff;
280
303
  background: rgba(255,255,255,0.8);
281
304
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
@@ -284,6 +307,7 @@
284
307
  background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
285
308
  background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
286
309
  background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
310
+ width: 0;
287
311
  }
288
312
 
289
313
  .mejs-controls .mejs-time-rail .mejs-time-handle {
@@ -349,19 +373,18 @@
349
373
  left: 18px;
350
374
  }
351
375
 
352
-
353
-
354
376
  /*
355
377
  .mejs-controls .mejs-time-rail:hover .mejs-time-handle {
356
378
  visibility:visible;
357
379
  }
358
380
  */
359
- /* End: Progress bar */
381
+ /* End: Progress Bar */
360
382
 
361
383
  /* Start: Fullscreen */
362
384
  .mejs-controls .mejs-fullscreen-button button {
363
385
  background-position: -32px 0;
364
386
  }
387
+
365
388
  .mejs-controls .mejs-unfullscreen button {
366
389
  background-position: -32px -16px;
367
390
  }
@@ -399,11 +422,13 @@
399
422
  position: absolute;
400
423
  margin: 0;
401
424
  }
425
+
402
426
  .mejs-controls .mejs-volume-button:hover {
403
427
  -webkit-border-radius: 0 0 4px 4px;
404
428
  -moz-border-radius: 0 0 4px 4px;
405
429
  border-radius: 0 0 4px 4px;
406
430
  }
431
+
407
432
  /*
408
433
  .mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
409
434
  display: block;
@@ -447,9 +472,7 @@
447
472
  margin: 0;
448
473
  }
449
474
 
450
-
451
475
  /* horizontal version */
452
-
453
476
  .mejs-controls div.mejs-horizontal-volume-slider {
454
477
  height: 26px;
455
478
  width: 60px;
@@ -465,11 +488,9 @@
465
488
  margin: 0;
466
489
  padding: 0;
467
490
  font-size: 1px;
468
-
469
491
  -webkit-border-radius: 2px;
470
492
  -moz-border-radius: 2px;
471
493
  border-radius: 2px;
472
-
473
494
  background: #333;
474
495
  background: rgba(50,50,50,0.8);
475
496
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
@@ -478,7 +499,6 @@
478
499
  background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
479
500
  background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
480
501
  background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
481
-
482
502
  }
483
503
 
484
504
  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
@@ -490,11 +510,9 @@
490
510
  margin: 0;
491
511
  padding: 0;
492
512
  font-size: 1px;
493
-
494
513
  -webkit-border-radius: 2px;
495
514
  -moz-border-radius: 2px;
496
515
  border-radius: 2px;
497
-
498
516
  background: #fff;
499
517
  background: rgba(255,255,255,0.8);
500
518
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
@@ -503,20 +521,15 @@
503
521
  background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
504
522
  background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
505
523
  background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
506
-
507
524
  }
508
525
 
509
-
510
526
  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
511
527
  display: none;
512
528
  }
513
529
 
514
530
  /* End: Mute/Volume */
515
531
 
516
-
517
-
518
-
519
- /* Start: TRACK (Captions and Chapters) */
532
+ /* Start: Track (Captions and Chapters) */
520
533
  .mejs-controls .mejs-captions-button {
521
534
  position: relative;
522
535
  }
@@ -540,6 +553,7 @@
540
553
  -moz-border-radius: 0;
541
554
  border-radius: 0;
542
555
  }
556
+
543
557
  /*
544
558
  .mejs-controls .mejs-captions-button:hover .mejs-captions-selector {
545
559
  visibility: visible;
@@ -553,6 +567,7 @@
553
567
  list-style-type: none !important;
554
568
  overflow: hidden;
555
569
  }
570
+
556
571
  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
557
572
  margin: 0 0 6px 0;
558
573
  padding: 0;
@@ -561,11 +576,13 @@
561
576
  color: #fff;
562
577
  overflow: hidden;
563
578
  }
579
+
564
580
  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
565
581
  clear: both;
566
582
  float: left;
567
583
  margin: 3px 3px 0 5px;
568
584
  }
585
+
569
586
  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
570
587
  width: 100px;
571
588
  float: left;
@@ -580,7 +597,6 @@
580
597
  margin: 0 0 5px 0;
581
598
  }
582
599
 
583
-
584
600
  .mejs-chapters {
585
601
  position: absolute;
586
602
  top: 0;
@@ -589,6 +605,7 @@
589
605
  width: 10000px;
590
606
  z-index: 1;
591
607
  }
608
+
592
609
  .mejs-chapters .mejs-chapter {
593
610
  position: absolute;
594
611
  float: left;
@@ -604,6 +621,7 @@
604
621
  overflow: hidden;
605
622
  border: 0;
606
623
  }
624
+
607
625
  .mejs-chapters .mejs-chapter .mejs-chapter-block {
608
626
  font-size: 11px;
609
627
  color: #fff;
@@ -613,12 +631,12 @@
613
631
  border-bottom: solid 1px #333;
614
632
  cursor: pointer;
615
633
  }
634
+
616
635
  .mejs-chapters .mejs-chapter .mejs-chapter-block-last {
617
636
  border-right: none;
618
637
  }
619
638
 
620
639
  .mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
621
- /*background: #333;*/
622
640
  background: #666;
623
641
  background: rgba(102,102,102, 0.7);
624
642
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
@@ -629,6 +647,7 @@
629
647
  background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6));
630
648
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);
631
649
  }
650
+
632
651
  .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
633
652
  font-size: 12px;
634
653
  font-weight: bold;
@@ -638,6 +657,7 @@
638
657
  margin: 0 0 3px 0;
639
658
  line-height: 12px;
640
659
  }
660
+
641
661
  .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
642
662
  font-size: 12px;
643
663
  line-height: 12px;
@@ -647,21 +667,21 @@
647
667
  text-overflow: ellipsis;
648
668
  }
649
669
 
650
-
651
670
  .mejs-captions-layer {
652
671
  position: absolute;
653
672
  bottom: 0;
654
673
  left: 0;
655
674
  text-align:center;
656
- /*font-weight: bold;*/
657
675
  line-height: 22px;
658
676
  font-size: 12px;
659
677
  color: #fff;
660
678
  }
679
+
661
680
  .mejs-captions-layer a {
662
681
  color: #fff;
663
682
  text-decoration: underline;
664
683
  }
684
+
665
685
  .mejs-captions-layer[lang=ar] {
666
686
  font-size: 20px;
667
687
  font-weight: normal;
@@ -684,52 +704,50 @@
684
704
  background: rgba(20, 20, 20, 0.8);
685
705
 
686
706
  }
687
- /* End: TRACK (Captions and Chapters) */
688
-
689
-
690
-
691
- .mejs-clear {
692
- clear: both;
693
- }
707
+ /* End: Track (Captions and Chapters) */
694
708
 
695
- /* Start: ERROR */
709
+ /* Start: Error */
696
710
  .me-cannotplay {
697
711
  }
712
+
698
713
  .me-cannotplay a {
699
714
  color: #fff;
700
715
  font-weight: bold;
701
716
  }
717
+
702
718
  .me-cannotplay span {
703
719
  padding: 15px;
704
720
  display: block;
705
721
  }
706
- /* End: ERROR */
722
+ /* End: Error */
707
723
 
708
724
 
709
725
  /* Start: Loop */
710
726
  .mejs-controls .mejs-loop-off button {
711
727
  background-position: -64px -16px;
712
728
  }
729
+
713
730
  .mejs-controls .mejs-loop-on button {
714
731
  background-position: -64px 0;
715
732
  }
733
+
716
734
  /* End: Loop */
717
735
 
718
736
  /* Start: backlight */
719
737
  .mejs-controls .mejs-backlight-off button {
720
738
  background-position: -80px -16px;
721
739
  }
740
+
722
741
  .mejs-controls .mejs-backlight-on button {
723
742
  background-position: -80px 0;
724
743
  }
725
744
  /* End: backlight */
726
745
 
727
-
728
- /* Start: picture controls */
746
+ /* Start: Picture Controls */
729
747
  .mejs-controls .mejs-picturecontrols-button {
730
748
  background-position: -96px 0;
731
749
  }
732
- /* End: picture controls */
750
+ /* End: Picture Controls */
733
751
 
734
752
 
735
753
  /* context menu */
@@ -763,8 +781,7 @@
763
781
  color: #fff;
764
782
  }
765
783
 
766
-
767
- /* Start: SourceChooser */
784
+ /* Start: Source Chooser */
768
785
  .mejs-controls .mejs-sourcechooser-button {
769
786
  position: relative;
770
787
  }
@@ -772,6 +789,7 @@
772
789
  .mejs-controls .mejs-sourcechooser-button button {
773
790
  background-position: -128px 0;
774
791
  }
792
+
775
793
  .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
776
794
  visibility: hidden;
777
795
  position: absolute;
@@ -796,6 +814,7 @@
796
814
  list-style-type: none !important;
797
815
  overflow: hidden;
798
816
  }
817
+
799
818
  .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
800
819
  margin: 0 0 6px 0;
801
820
  padding: 0;
@@ -804,11 +823,13 @@
804
823
  color: #fff;
805
824
  overflow: hidden;
806
825
  }
826
+
807
827
  .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
808
828
  clear: both;
809
829
  float: left;
810
830
  margin: 3px 3px 0 5px;
811
831
  }
832
+
812
833
  .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
813
834
  width: 100px;
814
835
  float: left;
@@ -817,8 +838,7 @@
817
838
  font-family: helvetica, arial;
818
839
  font-size: 10px;
819
840
  }
820
- /* End: SourceChooser */
821
-
841
+ /* End: Source Chooser */
822
842
 
823
843
  /* Start: Postroll */
824
844
  .mejs-postroll-layer {