/* a wrapper element that tracks the mouse vertically */
.vjs-thumbnail-holder {
  position: absolute;
  left: -1000px;
}
.vjs-progress-marker{
    position:absolute;
    background-color: #ff9900;
    width:4px;
    height:4px;
}
.vjs-progress-control:hover > .vjs-progress-marker{
    height:6px;
}

.vjs-marker-holder {
    position:absolute;
    top:-55px;
    left:-75px;
    color:#fff;
    margin-top:2px;
    margin-bottom:2px;
    z-index:100000;
    font-size:1.3em;
    height:20px;

}
/* the thumbnail image itself */
.vjs-thumbnail {
  position: absolute;
  /*left: -75px;*/
  bottom: 150px!important;
  opacity: 0;
  transition: opacity .2s ease;
  -webkit-transition: opacity .2s ease;
  -moz-transition: opacity .2s ease;
  -mz-transition: opacity .2s ease;
  width:177px !important;
  background-color:black;
  
}
.vjs-thumbnail > img{
    height:100px !important;
}
/* fade in the thumbnail when hovering over the progress bar */
/* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
.vjs-progress-control:hover .vjs-thumbnail,
.vjs-progress-control.fake-active .vjs-thumbnail,
.vjs-progress-control:active .vjs-thumbnail {
  opacity: 1;
}

/* ... but hide the thumbnail when hovering directly over it */
.vjs-progress-control:hover .vjs-thumbnail:hover,
.vjs-progress-control:active .vjs-thumbnail:active {
  opacity: 0;
}