Гид по видеоблокам в Tilda

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

Видео в Tilda можно встроить через стандартные блоки и конструктор Zero Block. Разбираем особенности и ограничения обоих подходов, а также распространенные форматы видеоконтента.

Видео в стандартных блоках

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

Для примера возьмем стандартный VD01. Наводим мышку на блок, нажимаем на кнопку «Контент» и указываем источник или формат видео: YouTube, Rutube, VK Видео, WEBM, MP4 или другое.

Ролик можно вставить двумя способами:

• Дать ссылку на опубликованное видео со внешнего видеохостинга или собственного сервера.
• Загрузить в Tilda новый видеофайл.

Дополнительно можно добавить изображение-обложку. 

В разделе «Шапка блока» опционально прописываем заголовок и описание. 

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

Существенно переработать дизайн нельзя, но можно адаптировать его под свои задачи. К примеру, для инструкции будет удобно автоматическое воспроизведение видео, т.к. ролик показывает порядок действий.

Скругление углов, анимация, тени выделяют блок на общем фоне и делают его более эстетичным. 

Результат: ролик проигрывается автоматически. 

Этот же пример с гайдом можно обыграть по-другому. 

Берем другой стандартный блок с шаблоном для текста и видео. Даем развернутую инструкцию на словах и сопровождаем ее кратким демонстрационным роликом. 

Автовоспроизведение в этом случае не нужно: пользователь сначала прочитает текст, а потом запустит видео в удобный момент.

Стандартных блоков хватает для проектов без сложного дизайна и строгой стилизации. Шаблоны Tilda отличаются гибкостью: можно менять цвета, шрифты, добавлять и удалять объекты. Основная трудность в том, что элементы нельзя свободно двигать и оформлять произвольным образом. Как бы мы не редактировали блок, общая композиция остается такой, какой ее задумали дизайнеры. Обойти это ограничение помогает нулевой блок — это встроенный конструктор с полной кастомизацией.

Видео в zero-блоках

Первым шагом создаем нулевой блок: нажимаем на Zero в нижнем меню. Наводим на него мышку и кликаем по оранжевой кнопке «Редактировать блок».

Нажимаем на иконку со знаком «+» в левом верхнем углу. В открывшемся меню выбираем видео — в рабочем поле появится темный прямоугольник.

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

Видео в zero-блоке — это отдельный объект, который можно настраивать по своему усмотрению. Окошко можно двигать, растягивать, сжимать как угодно. 

Рассмотрим такой сценарий: в нашем видео много мелких элементов, поэтому мы хотим сделать его побольше. Увеличиваем окошко по ширине всего Grid-контейнера, то есть рабочего пространства. Устанавливаем автовоспроизведение и зацикливание, чтобы ролик не приходилось запускать вручную.

Чтобы видео не сливалось с остальными блоками, добавляем скругление углов 30 px в разделе «Обводка» и темную тень с небольшим размытием — так объект будет выглядеть объемнее.

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

Проверяем на предпросмотре: блок скруглен, тень видна полностью, видео проигрывается автоматически.

Блок с текстовым описанием можно собрать самостоятельно. Уменьшаем видео, располагаем равномерно по колонкам. Добавляем текст через то же самое меню под знаком «+».  

Для текстовых блоков настраиваем шрифт, размер, начертание. Стандартных форматов заголовков здесь нет, все параметры нужно устанавливать вручную. Это немного дольше, зато можно реализовать любую задумку. 

Одна из сложностей при работе с zero-блок — адаптация под разные экраны. Первично мы делаем дизайн для ПК, поэтому на более мелких устройствах элементы уползают или вообще вылетают за пределы экрана.

Дизайн адаптируют вручную: уменьшают размер текста и других элементов, а иногда еще и меняют расположение. 

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

В некоторых случаях нужно полностью перерабатывать дизайн под маленькие экраны: сокращать текст, прятать одни элементы и добавлять другие. Zero-блок — отличный инструмент для кастомизации, но важно учитывать потенциальный объем работы.

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

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

HTML5-видео. Современный формат, который часто используют для баннеров. Отличается высокой производительностью и совместимостью с любыми устройствами и браузерами. Если вы размещаете рекламу у себя на сайте, этот формат актуален. 

Как добавить HTML5-видео в Tilda:

1. Создать файл в WEBM или MP4 — для этого можно прогнать видео через онлайн-конвертер.
2. Разместить готовый ролик на хостинге и получить прямую ссылку на файл. Обычно эта опция доступно только платно, стандартные хранилища вроде Google Drive не подойдут.
3. Вставить ссылку в видеоблок Tilda.

После этого ролик появится на странице.

Обложка с видео. Ролик можно вставить вместо статичного изображения, чтобы сделать дизайн динамичнее. В разделе «Контент» находим поле для добавления картинок и видео — вставляем ссылку/загружаем нужный файл.  

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

Видео для товара в каталоге. Ролик можно использовать для демонстрации использования продукта, распаковки или обзора с разных ракурсов. Это особенно полезно для товаров, преимущества которых не передать в статике: одежда в движении, техника в работе, продукция со сложной комплектацией. 

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

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

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

Шаблон Потока:

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

Для установки видеообложки находим в разделе слева кнопку «Видео» и вставляем ссылку — файл загрузить нельзя.

Для добавления видео внутрь материала нажимаем на знак «+» в настройках абзаца и также вставляем ссылку на ролик.