problem with reveal and vimeo

[mrtunes]

my site had foundation 2.1.5 originally, and when using reveal i found that a vimeo video wouldn't stop playing after closing the modal window. so i updated the scripts app.js and foundation.js using the 2.2.1 package assuming that people had likely submitted this bug before.

now the modal window doesn't come up at all. was i supposed to add more updates into the site?

EDIT: i fixed one part of this issue by moving app and foundation to the bottom, and adding modernizr. but vimeo still keeps playing after closing the box.

[smileyj68]

This has been submitted before but we'll need to tackle it in a larger overhaul to reveal. Reveal handles the animation right now by using visibility: hidden on the modal, which does nothing to stop embeds or other media. You would need a JS call when the modal closes to stop the included video.

[DESIGNfromWITHIN]

I fixed this as follows, I also added a show and hide to the vimeo video, see issue here: #727 (thanks to https://github.com/alettieri):

The HTML:

<div id="myModal" class="reveal-modal">
    <iframe id="myVideo" src="http://player.vimeo.com/video/42877261" width="532" height="299" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display:none;"></iframe>
    <a class="close-reveal-modal">×</a>
</div>

The javascript:

$(window).load(function(){
    $(function(){
    var $revealModal = 
        $("#myModal"),
        $myVideo = $("#myVideo");
         // Bind to the reveal opening event
         $revealModal.bind("reveal:open",function(){
            // It's opening
            $myVideo.show();
        })
        // Bind to the reveal closing event
      .bind("reveal:close",function(){
            // It's closing
            $myVideo.hide();
            // sets the source to nothing, stopping the video
            $('iframe#myVideo').attr('src',''); 
            // sets it back to the correct link so that it reloads immediately on the next window open
            $('iframe#myVideo').attr('src','http://player.vimeo.com/video/42877260');
          })
          // Fire reveal object.
          $('.triggerModual').click(function() {
            $revealModal.reveal();
        });
    });
});

[alettieri]

@mrtunes what @smileyj68 said is a good way to tackle your problem. You could bind to the reveal:close event and use the Vimeo player API pause method to pause the video.

Here's a working example of what's possible with reveal + Vimeo. Code can be found here. Hope this helps.