Как поставить фоновое видео на Tilda по прямой ссылке

Видео на фоне секции — приём, который оживляет первый экран. Если у вас есть свой ролик в 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 сек, зацикленным) и сжатым, иначе страница будет тормозить на мобильных и съедать трафик.
• Подумайте о мобильных. На телефонах тяжёлое видео лучше заменять статичной картинкой — это экономит трафик посетителя.

Если нужен фон с оформлением

Базовый код выше ставит «чистое» видео. Если хочется наложить затемнение, текст поверх, плавное появление или управление — это уже оформленное решение. Посмотрите в видео, как такой фон выглядит на реальной странице: