Получить консультацию

Кратко о видео

В уроке показана вёрстка фонового видео: абсолютное позиционирование для виджета видео, настройка статического позиционирования родительского контейнера (иначе видео позиционируется относительно неправильного блока), Z-index для размещения контента поверх видео. Настройки виджета: автовоспроизведение, зацикливание, скрытие элементов управления, обложка до старта. Для фонового видео обязательно автовоспроизведение без звука — иначе браузер не запустит видео сам. Виджет видео в Taptop доступен на платных тарифах. Тяжёлые видеофайлы замедляют загрузку — оптимум для фонового видео 5-10 МБ. Урок для тех, кто добавляет визуально насыщенную hero-секцию с видео. Понимание абсолютного позиционирования и Z-index нужно как предварительная база.

Как добавить видео на фон в Taptop

Хочешь видео на фон секции — атмосферную заставку вместо статичной картинки. Как сделать это в Taptop? Как запустить автовоспроизведение? Что показывается, пока видео грузится?

Фоновое видео: виджет видео с включённым автовоспроизведением, скрытые элементы управления. Обложка обязательна — если видео не прогрузится, пользователь увидит изображение. Доступно на платных тарифах. Для всех, кто делает hero-секцию с видео. После просмотра настраиваешь фоновое видео с правильным фоллбэком.

Тайминги видео

00:00 — Проблема: почему контент нельзя положить поверх виджета видео 01:30 — Структура верстки: секция, контейнер, div контента и виджет видео 03:00 — Настройки виджета: скрыть управление, автовоспроизведение, зацикливание 05:00 — Абсолютное позиционирование для видео и статическое для контейнера 07:30 — Z-index: поднять блок с контентом поверх видео 09:00 — Наполнение контентом и итоговый результат