5

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?

b mckenzie
  • 53
  • 1
  • 4

3 Answers3

4

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.");
  }
);
Shadoath
  • 720
  • 1
  • 15
  • 31
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

O.uroboros
  • 31
  • 4
  • Doh. Thanks. I don't know how I got sidetracked into the Fdn 5 docs on that one -- I've used the Foundation 6 docs for everything else :-( There's no telling how long I might have stayed mystified (or just oblivious). I had seen that 'closed.zf' style of event tracking in other Foundation JS stuff. too. Sheesh. – b mckenzie Mar 15 '16 at 13:34
  • Hey I'm glad I could help! – O.uroboros Mar 16 '16 at 17:01
0

In HTML 

<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
    <div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
        <h2>This modal has video</h2>
        <div class="flex-video">
        <iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
    </div>
        <button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>

<!--in apps.js-->

function destroyVideo(){
    var url = $('#youtubePlayer').attr('src');
    $('#youtubePlayer').attr('src', '');
    $('#youtubePlayer').attr('src', url);
}
Ruben Quintana
  • 11