when reach the 4th slide, restart the video

Question

I'm using Flexslider and in the 4th slide, I have a youtube video that used YTPlayer

here's the html structure of the 4th slide

<li>
    <div class="player" data-video-id="ASDsad65w9e52" data-start-at="0>
    </div>
</li>

and the javascript on detecting when it reach the 4th slide, I simply used 'end' parameter

$('#home-slider').flexslider({
    end : function(){

    }
});

and then when it reached the 4th slide or simply the end slide then re-initialized the YTPlayer to play the video on the start or simply play again.

$('#home-slider').flexslider({
    end : function(){
        $("#home-slider .player").YTPlayer();
    }
});

But unfortunately, its not working, instead it gives me this error

Uncaught TypeError: $(...)[0].YTPPlay is not a function at Object.end (scripts2.js:310) at m.fn.init.a.flexAnimate (flexslider.min.js:1) at a.animateSlides (flexslider.min.js:1)

Any ideas, help please?

Answer 1

Try this

$("#home-slider .player").YTPPlay();

For more reference look up

https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

move the following code to $(window).load()

if ($('.player').length) {
    $('section').closest('body').find(".player").YTPlayer();
}

$('.slider-all-controls').flexslider({
    end: function() {
        $('#home-slider .player').YTPlayer();
    }
});

note your ytp looks like older version, it does not support YTPPlay() it uses playYTP();

though you will need to refactor you code in the site..its way too scrambled