Looking for an example of using froogaloop to fire a jquery listener on finish

Question

I'd like to animate the vimeo video player off the screen when the video finishes playing.

Here's the HTML:

.one-container
   %a#slide1
   .row.video-left
     .large-8.columns
       .flex-video.widescreen.vimeo
         %iframe{allowfullscreen: "", frameborder: "0", height: "225", mozallowfullscreen: "", src: "http://player.vimeo.com/video/60122989", webkitallowfullscreen: "", width: "400"}

I'm just not sure how to start. I've added the minified froogaloop2 code to my site, just trying to figure out how to grab the player and call the finish method.

Thanks

score 0 · Answer 1 · answered Apr 25 '14 at 10:14

So first of all you'd need to get the video's iFrame with jQuery which would be

var videoEl = $('.flex-video.widescreen.vimeo').find('iframe')[0];

Then to add the finish event to the video using froogaloop, you'd use froogaloop's $f, while passing in the reference to the video that we just found.

$f(videoEl).addEvent('finish', function () {
    //code for animating goes here
})

Looking for an example of using froogaloop to fire a jquery listener on finish

1 Answers1