fix(css): Added new styles to fix issues in IE11 and display captions…

… on iOS properly when not using `playsinline` attribute
openplayerjs · Jan 3, 2019 · b48baba · b48baba
1 parent b0d5a17
commit b48baba
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/dist/openplayer.css b/dist/openplayer.css
@@ -249,9 +249,6 @@
     -ms-touch-action: manipulation;
         touch-action: manipulation;
 }
-.op-controls input[type=range]::-ms-tooltip {
-    display: none;
-}
 
 /* === Time =================== */
 .op-controls > time {
@@ -396,6 +393,7 @@
 }
 .op-controls input[type='range'] {
     background: transparent;
+    padding: 0;
     -webkit-tap-highlight-color: transparent;
     z-index: 3;
 }
@@ -430,7 +428,6 @@
     -ms-user-select: none;
         user-select: none;
 }
-
 .op-controls input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
             appearance: none;
@@ -467,6 +464,13 @@
     position: relative;
     width: 12px;
 }
+.op-controls input[type='range']::-ms-tooltip {
+    display: none;
+}
+.op-controls input[type='range']::-ms-ticks-before,
+.op-controls input[type='range']::-ms-ticks-after {
+    background: transparent;
+}
 .op-controls--hidden .op-controls .op-controls__progress--seek::-webkit-slider-thumb {
     background: transparent;   
 }
@@ -491,6 +495,10 @@
         -ms-flex-positive: 2;
             flex-grow: 2;
 }
+.op-controls > .op-controls__progress,
+.op-controls > .op-controls__progress:hover {
+    cursor: pointer;
+}
 .op-controls__progress,
 .op-controls__volume {
     display: inline-block;
@@ -668,6 +676,9 @@
 .op-player video::-webkit-media-text-track-container { 
     display: none !important;
 }
+.op-player.op-player__ios--iphone video::-webkit-media-text-track-container { 
+    display: block !important;
+}
 
 /* == Captions =============== */
 .op-captions {

diff --git a/dist/openplayer.min.css b/dist/openplayer.min.css
diff --git a/src/css/player.css b/src/css/player.css
@@ -213,9 +213,6 @@
 .op-controls > button {
     touch-action: manipulation;
 }
-.op-controls input[type=range]::-ms-tooltip {
-    display: none;
-}
 
 /* === Time =================== */
 .op-controls > time {
@@ -350,6 +347,7 @@
 }
 .op-controls input[type='range'] {
     background: transparent;
+    padding: 0;
     -webkit-tap-highlight-color: transparent;
     z-index: 3;
 }
@@ -381,7 +379,6 @@
     height: 8px;
     user-select: none;
 }
-
 .op-controls input[type='range']::-webkit-slider-thumb {
     appearance: none;
     background: #fff;
@@ -415,6 +412,13 @@
     position: relative;
     width: 12px;
 }
+.op-controls input[type='range']::-ms-tooltip {
+    display: none;
+}
+.op-controls input[type='range']::-ms-ticks-before,
+.op-controls input[type='range']::-ms-ticks-after {
+    background: transparent;
+}
 .op-controls--hidden .op-controls .op-controls__progress--seek::-webkit-slider-thumb {
     background: transparent;   
 }
@@ -437,6 +441,10 @@
 .op-controls > .op-controls__progress {
     flex-grow: 2;
 }
+.op-controls > .op-controls__progress,
+.op-controls > .op-controls__progress:hover {
+    cursor: pointer;
+}
 .op-controls__progress,
 .op-controls__volume {
     display: inline-block;
@@ -598,6 +606,9 @@
 .op-player video::-webkit-media-text-track-container { 
     display: none !important;
 }
+.op-player.op-player__ios--iphone video::-webkit-media-text-track-container { 
+    display: block !important;
+}
 
 /* == Captions =============== */
 .op-captions {