Видео внутри слайда

Управление видео (<video> и iframe YouTube/Vimeo) внутри слайдов.

Интерактивный пример

Живой пример

Видео внутри слайда

6 слайдов

HTML, CSS и JS в этих вкладках используются в предпросмотре.

Настроить свой →

Базовое использование

Видео внутри слайдов — просто содержимое, без data-атрибутов:

Опции video

Autoplay + видео

Ключевая возможность — waitForVideo: автопрокрутка ждёт окончания видео на видео-слайдах, а для фото-слайдов использует стандартный таймер.

Hero-баннер с фоновым видео

Управление звуком

Все видео стартуют с muted: true — это обязательно для автовоспроизведения в браузерах. Звук можно включить после жеста пользователя:

Прогресс-бар

Используйте единый контракт: autoplayProgress всегда про активный сегмент (текущий слайд). Для HTML <video> при waitForVideo: true этот прогресс синхронизирован с реальным временем видео.

Пауза видео на удержании

YouTube / Vimeo iframe

Для iframe-видео управление только через GET-параметры. Модуль автоматически добавит нужные параметры:

События

Публичное API

Как выключить autoplay

Способ	Описание
`autoplay: false`	Полностью выключен (по умолчанию)
Не указывать `autoplay`	Эквивалентно `false`
`slider.autoplay.stop()`	Программно остановить
`slider.autoplay.pause()`	Пауза (потом `resume()`)
`updateOptions({ autoplay: false })`	Динамическое выключение
`autoplay: { disableOnInteraction: true }`	Выключится после первого взаимодействия

Подводные камни

Autoplay Policy браузеров

Видео может автоматически воспроизводиться только если оно muted. Всегда стартуйте с muted: true и предоставляйте кнопку для включения звука.

iOS Safari

Требует атрибут playsinline, иначе видео открывается на весь экран
После unmute нужен хак с currentTime (модуль делает это автоматически)
В Low Power Mode autoplay может быть отключён

play() Promise

video.play() возвращает Promise. При быстром переключении слайдов может возникнуть AbortError — модуль обрабатывает это автоматически.