I have been working on a friends site trying to fix up his implementation of flexslider so that if a vimeo video is playing and the user switches to another slide it will pause that video. I am having issues with using froogaloop and jquery in this context. Here is some code I have been trying:
(function () { jQuery('.flexslider').flexslider({
slideshowSpeed: slideshowDelay+"000",
directionNav: false,
animation: "fade" ,
after: function (slider)
{
console.log("next");
var currentSlide = slider.currentSlide;
var slides = slider.slides;
jQuery(slides).each( function (i)
{
if(i != currentSlide)
{
var slide = jQuery(slides[i]);
jQuery(slide).attr({class : 'slide_selector'})
var vimeo = jQuery('.slide_selector iframe');
if(vimeo.length !== 0)
{
var src = jQuery(vimeo).attr('src')
var controlObject = {"method" : "pause" };
var domWindow = vimeo[0].contentWindow;
jQuery(vimeo[0]).bind('ready' , function
{
console.log("PlayerId: "+ player_id)
froogaLoop(player_id).api('pause');
});
}
}
})
}
});
showProject(projectSlug);
});)
So this has not worked in any way. I read that I was supposed to use an init function in the Froogaloop framework but running Froogaloop.fn.init (only way to reach it) told me that nothing I put into it had a getAttributes property. This has all been rather confusing. I think my main question is how do i initialize these iframes with froogaloop?
note. I replaced $ f with froogaLoop in my version of the library since $ seems to interfere with wordpress.
