Using Vimeo Javascript API to fade in/out title overlay

Question

I am using the Vimeo Javascript API to fade in/out title overlays on the videos.

It's not quite working as it should as I want to have multiple videos on one page.

Here's the current JS:

var animSpeed = 400;

function onPlay(id) {
    jQuery('.title').fadeOut(animSpeed);
}

function onPause(id) {
    jQuery('.title').fadeIn(animSpeed);
}

function onFinish(id) {
    jQuery('.title').fadeIn(animSpeed);
}

jQuery(function($) {

    var iframe = $('#vplayer')[0],
    player = $f(iframe);

    player.addEvent('ready', function() {
        player.addEvent('play', onPlay);
        player.addEvent('pause', onPause);
        player.addEvent('finish', onFinish);
    });

    $('.title').click(function(){ $(this).fadeOut(animSpeed);  player.api('pause'); });

});

http://codepen.io/niallthompson/pen/LVxdXa/

Answer 1

You have to iterate over each iframe and create a vimeo instance. You can do something like this

var animSpeed = 400;

function onPlay(id) {
  var title = $('#' + id).closest('article').find('.title'); // <---- id is iframeID. From there you have to find the .title
  title.fadeOut(animSpeed);
}

function onPause(id) {
  var title = $('#' + id).closest('article').find('.title');
  title.fadeIn(animSpeed);
}

function onFinish(id) {
  var title = $('#' + id).closest('article').find('.title');
  title.fadeIn(animSpeed);
}

jQuery(function($) {

  var iframes = $('iframe');
  $.each(iframes, function(i, v){
    var player = $f(this);
    $(this).data('player', player); // <------ storing vimeo player instance in Data
    player.addEvent('ready', function() {
      player.addEvent('play', onPlay);
      player.addEvent('pause', onPause);
      player.addEvent('finish', onFinish);
    });
  });

  $('.title').click(function(){ 
    $(this).fadeOut(animSpeed);  
    var player = $(this).closest('article').find('iframe').data('player'); <---- Fetch the vimeo player instance from data attribute of iframe
    player.api('pause'); 
  });

});

Here is a demo http://codepen.io/anon/pen/doNgGW