Как поставить видео в Zero Block и не получить чёрный экран
Чтобы поставить MP4 вместо картинки, дизайнеру не нужен случайный код из чата: видео-элемент Zero Block уже умеет автозапуск, цикл, режим без контролов и заполнение рамки. Главная ловушка — смешать три разные вещи: запрет браузера на автоплей со звуком, настройки самой Тильды и первый кадр, который ещё не успел загрузиться. Разложим их по порядку и оставим модификации только последнюю узкую задачу.
Видео часто ставят в первый экран ради одной простой роли: оно должно выглядеть как живая фотография. Без панели управления, без отдельной страницы плеера и без просьбы нажать Play. Из-за этого дизайнеры ищут «видео в шейп» или готовый HTML, хотя большая часть задачи уже решается самим Zero Block.
Короткий ответ
Добавьте штатный видео-элемент, используйте прямой MP4 или WebM, включите цикл и
автозапуск, выключите звук и при необходимости скройте контролы. Для заполнения
рамки используйте режим, аналогичный cover. Проверяйте на опубликованной
странице и настоящем телефоне. Модификация нужна только для своего постера без
дополнительного клика.
Что Zero Block уже умеет
В коде видео-элемента есть отдельные настройки для:
- MP4 и WebM;
- автозапуска;
- повтора по кругу;
- выключенного звука;
- скрытых контролов;
- времени начала и окончания;
- заполнения всей рамки с обрезкой по краям;
- воспроизведения внутри страницы на мобильном устройстве.
То есть задача «сделать видео как GIF» не начинается с блока T123. Она начинается с правильных полей самого элемента.
Настройка для декоративного видео
Если ролик не несёт обязательной информации и работает как часть композиции, настройка обычно выглядит так:
- Короткий MP4 без длинной заставки.
- Автозапуск включён.
- Звук выключен.
- Цикл включён.
- Контролы скрыты.
- Заполнение рамки включено, если видео должно вести себя как фотография.
Смысл пункта про звук не в Тильде. Браузер защищает посетителя от страниц, которые начинают говорить сами. Код не может надёжно отменить это правило на всех устройствах. Если клиенту нужен звук, дайте отдельную кнопку «Включить звук» после первого действия пользователя.
Почему в редакторе и на сайте поведение разное
Редактор нужен для расстановки элементов, а не для полноценного запуска медиа. Тильда отдельно проверяет режим редактирования и не обязана запускать там ролик так же, как на опубликованной странице.
Проверяйте три состояния:
- опубликованная страница на компьютере;
- опубликованная страница на iPhone или iPad;
- медленная сеть, где первый кадр появляется не сразу.
Третий пункт обычно и показывает настоящий дефект: место под видео уже есть, а сам ролик ещё загружается.
Обложка с кликом и постер без клика — не одно и то же
У штатного видео есть обложка, но она означает «сначала картинка, затем запуск по нажатию». Для интервью или ролика с сюжетом это нормальный сценарий.
Для декоративного автоплея клик не подходит. Посетитель не должен запускать фоновое движение вручную. Без клика Тильда ставит белый индикатор загрузки, пока видео не готово. На тёмном дизайне он заметен, а на медленной сети может висеть несколько секунд.
MOD-169 задуман именно для этой границы: показать заранее выбранную картинку сразу и убрать её после готовности первого кадра. Он не превращает обычное видео в автоплей и не меняет решения дизайнера про звук.
Как подготовить файл для клиента
Даже правильные настройки не спасут слишком тяжёлый ролик. Перед передачей сайта проверьте:
- в начале нет секунды чёрного экрана;
- петля соединяется без заметного скачка;
- важные детали не обрезаются на мобильном формате;
- текст и кнопка поверх видео читаются на светлом и тёмном кадре;
- без видео первый экран всё равно понятен;
- файл хранится там, доступ к чему останется у клиента.
Последний пункт особенно важен для подрядчика. Ссылка на личный Dropbox дизайнера работает ровно до смены аккаунта или тарифа. Клиент должен знать, где лежит исходник и кто оплачивает его хранение.
Что передать клиенту вместе с сайтом
Запишите четыре вещи одной заметкой:
- Где заменить файл видео.
- Какое соотношение сторон у исходника.
- Какие настройки включены у элемента.
- Где хранится постер и кто имеет к нему доступ.
Так клиент сможет заменить ролик, не открывая код и не вызывая дизайнера ради одной ссылки.
Финальная проверка
- Автоплей работает без звука после публикации.
- На телефоне видео остаётся внутри рамки.
- При отключённом автоплее остаётся понятный ручной запуск.
- При плохой сети макет не показывает пустую дыру.
- При ошибке загрузки текст и основная кнопка доступны.
- Режим уменьшенного движения не оставляет важную информацию только в ролике.
Если все пункты, кроме первого кадра, закрываются настройками — не добавляйте чужой видеоплеер. Чем меньше владельцев у одного элемента, тем спокойнее сайт переживёт следующую правку клиента.