Фоновое видео в Zero Block на Тильде: настройка и частые ошибки

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

Разберём по шагам: как подготовить сам файл, где в Zero Block включается фон, что делать с мобильными, почему браузер отказывается запускать видео и как замерить, во что вам обошлась красота.

Сразу оговорка про интерфейс: названия пунктов в панели Тильды время от времени меняются, поэтому ищите по смыслу - настройки блока, раздел с фоном, вариант «Видео».

Где включается фон и что важно знать заранее

Фон в Zero Block задаётся у блока целиком, а не у отдельного элемента на холсте. То есть видео будет подложкой под всем, что вы нарисовали внутри.

Откройте страницу и добавьте Zero Block, либо зайдите в уже существующий.
В редакторе холста откройте настройки блока, это шестерёнка на панели инструментов.
Найдите раздел с фоном и выберите вариант с видео.
Укажите адрес файла или загрузите ролик, сохраните и выйдите из редактора.

Одна деталь ломает больше настроек, чем всё остальное: у Zero Block высота задаётся вручную для каждого разрешения. Если высота нулевая или крошечная, фону просто негде показаться, и вы будете искать проблему в видео, а она в геометрии блока.

Подготовка ролика: длина, звук, вес

Фоновое видео - это не кино, а движущаяся текстура. Правила подготовки отсюда и вытекают.

Длина 6-15 секунд. Дольше не нужно: ролик всё равно крутится по кругу, а вес растёт линейно.
Звук удалить, а не приглушить. Звуковая дорожка занимает место, а браузер всё равно её не включит.
Разрешение 1280 по ширине хватает для фона в подавляющем большинстве случаев, 1920 берите только если в кадре есть мелкие детали.
Формат MP4 с кодеком H.264. Это то, что играет везде, без сюрпризов на старых устройствах.
Цель по весу - до 2-3 МБ. Всё, что тяжелее, вы почувствуете на мобильном интернете.

Пожать файл проще всего через ffmpeg одной командой: ffmpeg -i source.mp4 -an -vf scale=1280:-2 -c:v libx264 -crf 28 -preset slow -movflags +faststart bg.mp4. Здесь -an убирает звук, crf отвечает за качество (больше число - меньше вес), а +faststart переносит служебные данные в начало файла, чтобы видео начинало играть, не дожидаясь полной загрузки.

Отдельно подберите фрагмент, где первый и последний кадр похожи. Иначе на каждом обороте петли будет заметный рывок, и посетитель будет цепляться взглядом именно за него.

Файл, внешняя ссылка или YouTube

Источников фона обычно три, и у каждого своя цена.

Загрузить файл в Тильду. Самый простой путь, но на вес загружаемых файлов есть ограничение, оно зависит от тарифа и видно прямо в окне загрузки.
Положить mp4 на своё хранилище и дать прямую ссылку. Больше контроля, но адрес обязан быть на https, иначе браузер вырежет запрос молча.
Вставить ссылку на YouTube. Трафик не ваш, зато на страницу приезжает целый плеер в iframe, а в России ролики оттуда грузятся нестабильно.

Для фона я бы выбирал mp4 и не связывался с внешними плеерами. Если видео с YouTube у вас уже стоит и капризничает, про причины есть отдельный разбор: почему не работает видео с YouTube и чем его заменить.

Настройка вида: затемнение, постер, кадрирование

Голое видео под текстом почти всегда даёт нечитаемый первый экран: в ролике есть светлые кадры, и белые буквы на них исчезают.

Поставьте затемнение поверх видео. Полупрозрачный тёмный слой на 30-50 процентов решает проблему контраста разом.
Задайте постер - картинку, которая показывается, пока видео грузится или если оно не запустилось. Возьмите кадр из самого ролика, чтобы переход был незаметным.
Проверьте кадрирование: фон растягивается по блоку, и на широком мониторе вы увидите одну часть кадра, а на ноутбуке другую. Главный объект держите ближе к центру.

Проверять читаемость нужно не на статичном скриншоте, а на воспроизведении. Промотайте ролик целиком и посмотрите, не пропадает ли заголовок на самых светлых секундах.

Мобильные: чаще всего фон лучше выключить

На телефоне фоновое видео проигрывает почти по всем статьям. Мобильный трафик платный, экран вертикальный, а горизонтальный кадр при этом обрезается до неузнаваемой полоски.

Если в настройках фона есть опция отключить видео на мобильных, включите её и поставьте вместо него картинку.
Если такой опции в вашей версии панели нет, сделайте два блока: один с видео, второй с картинкой, и спрячьте каждый на ненужных разрешениях через настройки отображения блока.
Проверьте результат переключением разрешений в редакторе: 640, 480 и 320 - именно те, где обычно всё разъезжается.

Есть и обратная сторона: два блока вместо одного придётся править дважды. Меняете текст на первом экране - не забывайте про дубль, иначе на телефонах останется прошлогодняя акция.

Почему видео не запускается

Жалоба «поставил фон, а он не играет» почти всегда сводится к одной из шести причин.

В файле осталась звуковая дорожка. Браузеры запрещают автозапуск со звуком, и видео просто не стартует. Уберите звук из файла.
На iOS не хватает воспроизведения внутри страницы. Плеер Тильды это учитывает, но собственные вставки без нужных атрибутов открывают видео на весь экран или не играют вовсе.
На телефоне включён режим энергосбережения. В нём автозапуск блокируется системно, и сделать с этим ничего нельзя - спасает только постер.
Кодек не тот. HEVC, 10-битный цвет и экзотические контейнеры играют не везде. Пережмите в H.264.
Ссылка битая или ведёт на http. Откройте адрес файла напрямую в браузере: если видео не открылось там, дело не в Тильде.
Страница не опубликована после правки. Классика, которая съедает больше времени, чем все остальные пункты вместе.

Диагностика занимает минуту: F12, вкладка Network, перезагрузка страницы, поиск запроса с вашим файлом. Статус 200 и растущий объём означают, что файл грузится, и проблема в воспроизведении. Красная строка или 404 означают, что до файла дело не дошло.

Проверка скорости до и после

Фоновое видео - это самый тяжёлый элемент, который вы можете добавить на первый экран. Поэтому замерять надо не «на глаз», а числами, и обязательно до включения.

Замерьте страницу в PageSpeed Insights на мобильной вкладке, запишите общую оценку и время появления главного элемента.
Откройте F12, вкладку Network, включите ограничение скорости на уровне медленного 4G, перезагрузите страницу и запишите итоговый вес.
Включите фоновое видео, опубликуйте страницу и повторите оба замера на том же адресе.
Сравните: насколько вырос вес, насколько сдвинулось время до первого осмысленного экрана.

Ориентир простой. Если страница потяжелела на пару мегабайт, на медленном мобильном это лишние секунды белого экрана. Иногда эффект того стоит, иногда честнее оставить хорошую фотографию и не платить скоростью за движение.

Когда фоновое видео не решает задачу

Фон - декорация. Его не смотрят, у него нет звука, он ничего не объясняет и ни в чём не убеждает. Если задача была «показать продукт в работе» или «дать слово клиентам», фоновая петля её не выполнит, каким бы красивым ни был ролик.

Для таких задач нужен формат, который человек включает осознанно: видео с управлением в нужном месте страницы или короткие сторис, которые открываются по клику. Мы в Viwi как раз про второй сценарий - виджет ставится одной строкой скрипта, а вес страницы почти не растёт, потому что ролик грузится только после нажатия.

Хороший компромисс встречается часто: спокойный видеофон на первом экране плюс отдельный блок с содержательным видео ниже. Как добавить второе, разобрано в инструкции про видео на сайте.

Частые вопросы

Какой длины должно быть фоновое видео?

Обычно хватает 6-15 секунд с зацикленной петлёй. Более длинный ролик всё равно никто не досмотрит, а вес файла вырастет пропорционально. Подберите фрагмент, где первый и последний кадр похожи, иначе на стыке петли будет заметный рывок.

Почему фоновое видео не играет на iPhone?

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

Можно ли поставить видео с YouTube как фон в Zero Block?

Технически можно, но на страницу приедет плеер в iframe со своей загрузкой и брендингом, а доступность роликов в России нестабильна. Для фона надёжнее собственный mp4 весом в пару мегабайт. YouTube имеет смысл только тогда, когда видео действительно смотрят, а не используют как текстуру.

Насколько фоновое видео замедляет сайт?

Ровно настолько, сколько весит файл, и заметнее всего на мобильном интернете. Замерьте страницу в PageSpeed Insights и во вкладке Network до включения фона и после - разница в весе и во времени появления первого экрана будет видна сразу. Если рост получился в несколько мегабайт, ролик стоит пережать или оставить только на десктопе.