Можно ли добавить видео с swiper.js?

Question

[dualdeazz]

У меня есть слайдер swiper.js такого типа

При попытке вставить видео через тег , либо через с YouTube, то в нижней полоске слайдера видео имеется, но при этом оно не кликабельно и не выводится в основной блок слайдера. Вопрос такой, можно ли вообще каким-то образом добавить видео в этот слайдер, или здесь не предусмотрена такая функция?

Comments

[dualdeazz]

Ссылка на скриншот
https://prnt.sc/660FCNk3Tgtm

Answer 1

[Aldadis]

Можно, через iframe
Пример

Само видео добавляйте в основной слайдер, в thumbs лучше добавить скриншот из видео иначе оно просто по клику на миниатюру будет воспроизводиться и смены слайда не будет. Как вариант можно поверх миниатуры повесить какой-то прозрачный блок чтобы клик тригерился уже по нему и не по самому плееру.

Comments

[dualdeazz]

Можете, пожалуйста подсказать, как можно добавить скриншот в thumbs? Ибо при добавлении в swiper-slide iframe'а оно отображается в thumbs,но почему-то абсолютно не кликабельно.

[Aldadis]

Набросал вариант с псевдоэлементом поверх миниатюр
Пример

[dualdeazz]

Aldadis, Спасибо большое! Я закидывал видео в thumbs не понимая, почему оно его нет в основном контейнере)

[Павел Сидоров]

Aldadis, друг, в твоем скрипте , ты останавливаешь видео с ютуба , отправляя ему меседж во фрайм.
А ты не сталкивался с рутубом? как в рутуб отправить такой месседж? можешь написать?

[Павел Сидоров]

Aldadis,

youtubePlayer.contentWindow.postMessage(JSON.stringify({
                    type: 'player:pause',
                    data: {}
                    }), '*');

вдруг, кто искать будет