Draggable & Resizable div not responsive

Question

I am basically trying to creat an editor of video annotation in javascript and html, a bit like YouTube does. I have managed to do most of it, it might not be the best implementation possible but at least I tried ;).

Bassically I have a button that generates a div when it is clicked, this div will have custom tags in which it stores the time to appear and disappear, its background colour and its position.

When the video is played the divs are rendered according to the time. All the data of the annotation will then be send to a database, to be rendered later on another page.

This all work, however I would like to be able to resize the divs and to make them dragable on the window. ATM they are all in a fixed place and the size is fixed as well. Here is what I have tried, using the .draggable.resizable but it does not work, I am not sure why. I beleive the problem comes from when and where in my code I make the annotation draggable and resizable, which is as soon as the div is rendered

In breif I would like the annotation to be:

• draggable
• resizable
• contained within the space of the video

HMTL

<div class="inner">

    <div class="container" id="control_panel" style="float:left; width:50%;">
        <div class="row">
            <div class="col-sm-12">

                <button id="btn_add_annotation" class="btn btn-default" onclick="add_annotation()">
                    <span class="glyphicon glyphicon-plus"></span> New annotation
                </button>                   

                <div id="annotation_editor" style="box-shadow: 0 0 20px grey; border-radius:25px; padding:20px; margin-top:20px; display:none"> 

                    Choose the label:
                    <input id="input" onClick="Clear();" onkeyup="getVal()" type="text" value="Enter the desired text" style="height:30px"><br> 

                    <p> &nbsp</p>               

                    Choose the backgroud color: 

                    <input type='text' id="color_picker">

                    <p> &nbsp</p>

                    How long would you like it to stay up: 
                    <div style="float:right; width:60%;">   
                        <input id="annot_time" type=range>                              
                        <output id="number_seconds"></output>
                    </div>

                    <p> &nbsp</p>

                    <button id="confirm_annotation" class="btn btn-default" onclick="add_toTable()">
                        <span class="glyphicon glyphicon-ok"></span> Confirm
                    </button>
                </div>

                <p> &nbsp</p>

                <div class="table-responsive"> 
                    <table class="table" id="annotation_table">  
                        <thead>  
                          <tr>  
                            <th>ID</th>  
                            <th>Annotation Text</th>
                            <th>Time in (sec)</th>  
                            <th>Time out (sec)</th>
                          </tr>  
                        </thead>  
                        <tbody>  
                          <tr>  
                            <td>1</td>  
                            <td>You have no annotation yet :-(</td>  
                          </tr>  
                        </tbody> 
                    </table> 
                </div>      
            </div>
        </div>
    </div>

    <div class="container" id="video_wrapper" style="float:right; width:50%; padding:50px">
        <div class="row">
            <div class="col-sm-12" id="video-wrapper">  
                    <div class="annotation-wrapper" id="annotation-wrapper" style="position:absolute; height:100%; width:100%;"></div>              

                    <video id='advertisment_video' margin-top="100px" class='video-js 
                           vjs-default-skin' preload='auto' data-setup='{}'  controls webkit-playsinline>
                    <source src=<?php echo '"'.$video["video_link"].'"'; ?> type='video/mp4'></source>
            </div>

            <div class="col-sm-7" id="annotation_confirmation" style="float:right; background: rgba(255,255,255,0.5); padding:12px; width:100%; display:none">                  
                <div id="visualization"></div>

                <p> &nbsp</p>

                <button id="add_annotation" class="btn btn-default" onclick="" style="float:right">
                    <span class="glyphicon glyphicon-save-file"></span> Save &amp; Reveiw
                </button> 


            </div>  
        </div>
    </div>      
</div>

JAVA SCRIPT

var tbody = $("#log"); 
    var annotation_count = 0;

    function draggableResizable (elem){
        elem.draggable();
        elem.resizable();
    }

    function loadAnnot(){   
        var v = document.getElementsByTagName('video')[0]
        v.addEventListener('timeupdate',function(event){
            var sec = parseInt(v.currentTime);
            $( ".annotation" ).each(function() {
                var time_in = $(this).data("in");
                var time_out = $(this).data("out");
                var pos_x = $(this).data("x");
                var pos_y = $(this).data("y");

                this.style.position = "absolute";
                this.style.left = pos_x+"px";
                this.style.top = pos_y+"px";

                if (sec >= time_in && sec < time_out){
                    if ( $(this).not(':visible') ) {
                        $(this).show("slow");
                    }
                }
                if (sec < time_in || sec >= time_out){
                    if ( $(this).is(':visible') ) {
                        $(this).hide("slow");
                    }
                }
            });                                       
        },false);
    }

    function add_annotation(){
            annotation_count++;
            document.getElementById("btn_add_annotation").disabled = true;
            var v = document.getElementsByTagName('video')[0]
            v.pause();
            document.getElementById("annot_time").value = "0";
            document.getElementById("annot_time").min = "0";
            document.getElementById("annot_time").max = v.duration - v.currentTime;
            $('#annotation_editor').slideToggle("slow");

            var e = $('<div class="annotation" data-in= '+ v.currentTime +' style="background: rgb(255,255,255); width: 25%; left:100px; top:100px; display:none; opacity: 0.6">Exemple of annotation</div>').draggable.resizable;
            var vid = document.getElementById("advertisment_video");
            vid.currentTime; 

            $('.annotation-wrapper').prepend(e);    
            e.show("slow");
            e.attr('id', 'annotation'+annotation_count); 
            draggableResizable(e);
    };

    function add_toTable() {
        var x = document.getElementById("input");
        var text_row_one = document.getElementById("annotation_table").rows[1].cells.item(1).innerHTML;

        if (x.value == "Enter the desired text"){
            alertify.alert("Please enter a text lable");
            return;
        }

        if (text_row_one == "You have no annotation yet :-("){
            document.getElementById("annotation_table").deleteRow(1);
            $('#annotation_confirmation').slideToggle("slow");
        }

        var table = document.getElementById("annotation_table");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        var row_count = document.getElementById("annotation_table").rows.length;
        var vid = document.getElementById("advertisment_video");
        var n = vid.currentTime;
        var time_in = parseInt(n);
        var annot_length = document.getElementById("annot_time").value;
        var time_out = time_in + parseInt(annot_length);

        cell1.innerHTML = row_count-1;
        cell2.innerHTML = x.value;
        cell3.innerHTML = time_in;
        cell4.innerHTML = time_out;

        var current_annot = document.getElementById('annotation'+annotation_count);
        current_annot.setAttribute('data-out', time_out);
        $('#annotation'+annotation_count).hide("slow");

        resetEditor();
    }

    function getVal() {
        var x = document.getElementById("input");
        document.getElementById("annotation"+annotation_count).innerHTML = x.value;
    }

    $(document).ready(function(){
        var i = document.getElementById("annot_time"),
            o = document.getElementById("number_seconds");

        o.innerHTML = "0 Seconds";

        i.addEventListener('change', function () {
            o.innerHTML = i.value + " Seconds";
        }, false);

        var vid = document.getElementById("advertisment_video");
        vid.onplay = function() {
            loadAnnot();             
        };  

        $("#color_picker").spectrum({
            color: "#f00",
            change: function(color_picker) {
                var color = color_picker.toHexString();
                document.getElementById('annotation'+annotation_count).style.background = color;
            }
        });

    });

    function resetEditor(){
        $("#input").val("Enter the desired text");
        document.getElementById("btn_add_annotation").disabled = false;
        $('#annotation_editor').slideToggle("slow");
        $('#number_seconds').innerHTML("0 Seconds");
    }   

Thank you for your help.