Vimeo froogaloop not playing in firefox 6

Alrighty, I really, really, really hate vimeo's Froogaloop API. It's taken me 3 hours or more to get to where I am now. None of their examples worked for me on their website, and barely any around the net helped!

I have a video using vimeo and froogaloop to start playi开发者_运维问答ng a video on click of a button. My code is from this website, except that I modified it so the play event is fired onclick of #api_click.

The iframe has ?api=1&player_id=basketball_video. The video does start playing in Chrome, Safari, IE9 and even IE8! But not firefox?!

My code to play it is:

// minified froogaloop, followed by:
    $(document).ready(function() {

        // Enable the API on each Vimeo video
      var players = [document.getElementById('basketball_video')];
        Froogaloop(players[0]).addEvent('ready', ready);

        $('#api_play').bind('click', function() {
          // Fire an API method
          // http://vimeo.com/api/docs/player-js#reference
          $('#sheet').click();
          Froogaloop(players[0]).api('play');
        });

        function ready(playerID) {
            // Add event listerns
            // http://vimeo.com/api/docs/player-js#events
            Froogaloop(playerID).addEvent('play');
        }
    });

---

I've been having the same problem and it's pretty weird and infuriating. I came up with an ugly hack which I'd prefer not to use but which seems to be kinda sorta working. This isn't well-tested, and I'm guessing there has to be a much better way of doing it, but here you go:

It SEEMS like Firefox is having trouble accessing the Froogaloop API when a Vimeo iframe is hidden using "display:none". I don't know if this is the actual cause of the problem or not, but I got my video to start playing by removing "display:none" and setting the iframe's width and height to 0, and then using jQuery to dynamically set the correct values just before calling api('play').

I also found that if you want the video to be paused at the current position when the user closes it (so it will automatically resume from the same place if they open it again) then you need to hide the video by setting the iframe's dimensions back to 0 rather than using jQuery's hide() function.

Ugly, huh?

Edit: An alternative solution is to set the initial position of the iframe way offscreen where the user can't see it and then move it to the correct position when you display the video. Then move it back offscreen to hide it.

---

I had the same problem as leakybag and it really seems like the events aren't fired when the iframe was set to "display: none;" when the events were bound.

My solution to this was, that I only bound the vimeo api events once the iframe was visible (set to something else than "display: none;").

To be more precise, I had a slider with a vimeo video on each slide. So I passed a callback function with the vimeo event binding to the slider which gets executed every time the slide changes. The binding in the callback function then only targets the video in the active slide.

Hope this helps, I think this issue should be mentioned in the vimeo js api docs.

Edit: FYI I was using firefox 29.0!

---

I got around this by appending 'autoplay=1' to the iframe source when the element swap happens. Something like this:

iframe = $(this).find('iframe')
src = iframe.attr('src') 
src += '&autoplay=1'
iframe.attr('src', src)