user2838698
user2838698

Reputation:

Why the youtube video is running in the background after clicking on close button of pop-up window in Google Chrome & Internet Explorer?

I'm using PHP, jQuery, AJAX, etc. for my website. I'm showing a youtube video into a jQuery pop-up window. This pop-up window has close button at top right corner. When user clicks on this close button the pop-up window should get close and youtube video should get stop. This is working perfectly in Mozilla Firefox but not in Google Chrome and Internet Explorer. In Google Chrome and Internet Explorer, the pop-up window gets closed after clicking on the close button but the video runs in the background. The voice of youtube video comes even after closing the pop-up window. I'm not understanding why this thing is happening. Can anyone help me in this regard? Thanks for spending some of your valuable time in understanding my issue. Waiting for your replies. For your reference I'm putting below the HTML and jQUery-AJAX code of the functionality. Take a look at it.

HTML Code:

<div class="parter-mid">
  <a href="#" class="show_video_popup"><img src="images_new/videoimage.jpg" border="0" alt="Our Website on television" width="243" /></a>
</div>

jQuery-AJAX Code:

<script language="javascript" type="text/javascript">
    $(".show_video_popup").click(function(e) {      
    e.preventDefault();

        var dialog_title      = "Our Website on Television";              
        var dialog_message    = "<iframe width='560' height='315' src='//www.youtube.com/embed/hj-c_cDKj0g?autoplay=1' frameborder='0' allowfullscreen></iframe>"; 

        var $dialog = $("<div class='forget_pass'></div>")
            .html(dialog_message)
            .dialog({
                autoOpen: false,
                modal:true,
                title: dialog_title,
                width: 590,
                close:{
                }
            });
        $dialog.dialog('open');             
 });
</script>

Thanks in advance.

Upvotes: 5

Views: 1132

Answers (1)

Timeout
Timeout

Reputation: 7909

Why are you setting your close function to { }? I suspect that is related to the problem. Even though the dialog isn't visible it is still technically on the page.

Try completely destroying the dialog on close and removing it from the page:

close: function() 
{ 
    $(this).dialog("destroy").remove();
} 

Upvotes: 2

Related Questions