I am trying to figure out how to capture the hide event (display:none;) inside an iframe. I have three iframes, and only one at a time is visible, the other two iFrames are hidden. I am using jQuery show(), hide() methods to hide and show different iframes :
$('#currentFrame').hide();
$('#newIframe').show();
I have embedded wistia videos inside these iframes and when one iframe is switched to another I want to pause the current video. hence I want to capture the hide event.
Inside the iFrame I tried this but it doesn't get triggered
$(document).blur( function () {
var video = Wistia.api("video1");
video.pause();
});
use the following example, it uses the postMessage function