Youtube iframe Api - onPlayerStateChange не вызывает проблемы (функция автоматического воспроизведения YouTube и Slick)

Question

Требование: я работаю над функционалом, используя Youtube iframe api и slick.js.Это карусель с несколькими видео и изображениями, при этом для автоматического воспроизведения установлено значение true. Если это видео, то должно воспроизводиться полное видео, а затемперейдите к следующему слайду. И цикл автозапуска продолжится.

Проблема: - В настоящее время моя проблема заключается в том, что после воспроизведения видео автозапуск не возобновляется, и видео продолжает воспроизводиться в цикле. Обратный вызов onPlayerStateChangeYouTube iframe api не запускается

$(document).ready(function () {
$(window).on('load',function () {

        $(".main-slide").slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            dots: true,
            autoplay: true,
            autoplaySpeed: 1500,
            infinite: true,
            pauseOnHover:false,
            pauseOnFocus:false
        });



        $('.main-slide').on('afterChange', function (event, slick, afterCurrentSlide, nextSlide) {

                if($(slick.$slides[afterCurrentSlide]).find(".youtubeFrame").length > 0) {
                    $('.main-slide').slick('slickPause');
                    var dataValue = $(slick.$slides[afterCurrentSlide]).find(".youtubeFrame").attr('id').slice(-1);
                    if(player[dataValue] != undefined){
                    if(player[dataValue].j.playerState == 5 || player[dataValue].j.playerState == 2 || player[dataValue].j.playerState == 0 ||  player[dataValue].j.playerState == -1) { 
                        var image = new Image();
                        image.onload = function(){
                            player[dataValue].playVideo();
                        }
                        image.src = "http://youtube.com/favicon.ico";
                    }
                }
                } else {
                    $('.main-slide').slick('slickPlay');
                }

        });


        $('.main-slide').on('beforeChange', function (event, slick, beforeCurrentSlide, nextSlide) {

                if($(slick.$slides[beforeCurrentSlide]).find(".youtubeFrame").length > 0) {
                var dataValue = $(slick.$slides[beforeCurrentSlide]).find(".youtubeFrame").attr('id').slice(-1);
                if(player[dataValue] != undefined){
                    if(!player[dataValue].j.playerState == 0) { 
                        var image = new Image();
                        image.onload = function(){
                            player[dataValue].pauseVideo();
                        }
                        image.src = "http://youtube.com/favicon.ico";
                    }
                }
            }      
        });

        $.fn.isInViewport = function() {
            var elementTop = $(this).offset().top;
            var elementBottom = elementTop + $(this).outerHeight();

            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();
            return elementBottom > viewportTop && elementTop < viewportBottom;
        };


            $(window).on('resize scroll', function() {
                $('.banner-image').find('.videoContainer').each(function() {   
                    if($(this).parents('.slick-active').length) {
                        // if(player[dataValue] != undefined) {
                            if ($(this).isInViewport()) {
                                var dataValue = $(this).find('.youtubeFrame').attr('id').slice(-1);
                                var image = new Image();
                                image.onload = function(){
                                    if(player[dataValue] != undefined) {
                                        player[dataValue].playVideo(); 
                                    }
                                }
                                image.src = "http://youtube.com/favicon.ico";
                            } else {
                                var dataValue = $(this).find('.youtubeFrame').attr('id').slice(-1);
                                var image = new Image();
                                image.onload = function(){
                                    if(player[dataValue] != undefined) {
                                        player[dataValue].pauseVideo();
                                    }
                                }
                                image.src = "http://youtube.com/favicon.ico";
                            }
                        // }
                    }
                });
            });
        });

 });

Я инициализировал пятно внутри $ (window) .on ('load'), потому что, если я инициализировал его только внутри document.ready, видео не воспроизводилось в порядке, указанном мной.

Буду очень признателен за помощь в решении этой проблемы.