Click of arrows navigates multiple videos using YOUTUBE iframe

Question

I have my video set up with the video loading and you can click images underneath to navigate through other videos. I used this solution Click Loads multiple videos using YOUTUBE Iframe

Seen on this fiddle: http://jsfiddle.net/Y9j7R/5/

I want to be able to navigate through these videos also with prev/next arrows. Any help is appreciated. Also, is the solution I used the best way to do this, I couldn't find anything else. Thanks

Answer 1

I solved this by creating nextOrFirst and prevOrLast functions and triggering clicks on the arrows. Code seen here:

// Fake click for video arrows //

// Adds function nextOrFirst() //
jQuery.fn.nextOrFirst = function(selector){
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
}

// Adds function prevOrLast() //
jQuery.fn.prevOrLast = function(selector){
var prev = this.prev(selector);
return (prev.length) ? prev : this.nextAll(selector).last();
}

$(".icon-video-left-arrow").click(function() {
$(".fader.active").prevOrLast().trigger("click");
});

$(".icon-video-right-arrow").click(function() {
$(".fader.active").nextOrFirst().trigger("click");
});