Как вставить видео в Tilda: пошаговая инструкция

2.

3.

4.

1.

5.

6.

8.

9.

10.

7.

11.

12.

14.

13.

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

Tilda поддерживает вставку видео из YouTube, Vimeo, Rutube, VK Видео, Kinescope, Boomstream, а также загрузку собственного файла и вставку через HTML-код. Разберём каждый способ добавления видео в тильду по порядку.

Самый простой способ вставить видео в Tilda — без сторонних сервисов. Откройте любой блок из категории «Видео» → вкладку «Контент» → в поле «Источник видео» выберите MP4 или WEBM → нажмите на иконку загрузки файла.

Видео с YouTube можно вставить в блоки VD01, VD04, VD06, VD08, VD09, VD11, VD12, VD13, VD14, VD16, AB701, BF402N, а также в некоторые блоки с галереей и полноэкранным фоном.
1. Откройте нужный блок из категории «Видео» → «Контент».
2. Вставьте ссылку на YouTube-ролик.
3. Убедитесь, что видео публичное и вставка на сторонних сайтах не запрещена в настройках приватности.

Лайфхак: чтобы видео стартовало не с начала, а с нужного момента, добавьте к ссылке параметр? start= и время в секундах — например, ???start=5025. Значение легко скопировать: кликните правой кнопкой по плееру YouTube → «Скопировать URL видео с привязкой ко времени».

На территории РФ YouTube сейчас работает нестабильно. Для сайтов, ориентированных на российскую аудиторию, лучше использовать другие способы: загрузку видео напрямую на Тильду, Rutube, VK Видео, Kinescope или Boomstream — они открываются без дополнительных настроек у посетителя.

Работает аналогично YouTube — вставляется в блоки VD01, VD04, VD06AN, VD08, VD09, VD11, VD12, VD14, AB701, BF402N.

Если ролик закрыт настройками приватности, у ссылки появится hash-параметр ?h= — его нужно вставить отдельно в поле Vimeo Private Link Hash, иначе видео не запустится.

После сложностей с зарубежными сервисами Tilda добавила прямую поддержку российских видеохостингов — без HTML-кода.

Зарегистрируйтесь на rutube.ru → загрузите видео через Rutube Studio → под роликом нажмите на три точки → «Поделиться роликом» → скопируйте ссылку → вставьте в Контент блока на Тильде. Если видео закрыто приватностью, добавьте значение параметра? p= в поле Rutube Private Link Hash.

Платный видеохостинг с плеером без рекламы и аналитикой просмотров. После загрузки видео нажмите на три точки рядом с роликом в списке → «Копировать ссылку» → вставьте в Контент блока на Тильде.

Под нужным видео наведите курсор → нажмите на три точки → «Поделиться» → вкладка «Экспортировать» → скопируйте «Прямую ссылку» → вставьте в Тильду.

Зарегистрируйтесь, создайте проект, загрузите видео → напротив ролика нажмите иконку «Поделиться» → скопируйте ссылку → вставьте в Контент блока.

Все четыре сервиса работают в блоках VD01, VD04, VD08, VD09, VD11, VD12, VD14; Kinescope, VK Видео и Boomstream — ещё и в AB701, BF402N.

Если файл уже лежит на хостинге или CDN, используйте стандартное HTML5-видео. Понадобится прямая ссылка на файл в форматах mp4 и webm — облачные хранилища вроде Google Drive или Dropbox для этого не подходят, они не отдают прямую ссылку на файл. Нужен файловый хостинг, например Selectel.
1. Сконвертируйте ролик в форматы mp4 и webm.
2. Загрузите оба файла на хостинг и получите прямые ссылки.
3. В блоке с HTML5-видео (VD01, VD04, VD08, VD09, VD11, VD12, VD16, AB701, BF402N) откройте «Контент» и вставьте обе ссылки в соответствующие поля.

Подходит для любой платформы, которая выдаёт код iframe для вставки видео. Работает в блоках VD01, VD04, VD08, VD09, VD11, VD12, VD14, AB701, BF402N.

Если нужно вставить видео в Tilda с сервиса, у которого нет отдельной интеграции, — Rutube, Kinescope, Boomstream и Дзен дают код плеера через «Поделиться» → «Код вставки плеера». Полученный код добавляется в блок T123 «HTML-код» из категории «Другое» или в HTML-элемент Zero Block. Подробнее о том, на каких тарифах доступен этот блок — в статье про тарифы Tilda.

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

В Zero Block нажмите на «+» → добавьте элемент Video → выберите способ вставки: YouTube, Vimeo, MP4, Rutube, Kinescope или VK Видео → загрузите файл или вставьте ссылку. Для нестандартных решений подойдёт и элемент HTML с кодом встраивания плеера — так в Zero Block можно вставить видео и с сервиса, для которого нет отдельного элемента.

Поддерживает ролики с YouTube, Vimeo, Kinescope, Rutube, VK Видео и Boomstream. Для каждого видео в плейлисте нужно указать ссылку, заголовок, длительность и описание — каждая запись с новой строки.

Небольшое видео в углу экрана: превью работает без звука, а по клику подгружается основное видео со звуком. Перед вставкой оптимизируйте ролик для веба, при желании добавьте короткое (до 5 секунд) превью шириной 200px, а также ссылку и текст кнопки, если видео должно вести к действию.

• Не включайте автозапуск со звуком — браузеры блокируют это без действия пользователя, а если и нет, посетителей это раздражает. Автозапуск без звука для фонового видео — исключение.
• Проверяйте приватность ролика на видеохостинге — если доступ ограничен настройками, видео не воспроизведётся на сайте, даже если ссылка вставлена верно.
• Указывайте прямую ссылку на файл для HTML5-видео — облачные диски вроде Google Drive для этого не подходят.
Оптимизируйте вес и разрешение ролика — тяжёлые файлы замедляют загрузку страницы и сказываются на позициях в поиске. Подробнее о том, что ещё влияет на скорость и видимость сайта — в статье про SEO-оптимизацию на Тильде.
• Проверяйте отображение на мобильных — часть блоков и способов вставки, особенно HTML-код, может вести себя на смартфонах иначе, чем в десктопной версии.
• Помните про ограничения тарифа — блок T123 и часть продвинутых функций доступны только на платных планах.

Вставить видео в Tilda можно быстрее, чем кажется: для большинства задач хватит стандартного блока со ссылкой на YouTube или Vimeo. Для российской аудитории удобнее Rutube, VK Видео или Kinescope. А если нужен полный контроль над плеером, автозапуск со звуком по клику или нестандартная Zero Block-вёрстка — используйте HTML-код в блоке T123.