Question

I have this youtube video embedded into a jQuery dialog. The dialog is created like so:

$(function() {
    $.prepare_dialog2 = function() {
        $('body').append('<div class="dlgVid"></div>');
        $('.dlgVid').dialog({ autoOpen: false,  modal: true, position: ['center',100], resizable: false, width: 640 });
    }
    $.dlgVid = function(url,ttl) {
        $.ajax({
            type: 'POST', url: url,
            success: function(data) { $('.dlgVid').dialog('open').dialog('option','title',ttl).html(data);},
            error: function() { alert('Oops! An error occured. Please try again or contact us if the problem persists.');}
        });
    }

    $.prepare_dialog2();    
});

and is called using the $.dlgVid function. In the dialog window, there is a close link which upon click closes the dialog like so:

$('.dlgCloser').live('click',function(){
    $('.dlgVid').dialog('close');
});

The problem is when I close the dialog, the video continues to play. I need it to stop. I tried this but it didn’t work (as in the video is still playing, I can hear the audio):

$('.dlgCloser').live('click',function(){
    $('.dlgVid').dialog('destroy');
    $.prepare_dialog2();
});

Does anyone how to stop the playback or why destroy isn’t removing the dialog from the DOM?

Answer 1

I think this destroy is actually hiding it thus why it’s still playing. Try this:

$('.dlgCloser').live('click',function(){
    $('.dlgVid').remove();
});

Although this might fix the problem, this will also remove every instance of .dlgVid

Also, using the .live() is depracated from the jQuery library. You should use .on().