Swiper YouTube Не отображает видео, кроме первого на мобильных

Рейтинг: 0Ответов: 1Опубликовано: 26.05.2023

На десктопе всё ок, а на моб нет. Стоит показ по одному слайду, все остальные, где есть видео не отображают предпросмотр с фото и кнопкой. Я понимаю почему - для экономии трафика и нагрузки. Но как мне их отобразить при активации любого слайда, кроме первого? Выходит, у меня первый слайд работает, как надо, а все остальные - пустота, хотя с вёрсткой всё ок. Пытался вручную на странице удалить html iframe и вставить ещё раз - видео все равно не грузится.

const video = new Swiper('.video-slider ', {
    slidesPerView: 1, 

      navigation: {
       nextEl: '.video-button-next',
       prevEl: '.video-button-prev',
    },


    breakpoints: {  
    992: {
       pagination: {
           el: '.video-pagination',
           type: 'bullets',
           clickable: true
        },
    },
}
javascript jquery swiper.js youtube
Источник: Stack Overflow на русском

Ответы

▲ 1

Вы можете использовать обработчик событий onSlideChange для Swiper, чтобы проверять, какой слайд активен, и загружать видео и отображать предпросмотр и кнопку только для этого слайда.

Например:

const video = new Swiper('.video-slider ', {
    slidesPerView: 1,

      navigation: {
       nextEl: '.video-button-next',
       prevEl: '.video-button-prev',
    },

    breakpoints: {
    992: {
       pagination: {
           el: '.video-pagination',
           type: 'bullets',
           clickable: true
        },
    },
},

    on: {
        slideChange: function () {
            const activeSlide = this.activeIndex;
            const videoIframe = document.querySelector(`.swiper-slide[data-swiper-slide-index="${activeSlide}"] video`);
            videoIframe.src = videoIframe.dataset.src;
            const preview = document.querySelector(`.swiper-slide[data-swiper-slide-index="${activeSlide}"] .video-preview`);
            const button = document.querySelector(`.swiper-slide[data-swiper-slide-index="${activeSlide}"] .video-button`);
            preview.style.display = "block";
            button.style.display = "block";
        }
    }
});

Вы также можете добавить обработчики событий для других событий Swiper, таких как init, чтобы загрузить первый слайд на странице, и lazyImageReady, чтобы загрузить остальные видео, когда они становятся видимыми.

Надеюсь, это поможет)