Foundation 6 reveal modal events not firing for me

Question

I want videos playing in the reveal modal window to stop playing when the modal window closes (who doesn't?). This is easily done with jQuery by setting the iframe source to empty.

But I can't figure out how to make it work in a callback. The modal window itself functions as expected. And this works:

$('.close-button', '#video-reveal').on('click', function() {
      $('#video-player').attr("src", "");
       console.log("button event fired");
 });

However, neither of the following has any effect:

  // from documentation
    $(document).on('close.fndtn.reveal', '[data-reveal]', function() {
        var modal = $(this);
        console.log("closing reveal event fired");

    }); 
    // my attempt to do it programmatically
    $('[data-reveal]').on ('opened.fndtn.reveal', function() {
        var modal = jQuery(this);
        console.log("opened reveal");

    });

So it feels like the event is not firing. I'm sure it is, but how to capture it?

Answer 1

The magic of Foundation 6 is not all obvious without some digging. Working with version 6.2.3

$(document).on(
  'open.zf.reveal', '[data-reveal]', function () {
    console.log("'open.zf.Reveal' fired.");
  }
);

Answer 2

It appears as though you are using Foundation 5's callbacks, rather than Foundation 6...

For your callbacks, I'd suggest using 'closed.zf.reveal', 'open.zf.reveal' or 'closeme.zf.reveal' as mentioned here:

http://foundation.zurb.com/sites/docs/reveal.html