add css for controlbar on mobile in audio examples (#19)

collab-project · Jan 17, 2016 · effebe8 · effebe8
1 parent 1c734da
commit effebe8
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 6 deletions.
diff --git a/examples/audio-only-ogg.html b/examples/audio-only-ogg.html
@@ -18,13 +18,19 @@
   <style>
   /* place fullscreen control on right side of the player */
   .video-js .vjs-control.vjs-fullscreen-control {
-    position: absolute;
-    right: 0;
+      position: absolute;
+      right: 0;
   }
   /* change player background color */
   #myAudio {
       background-color: #9FD6BA;
   }
+  /* make sure the custom controls are always visible because
+     the plugin hides and replace the video.js native mobile
+     controls */
+  .vjs-using-native-controls .vjs-control-bar {
+      display: flex !important;
+  }
   </style>
 </head>
 <body>

diff --git a/examples/audio-only-recorderjs.html b/examples/audio-only-recorderjs.html
@@ -18,13 +18,19 @@
   <style>
   /* place fullscreen control on right side of the player */
   .video-js .vjs-control.vjs-fullscreen-control {
-    position: absolute;
-    right: 0;
+      position: absolute;
+      right: 0;
   }
   /* change player background color */
   #myAudio {
       background-color: #9FD6BA;
   }
+  /* make sure the custom controls are always visible because
+     the plugin hides and replace the video.js native mobile
+     controls */
+  .vjs-using-native-controls .vjs-control-bar {
+      display: flex !important;
+  }
   </style>
 </head>
 <body>

diff --git a/examples/audio-only.html b/examples/audio-only.html
@@ -18,13 +18,19 @@
   <style>
   /* place fullscreen control on right side of the player */
   .video-js .vjs-control.vjs-fullscreen-control {
-    position: absolute;
-    right: 0;
+      position: absolute;
+      right: 0;
   }
   /* change player background color */
   #myAudio {
       background-color: #9FD6BA;
   }
+  /* make sure the custom controls are always visible because
+     the plugin hides and replace the video.js native mobile
+     controls */
+  .vjs-using-native-controls .vjs-control-bar {
+      display: flex !important;
+  }
   </style>
 
 </head>

diff --git a/examples/upload/fine-uploader.html b/examples/upload/fine-uploader.html
@@ -16,6 +16,12 @@
         #myAudio {
             background-color: #9FD6BA;
         }
+        /* make sure the custom controls are always visible because
+           the plugin hides and replace the video.js native mobile
+           controls */
+        .vjs-using-native-controls .vjs-control-bar {
+            display: flex !important;
+        }
         </style>
     </head>
 

diff --git a/examples/upload/jquery.fileupload.html b/examples/upload/jquery.fileupload.html
@@ -16,6 +16,12 @@
         #myAudio {
             background-color: #9FD6BA;
         }
+        /* make sure the custom controls are always visible because
+           the plugin hides and replace the video.js native mobile
+           controls */
+        .vjs-using-native-controls .vjs-control-bar {
+            display: flex !important;
+        }
         /* hide file upload button */
         #fileupload {
             display: none;