Как в Тильде добавить видео: блок и проверка воспроизведения

Как в Тильде добавить видео, чтобы ролик запускался по нажатию: выберите источник, поставьте один стандартный блок из категории «Видео», вставьте ссылку или загрузите файл, опубликуйте страницу и проверьте запуск на компьютере и телефоне. Для этого сценария достаточно стандартного видеоблока.

Выберите источник ролика

Тильда принимает видео из нескольких источников: загрузку файла на саму платформу, сервисы YouTube, Vimeo, Kinescope, Rutube, VK Video, Boomstream, а также прямую ссылку на файл на стороннем сервере и вставку через iFrame (Вставка видео на страницу^[1]). Для одного ролика на обычной странице удобнее всего два пути: ссылка на поддерживаемый видеосервис или файл MP4/WEBM, загруженный прямо в блок.

Для YouTube перед вставкой проверьте, что видео публичное и в настройках приватности нет запрета на встраивание на сторонних сайтах. Для закрытых видео Vimeo и Rutube справка предусматривает отдельные приватные параметры (Вставка видео на страницу^[1]).

Загрузка файла на Тильду ограничена форматами MP4 или WEBM и размером до 5 Мб (Вставка видео на страницу^[1]). Если файл больше 5 Мб, выберите поддерживаемый видеосервис.

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

Добавьте стандартный видеоблок

Откройте Библиотеку блоков и перейдите в категорию «Видео» (Вставка видео на страницу^[1]). Для одного ролика достаточно одного блока из этой категории: например, VD01 — базовый видеоблок. Дальше действия зависят от источника.

Источник	Что вставить в блок	Куда смотреть
Файл на Тильде	MP4 или WEBM до 5 Мб, загрузка через иконку файла	Поле «Источник видео» в панели «Контент»
Видеосервис	Ссылка или ID в зависимости от выбранного сервиса	Панель «Контент»; способ получения ссылки уточните в разделе справки своего сервиса
Закрытое видео Vimeo или Rutube	Данные ролика и приватный параметр	Vimeo Private Link Hash или Rutube Private Link Hash

Для VK Video нужна ссылка из меню «Поделиться» → «Экспортировать» → «Прямая ссылка»; для Kinescope — команда «Копировать ссылку» в меню ролика (Вставка видео на страницу^[1]).

Файл на Тильде. В панели «Контент» выберите в «Источник видео» значение MP4 или WEBM, затем нажмите на иконку загрузки и добавьте файл (Вставка видео на страницу^[1]).

Ссылка на видеосервис. Выберите подходящий блок, откройте «Контент» и вставьте ссылку на ролик в соответствующее поле (Вставка видео на страницу^[1]). Для приватного видео на Vimeo добавьте hash-параметр в поле Vimeo Private Link Hash, для Rutube — параметр в поле Rutube Private Link Hash (Вставка видео на страницу^[1]).

Для сценария с запуском по нажатию оставьте автозапуск выключенным. После публикации проверьте запуск кнопкой Play на компьютере и телефоне.

Опубликуйте и проверьте воспроизведение

Проверка до публикации: нажмите «Предпросмотр» во время редактирования, чтобы увидеть, как будет выглядеть опубликованная страница (Как устроена Тильда^[2]). Все изменения сохраняются автоматически (Как устроена Тильда^[2]).

Порядок действий:

Нажмите «Опубликовать» и дождитесь завершения публикации: при публикации настраивается адрес, по которому страница будет доступна в интернете (Как устроена Тильда^[2]).
Откройте опубликованную страницу по её адресу в браузере на компьютере.
Нажмите Play и убедитесь, что ролик запускается и звук идёт.
Откройте ту же страницу на телефоне, нажмите Play и повторите проверку.
Если плеер не запускается, проверьте данные выбранного источника: для YouTube — публичность и разрешение на встраивание; для закрытых Vimeo и Rutube — приватный параметр; для загруженного файла — MP4 или WEBM и размер до 5 Мб.

На телефоне проверьте не только запуск: убедитесь, что плеер помещается на экране и не перекрывает соседние элементы страницы.

Если в проекте есть изображения рядом с видеоблоком, их размеры стоит подготовить заранее — приёмы работы с графикой разобраны в материалах о подготовке изображений и инфографики и изменении размера изображений.

Учебный пример видеоблока

Учебный пример: на сайте курса нужно разместить ролик «Обзор программы». Он уже доступен на выбранном поддерживаемом видеосервисе по ссылке владельца. Страница — /course. Нужен один стандартный видеоблок с запуском по нажатию. Вместо <ВАША_ССЫЛКА_НА_РОЛИК> подставьте ссылку владельца и проверьте её доступность для зрителей.

Исходные условия целиком:

Параметр	Значение в примере
Сайт	Учебный сайт курса
Страница	/course
Ролик	«Обзор программы»
Источник	Поддерживаемый видеосервис, ссылка у владельца
Блок	Один стандартный блок из категории «Видео»
Режим запуска	По нажатию, без обещания автозапуска
Ссылка в примере	`<ВАША_ССЫЛКА_НА_РОЛИК>`

Заполнение блока:

Поле блока	Что вписать
Источник видео	Сервис, на котором лежит ролик
Ссылка на ролик или его ID	`<ВАША_ССЫЛКА_НА_РОЛИК>`
Приватный параметр для закрытого Vimeo или Rutube	Значение ?h= для Vimeo или ?p= для Rutube
Автозапуск	Выключен

Проверка результата после публикации:

Шаг проверки	Ожидаемый результат	Как зафиксировать
Открыть /course на компьютере	Блок виден на странице	Скриншот блока
Нажать Play	Ролик запускается по нажатию	Видео с экрана или скриншот плеера после старта
Открыть /course на телефоне	Блок не ломает верстку	Скриншот мобильного экрана
Нажать Play на телефоне	Ролик запускается по нажатию	Видео с экрана телефона
Проверить звук	Звук слышен после нажатия	Отметка в чек-листе

Если плеер не запустился, сверяйте данные в «Контенте» с инструкцией для выбранного сервиса. Для YouTube проверьте публичность и разрешение на встраивание; для закрытых Vimeo и Rutube — приватный параметр; для файла — MP4 или WEBM и размер до 5 Мб. После каждой правки публикуйте страницу и повторяйте проверку.

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