Remove iframe after popup close Jquery mobile - html

Question

I created simple jquery mobile website, where you click an button and iframe with video is loaded on popup.
My problem is that video keeps playing after i close the popup.
How can i avoid this?
Jquery mobile documentation says that this will happen, and i should listen to popupafterclose event.
http://demos.jquerymobile.com/1.2.0/docs/pages/popup/popup-iframes.html
But how can i do that, can someone make me an example?
Demo of problem: http://jsfiddle.net/43nk572m/1/
HTML:
<!-- BUTTONS -->
Open Iframe Popup1
Open Iframe Popup2
<!--POPUPS-->
<div data-role="popup" id="testing" data-theme="b" data-tolerance="15,15">
Close
<div data-role="header">
<h1>blablabla</h1>
</div>
<iframe src="http://player.vimeo.com/video/110823244" width="520" height="360" scrolling="no" seamless="seamless"></iframe>
</div>
<div data-role="popup" id="testing2" data-theme="b" data-tolerance="15,15">
Close
<div data-role="header">
<h1>blablabla</h1>
</div>
<iframe src="http://player.vimeo.com/video/110823244" width="520" height="360" scrolling="no" seamless="seamless"></iframe>
</div>
Please note that popup div id is always changing so i cant just call some javascript to kill #testing2 for example.
I appriciate your help!
Regards
M

Answer 1

You should try something like this:
$("#testing").bind({
popupafterclose: function(event, ui) {
$(this).find('iframe').remove();
}
});

Answer 2

For the popup div, you can use the jQuery selector '[data-role="popup"]'. To catch the popupafterclose event, delegate it from the document, so that any dynamically created popups will trigger the event:
$(document).on( "popupafterclose", '[data-role="popup"]', function( event, ui ) {
$(this).find("iframe").prop("src", "");
});
In the event handler, find the iframe element and set its src prop to an empty string.
DEMO