title: Properly containing draggable markers on videojs player
body: <p>I am working with javascript and videojs and am relatively new to front end development. I'm currently working on a project where I want to allow the user to specify points in a video through the use of draggable markers on the videojs seekbar. I found the videojs marker library from: <a href="https://github.com/spchuang/videojs-markers" rel="nofollow">https://github.com/spchuang/videojs-markers</a> and have made a simple modification in their createMarkers() function to create a draggable marker instead of a permanent marker. </p>
  
  <pre><code>function createMarkers(){
       // create the markers
       var duration, m, pos, text;
       console.log("[videojs-markers] creating markers");
       duration = player.duration();
       $.each(options.marker_breaks, function(key,time){
          pos = (time/duration)*100;
          m = $("&lt;div class='vjs-marker'  id='"+key+"'&gt;&lt;/div&gt;");
          m.css(setting.markerStyle)
             .css({"margin-left"   : -parseFloat(m.css("width"))/2 +'px',
                "left"          : pos+ '%'});
          //MY ADDITIONS BEGIN
          m.draggable({
              containment: '.vjs-progress-holder'
          });
          m.css({'position':'absolute'});
          //MY ADDITIONS END
  
          video_wrapper.find('.vjs-progress-control').append(m);
          text = options.marker_text[key] || "";
          markers.push({div: m, time: time, pos:pos, text: text});
       });
    }
  </code></pre>
  
  <p>However when I try and place a draggable marker on the seek bar it is not really contained in the bar. The markers can be dragged down below the seekbar. If I instead include them in the seekbar for containment they mess with the skipping of the video.  Here is the code for inserting the marker: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="C:/linkto/jquery/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="C:/linkto/jquery-ui/ui/minified/jquery-ui.custom.min.js"&gt;&lt;/script&gt;
      &lt;link href="C:/linkto/video-js/video-js.css" rel="stylesheet"&gt;
      &lt;script src="C:/linkto/video-js/video.js"&gt;&lt;/script&gt;
      &lt;script src="C:/linkto/video-js/videojs-markers/videojs.markers.js"&gt;&lt;/script&gt;
      &lt;link href="C:/linkto/video-js/videojs-markers/videojs.markers.css" rel="stylesheet"&gt;
    &lt;/head&gt;  
    &lt;body&gt;
      &lt;video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls&gt;
        &lt;source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4"&gt;
        &lt;source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm"&gt;
      &lt;/video&gt;
      &lt;script&gt;    
          var playa = videojs("example_video_1").player()
          playa.markers({
              //set break time
              setting: {
                  forceInitialization: true
              },
              marker_breaks:[0, playa.duration()]
          });  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have not edited the css from the videojs-markers code aside from what's above. Any help on how I might be able to contain the marker more accurately would be awesome! </p>
  
  <p>Thanks! 
  ~Zoltana</p>