0

i have problem with videojs progress bar . it is not staying fixed.

Question: how to make progress bar fixed when it is in hover or normal state.

Observe below 2 screens:

when we move cursor on video its progress bar is moving up. i want it to be fixed.

normal:

enter image description here

Hovered:

enter image description here

Note: i want to use same videojs version

here is what i have tried:

   .vjs-fluid {
      overflow: hidden;
   }
   
   #example_video_1 .vjs-control-bar {
      display: block;
   }
   #example_video_1 .vjs-progress-control {
         bottom: 28px;
         left: 0 ;
         height: 10px;
         width: 100%;
   }
   
   .video-js .vjs-progress-control:hover .vjs-play-progress:after {
         display:none;
   }
    <link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>


<video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls data-setup='{ "inactivityTimeout": 0 }'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
 </video>

Please help me thanks in advance!!!

EaBengaluru
  • 131
  • 2
  • 17
  • 59

2 Answers2

2

I misunderstood your query in my previous answer and I apologize for that.

Updated Answer:

Remove the height attribute and add font-size: 10px in your CSS like this

#example_video_1 .vjs-progress-control {
     bottom: 28px;
     left: 0 ;
     font-size: 10px;
     width: 100%;
}

The rest of the code is the same.

Ajay Dabas
  • 1,404
  • 1
  • 5
  • 15
1

I faced the similar problem while working on video.js, following css helped me solve the problem.
make sure you priortise the CSS 

.video-js .vjs-control-bar {
opacity :1!important;
visibility: visible;
}

let me know if this solves the purpose.

Mrinal Jain
  • 773
  • 9
  • 21