/* a wrapper element that tracks the mouse vertically */
.vjs-thumbnail-holder {
    position: absolute;
    left: -1000px;
  }
  
  /* the thumbnail image itself */
  .vjs-thumbnail {
    position: absolute;
    width: 20vw;
    left: 0;
    bottom: 9.3em;
    border: 5px solid rgb(255, 255, 255);
    border-radius: 5px;
    opacity: 0;
    transition: opacity .2s ease;
    -webkit-transition: opacity .2s ease;
    -moz-transition: opacity .2s ease;
    -mz-transition: opacity .2s ease;
  }

  .vjs-thumbnail-text{
    position: absolute;
    width: 300px !important;
    left: -150;
    bottom: 3.3em;
    border: none !important;
    color: rgb(255, 255, 255);
    font-size: 2em;
  }
  
  /* 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;
  }