Как воспроизвести первое видео в Slick.js на init

Question

У меня на сайте есть карусель slick.js, загруженная 3 видео. Я хочу, чтобы видео воспроизводилось, как только слайд, в котором они находятся, запускается и начинает воспроизводиться с начала видео, а не продолжается с того места, на котором они остановились ранее.

У меня оно работает через afterChange для воспроизведения видеокогда слайд загружен и приостанавливает слайдер, пока видео не заканчивается, но не может понять, как заставить те же функции работать для первого слайда. Я попытался добавить подобный код в функцию init, но, похоже, он не работает вообще. Я также не уверен, как заставить видео вернуться к началу.

$('.site-hero')
    .on('init', function (e, slick, currentSlide) {
        var vid = $(slick.$slides[currentSlide]).find('video');

        if (vid.length > 0) {
            $(vid).currentTime = 0;
            siteHero.slick('slickPause');
            $(vid).get(0).play();
        }
        $('video').on('ended', function () {
            siteHero.slick('slickPlay');
        });
    })
    .on('afterChange', function (e, slick, currentSlide) {
        var vid = $(slick.$slides[currentSlide]).find('video');

        if (vid.length > 0) {
            $(vid).currentTime = 0;
            siteHero.slick('slickPause');
            $(vid).get(0).play();
        }
        $('video').on('ended', function () {
            siteHero.slick('slickPlay');
        });
    });

Мои настройки slick.js:

$('.site-hero').slick({
    autoplay: true,
    autoplaySpeed: 11500,
    draggable: false,
    fade: true,
    speed: 10,
    pauseOnHover: false
});

Моя единственная мысль - возможно, функция initбыть запущенным до того, как элемент video готов или что-то еще, и поэтому не может сработать play.