Change the src attr on vimeo iframe after it has been loaded with the api

Question

I am not sure if the vimeo API allows this:

I have this html code:

  <iframe id="vm-player"
      src="http://player.vimeo.com/video/27855315?api=1&player_id=vm-player" 
      frameborder="0" 
      webkitAllowFullScreen mozallowfullscreen allowFullScreen>
  </iframe>

And I have this JavaScript code using the froogaloop.js from Vimeo:

  var iframe = $('#vm-player')[0];
  var vmPlayer = $f(iframe);
  function ready(player_id) {
    // Keep a reference to Froogaloop for this player
    var vmPlayer = $f(player_id);
  }

  $(window).bind('ready', function() {
      //Attach the ready event to the iframe
      $f(document.getElementById('vm-player')).addEvent('ready', ready);
    });

When I call the vmPlayer.api('play'); after this, it works. But after I change the src attribute on the iframe through JavaScript, the vmPlayer.api() calls doesn't do anything. It looks like it loses reference to the player somehow. This is how I change the src attribute through jQuery:

  function playVmVideo(id) {
    $('#vm-player').attr('src',
                         'http://player.vimeo.com/video/'
                         + id + '?api=1&player_id=vm-player');
    vmPlayer.api('play');
  }

Answer 1

I dunno if this helps, but try using the .prop() function instead of attr. It may help trigger the reload. The other thing, you can use an event callback on iframes to detect when it has loaded. Since you call the api function directly after resetting the src, it probably hasn't loaded. I believe the function for that is $('#vm-player').load(function(e) { vmPlayer.api('play'); });

If that load function doesn't work, it's because jQuery's load has been known to fire twice. Once on empty, and once on the true final load. If this is the case and it causes problems for you, you may have to go into some bare js window handling. Possibly like this, but NO gaurentees document.getElementById('iFrameID').contentWindow.onload(function() {vmPlayer.api('play');});