1

Issue

It's a relatively simple problem that I'm not able to get:

I'm using Fancybox with a Vimeo embed and trying to auto close the fancybox once the video has ended, but I'm not able to get it to close.

Attempted Solutions

I've attempted to implement the code from this example: (Fire event when vimeo video stops playing?) and by looking at the Vimeos repository on Github: (https://github.com/vimeo/player.js)

Code

(Note: I'm attaching this to the 'afterload' event in Fancybox)

afterLoad: function (current, previous) {
    // Attempted Solution 1
    var iframe = $('.fancybox-iframe')[0],
        player = $(iframe);
        console.log(player);
    $(player).ready(function() {
        console.log('ready!!');
    });
    $(player).on('ended', function(data) {
        console.log('finished!!');
        $.fancybox.close();
    });

    // Attempted Solution 2
    var iframe = $('iframe .fancybox-iframe');
    var player = new Vimeo.Player(iframe);

    player.on('ended', function() {
        console.log('Finished.');
    });

    // Experiment 3
    vimeo : {
        color : 'red'
    }
}

Results

Attempted Solution 1 works when I call (player).ready but nothing happens when I call $(player).on('ended', function(data).

Attempted Solution 2 throws the error: "You must pass either a valid element or a valid id"

Attempted Solution 3 was just an attempt to see if I could control the Vimeo parameters by jQuery, but didn't get a result.

Any thoughts on what I'm missing in either of these approaches?

Community
  • 1
  • 1
Andrew Jones
  • 67
  • 5
  • 1
    Vimeo docs clearly states that you have to have something like `var player = new Vimeo.Player(iframe);`, then it would probably work. – Janis Aug 27 '19 at 07:08
  • `Attempted Solution 2 throws the error: "You must pass either a valid element or a valid id"` - maybe that's because you passed a jQuery object instead of an actual element? Have you tried passing `iframe[0]`? – user7290573 Aug 27 '19 at 08:48
  • @Janis I have `var player = new Vimeo.Player(iframe);` listed in "Attempted Solution 2". Any other ideas? @user7290573 I took your idea. To confirm, would it look like this: `var iframe = iframe[0];` ? – Andrew Jones Aug 28 '19 at 01:24

0 Answers0