Видео в Тильде: фоновое видео, ролик с Rutube и как не убить скорость

Какие видеоблоки есть в Тильде

По справке Тильды о видео основные блоки лежат в категории «Видео»:

Кроме видеоблоков, видео можно поставить фоном в блоки категории «Обложка» и добавить элементом в Zero Block.

Блоки с кнопкой воспроизведения и всплывающим окном (VD04, VD09, VD11) нам нравятся больше остальных для лендингов. Пока человек не нажал на кнопку, тяжёлый плеер не мешает странице, а заставку можно сделать в стиле сайта.

Как вставить видео в Тильде с Rutube и VK Видео

Rutube

1. Откройте ролик на Rutube и найдите код вставки плеера. По справке Тильды можно вставить и ссылку на ролик, и код из раздела «Код вставки плеера».
2. Добавьте на страницу видеоблок, например VD01.
3. Нажмите «Контент» и вставьте ссылку в поле видео.
4. Опубликуйте страницу и проверьте воспроизведение с телефона.

VK Видео

1. Откройте ролик, нажмите на меню с тремя точками и выберите «Поделиться».
2. Перейдите на вкладку «Экспортировать» и скопируйте прямую ссылку.
3. Вставьте её в «Контент» видеоблока.

YouTube и другие сервисы

Ссылка с YouTube, Vimeo или Kinescope вставляется так же — в поле видео в «Контенте». Для российской аудитории YouTube сейчас ненадёжный вариант: у части посетителей ролик может грузиться медленно или не открываться. Если видео важно для продажи, дублируйте его на Rutube или VK Видео и вставляйте оттуда.

Код вставки (iframe)

Если сервиса нет в списке, видео вставляют кодом через HTML-блок. Учтите оговорку из справки: при таком способе настройки «Воспроизводить видео автоматически» и «Выключить звук у видео» не работают. Всё управление переходит к чужому плееру.

Как загрузить видео в Тильду своим файлом

Свой файл загружают, когда видео короткое и не нужен плеер сервиса: например, зацикленный ролик процесса работы или анимация продукта.

Ограничения по справке:

• формат MP4 или WEBM;
• размер до 5 МБ.

5 МБ — это мало для обычного ролика и много для страницы. В этот объём помещается короткий зацикленный фрагмент на 5–15 секунд в умеренном качестве, без звука. Длинный ролик, интервью или отзыв загружайте на видеохостинг и вставляйте ссылкой.

Как подготовить файл:

1. Обрежьте до нужного фрагмента: чем короче, тем лучше.
2. Уберите звуковую дорожку, если ролик будет играть без звука.
3. Уменьшите разрешение: для фона на всю ширину обычно хватает 1 280 пикселей по ширине.
4. Сохраните в MP4 с кодеком H.264 или в WEBM.
5. Проверьте итоговый размер: если файл впритык к 5 МБ, ужмите ещё. Каждый мегабайт — это время загрузки на телефоне.

Где хранить видео для сайта: что выбрать

От того, где лежит ролик, зависит, увидят ли его посетители и как быстро он откроется.

Совет из практики: заведите один канал на Rutube или в VK Видео и складывайте туда все ролики для сайта. Так видео не пропадёт, если сменится подрядчик, а ссылки будут в одном месте. И проверяйте, что канал оформлен на компанию, а не на личный аккаунт сотрудника, — та же история, что с владением сайтом.

Видеофон в Тильде: как сделать и что будет на телефоне

Видеофон — это ролик, который играет на фоне обложки без звука, а поверх стоят заголовок и кнопка. В Тильде он ставится так: в блоке из категории «Обложка» открываете «Контент» и вставляете ссылку на видео в поле видеофона. Поддерживаются видео, загруженные в Тильду, ссылки на YouTube и HTML5-видео.

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

• всегда загружайте в обложку картинку. Она покажется, если видео не запустится;
• используйте настройку показа изображения вместо видео в мобильной версии, если она есть в блоке. Тогда на телефоне сразу грузится лёгкая картинка;
• проверяйте первый экран на реальном телефоне, а не только в режиме предпросмотра.

Мы много раз видели сайты, где на компьютере красивый видеофон, а на телефоне — тёмный прямоугольник с белым текстом, потому что заставку не загрузили. А на сайтах малого бизнеса, которые мы смотрим, с телефонов обычно приходит больше половины посетителей.

Видеофон и скорость

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

Наше правило: видеофон оставляем, только если он сам по себе продаёт — показывает продукт или процесс, которые трудно передать фото. Видео «для атмосферы» с облаками и людьми в офисе мы обычно заменяем на один сильный кадр.

Если вы не уверены, оставлять ли видео на первом экране, мы можем нарисовать альтернативный вариант и сравнить.

Автозапуск видео в Тильде

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

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

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

Видео в Zero Block

В Zero Block добавляют элемент «video» и выбирают источник: YouTube, Vimeo, MP4, Rutube, Kinescope или VK Видео. Видео можно поставить в любое место, задать размер и скругления, наложить поверх текст.

Нюанс тот же, что со всем в Zero Block: размеры и положение нужно проверить на каждой ширине экрана. Видео, которое на компьютере занимает полэкрана, на телефоне может вылезти за край или перекрыть кнопку. Когда стоит собирать экран в Zero Block, разобрали в статье Zero Block в Тильде.

Какое видео помогает продавать

Из того, что мы видим на сайтах клиентов, лучше всего работают ролики, которые отвечают на конкретный вопрос покупателя:

1. Видеообзор объекта или товара. Дом, квартира, кухня, оборудование. Человек хочет «походить» и посмотреть.
2. Отзыв клиента на камеру. Живой человек с именем убеждает лучше текста. Короткие ролики по 30–60 секунд.
3. Процесс работы. Как делают ремонт, как готовят, как проходит процедура. Снимает страх неизвестности.
4. Обращение руководителя или мастера. Для экспертных услуг: психолог, юрист, врач. Человек видит, с кем будет работать.
5. Короткая инструкция. Как оформить заказ, как подготовиться к визиту.

Если роликов много, их удобно показать каруселью — как собрать её и не перегрузить страницу, разобрали в статье слайдер в Тильде. Что работает хуже: имиджевые ролики без смысла, нарезки стоковых кадров, видео на три минуты с долгим вступлением. Для отзывов и кейсов полезно прочитать статью отзывы на сайте.

Условный пример: сколько стоит видеофон

Пример условный, не кейс студии. Загородный комплекс, сайт на Тильде, на первом экране видеофон 4,5 МБ с YouTube.

• 70% посетителей приходят с телефонов.
• На телефонах видео не играет, а картинку-заставку не загрузили: первый экран — тёмный фон с текстом.
• На компьютерах видео грузится несколько секунд, кнопка появляется позже.

Допустим, с рекламы приходит 3 000 человек в месяц, конверсия 1,2% — 36 заявок. После замены видеофона на фото с картинкой для мобильной версии и переноса ролика-обзора в отдельный блок с кнопкой воспроизведения конверсия, например, растёт до 1,8% — 54 заявки при том же бюджете. Цифры условные, а логика простая: первый экран должен показываться сразу и одинаково хорошо на любом устройстве.

Ещё одна деталь: у каждого ролика на сайте должна быть понятная заставка. Стоп-кадр с закрытыми глазами спикера или размытым кадром отбивает желание нажать. Блок с обложкой (VD11) решает это: заставку можно сделать отдельной картинкой в стиле сайта, с подписью «Обзор объекта, 2 минуты».

Чек-лист видео на сайте Тильды

1. Видео отвечает на вопрос покупателя, а не просто украшает страницу.
2. Длинные ролики вставлены с видеохостинга, доступного вашей аудитории.
3. Свой файл — короткий, без звука, легче 5 МБ, а лучше 2–3 МБ.
4. В обложке с видеофоном загружена картинка-заставка.
5. На телефоне первый экран проверен вживую.
6. Автозапуск только без звука.
7. Для тяжёлых роликов используется кнопка воспроизведения или всплывающее окно.
8. Скорость страницы замерена до и после добавления видео.

Если хотите, чтобы мы посмотрели первый экран и сказали, мешает ли видео заявкам, оставьте контакты.