Как добавить своё фоновое видео в секцию Tilda через HTML-код: прямая ссылка на mp4, готовый код с autoplay/muted/loop и важные нюансы для мобильных.
Видео на фоне секции — приём, который оживляет первый экран. Если у вас есть свой ролик в mp4, его можно поставить фоном в любую секцию Tilda через блок с HTML-кодом. Понадобится прямая ссылка на видеофайл. Разберём пошагово и сразу с важными нюансами автозапуска.
Шаг 1. Получите прямую ссылку на mp4
Браузеру нужен прямой адрес самого видеофайла. Ссылки из облачных дисков обычно ведут на страницу-просмотрщик, а не на файл, поэтому фоном их не поставить. Загрузите mp4 в LF Drive и скопируйте прямую ссылку вида https://lfdrive.ru/f/КОД.
Шаг 2. Вставьте код в Tilda
Добавьте блок «Другое» → «HTML-код» (T123) в нужное место и вставьте:
<div style="position:relative;width:100%;height:520px;overflow:hidden;">
<video autoplay muted loop playsinline
style="width:100%;height:100%;object-fit:cover;"
src="https://lfdrive.ru/f/ВАШ_КОД"></video>
</div>
Замените ВАШ_КОД на код из ссылки. Высоту 520px поставьте свою. object-fit:cover растягивает видео на всю область без полей.
Важные нюансы автозапуска
- Без muted видео не запустится само. Браузеры блокируют автозапуск со звуком. Фоновое видео всегда без звука — атрибут muted обязателен.
- playsinline нужен для iPhone — иначе на iOS видео откроется на весь экран вместо фона.
- Сжимайте файл. Фоновое видео грузится при каждом заходе. Держите его коротким (5–15 сек, зацикленным) и сжатым, иначе страница будет тормозить на мобильных и съедать трафик.
- Подумайте о мобильных. На телефонах тяжёлое видео лучше заменять статичной картинкой — это экономит трафик посетителя.
Если нужен фон с оформлением
Базовый код выше ставит «чистое» видео. Если хочется наложить затемнение, текст поверх, плавное появление или управление — это уже оформленное решение. Посмотрите в видео, как такой фон выглядит на реальной странице:
Где хранить видеофайл
Чтобы ссылка на видео была постоянной и фон не пропал — держите mp4 в LF Drive. Загрузили — получили прямую ссылку для <video>. Есть бесплатный тариф, чтобы попробовать.
Частые вопросы
Видео не запускается автоматически — почему?
Скорее всего нет атрибута muted. Браузеры разрешают автозапуск только без звука. Добавьте muted (и playsinline для iOS).
Страница тормозит из-за видео
Файл слишком тяжёлый. Сократите длительность, сожмите видео и уменьшите разрешение — для фона редко нужно больше 1080p.
Можно ли наложить текст поверх фонового видео?
Да, но в базовом коде это не предусмотрено — нужно добавлять слой поверх видео. Готовое оформленное решение показано в видео выше.