Vimeo custom play/pause button not working on Ipad

Question

I've used vimeo api and created custom play pause button for playing vimeo videos on my site. It's working on every device but not on Ipad. When I click on play button on Ipad it won't do any thing. My code for IOS devices is

var vidplaypop = $(this).data('vid');
  var iframeid = document.getElementById(vidplaypop);
  var iframehref = $("#"+vidplaypop).attr('src');

  $('.play-button[data-vid=' + vidplaypop + ']').on("click", function() { 
    var vidplay = $(this).data('vid'); 
    $(this).closest('.vid-top,.frame-video-lrg').find('iframe').attr('id',vidplay); 
    var iframe = document.getElementById(vidplay); 

    // $f == Froogaloop
    $f(iframe).api("play");
    $f(iframe).api("setVolume",1);
});

any help would be appreciable.

Thanks Ali