jquery ui dialog cannot open twice

Question

I've a problem with the jquery ui dialog. It cannot be opened once i close it. Here is what i tried

html:

    <div id="videodialog" style="display:none;">
    <div style="top:0%; right:1%; position:absolute; cursor:pointer;" 
    class="videodialogremoveclass"><img id="dialogremove" src="image/bdelete.png"    
    height="15" /></div>
    <iframe id="video" width="635" height="360" 
    src="http://www.youtube.com/embed/b16V25eNyJY" frameborder="0" allowfullscreen>
    </iframe>
     </div>

jquery:

    $( '#videodialog' ).dialog({
         autoOpen: false,
            height: 380,
            width: '50%',
            position:[285,140],
            modal:true,
            resizable: false,
            draggable: false,
            beforeClose: function(){   $(this).remove();   }
    });
    $( '#videodialog' ).dialog( "open" );
    e.preventDefault();

Any help please :)

Answer 1

Remove below line, it's removing the dialog from DOM on close.

beforeClose: function(){   $(this).remove();   }

Continued...

$( '#videodialog' ).dialog({
         autoOpen: false,
            height: 380,
            width: '50%',
            position:[285,140],
            modal:true,
            resizable: false,
            draggable: false,
            open: function() { $("#video").attr('src','http://www.youtube.com/embed/b16V25eNyJY'); }
            beforeClose: function(){   $("#video").attr('src','');   }
    });

Answer 2

remove

$(this).remove();

from the before close event.

Answer 3

For which purpose you have written this line

 e.preventDefault();
 $(this).remove();

if not required then remove and try again.