Видео в карточках TE100 на Tilda: наведение и просмотр на телефоне

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

Конструктор видео для TE100 добавляет ролики как фон карточек. Это не обычный плеер с управлением и звуком. Разберём подготовку файлов, их порядок и разницу между мышью и телефоном.

Подготовьте прямые ссылки на MP4-файлы и проверьте их доступность в браузере. Ссылка на страницу просмотра YouTube или Vimeo не заменяет адрес файла. Ролик должен быть коротким и понятным без звука.

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

Добавьте блок TE100 и заполните изображения и тексты. В конструкторе укажите видеоссылки в порядке карточек на странице. Если роликов меньше, список повторяется по кругу.

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

Текущий код обрабатывает найденные карточки TE100 на странице. В интерфейсе нет отдельного выбора блока по номеру или классу. Проверьте всю страницу, а не только тот ряд, на котором впервые заметили эффект.

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

Выберите высоту, ширину карточки при наведении, промежутки, боковые отступы и плавность. Решите, показывать ли изображение-превью. Посмотрите, как меняется место для текста при раскрытии соседней карточки.

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

На компьютере проверьте запуск при наведении и остановку после ухода указателя. На телефоне нажатие включает или приостанавливает ролик. При запуске другого предыдущее останавливается; нажатие вне карточек тоже останавливает активное видео.

В текущем конструкторе нет переключателей звука и стандартной панели управления. Если посетителю нужно смотреть урок, перематывать и регулировать звук, используйте подходящий видеоблок. Фоновая карточка решает другую задачу — короткое знакомство с проектом.

1. Подготовьте TE100 с картинками и текстами.
2. Добавьте свои прямые MP4-ссылки в нужном порядке.
3. Настройте раскрытие и мобильный ряд.
4. Установите код в T123 после TE100 и опубликуйте страницу.
5. Проверьте каждый ролик, остановку, ссылки и горизонтальную прокрутку на телефоне.

Превью конструктора показывает геометрию и раскрытие. Ваши файлы и правила воспроизведения браузера проверяются на сайте. Если видео не запускается, начните с доступности MP4, а не с изменения высоты карточки.

Читайте также: Lottie-анимация в Tilda: как добавить в Zero Block и настроить запуск · Галерея как в Pinterest на Tilda: сетка и увеличение фото.