Как сделать на Тильде свой видеовиджет?

Подготовьте ссылку на видео
Модификация поддерживает разные источники видео:
YouTube, RuTube, VK-видео, Kinescope, прямые ссылки на mp4-файлы и другие сервисы, которые позволяют использовать прямую ссылку на видео.

Если вы используете Kinescope, можно зарегистрироваться в сервисе.
Чтобы активировать бонус на 2000 ₽, напишите в чат поддержки Kinescope внутри личного кабинета и укажите промокод NOLIM.

Перед загрузкой видео проверьте файл
Если вы загружаете видео на сторонний сервис, например Kinescope, убедитесь, что:

• видео в формате mp4;
• разрешение не больше 1080×1920 px для вертикального видео 9:16;
• размер файла оптимизирован: чем меньше файл, тем быстрее загружается сайт и само видео.

Если видео не в mp4, его можно конвертировать через бесплатный сервис CloudConvert.
Для сжатия видео можно использовать онлайн-сервисы для компрессии файлов.

Получите ссылку на видео
Скопируйте ссылку на видео из выбранного сервиса и вставьте её в генератор модификации.

Особенность для Kinescope:
если используется ссылка на конкретное качество видео, она может выглядеть так:
https://kinescope.io/201558518/720p
В конце ссылки указывается разрешение файла: 360p, 480p или 720p.

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

Чтобы получить ссылку на изображение:

1. добавьте на страницу галерею GL12;
2. загрузите в неё нужное изображение;
3. рекомендуемый формат — svg или png;
4. задайте нужный размер иконки в макете;
5. скопируйте ссылку на изображение и вставьте её в генератор.
6. Укажите ссылку для действия по клику

В генераторе можно указать ссылку для кнопки или действия:

• обычная ссылка;
• ссылка на popup;
• якорная ссылка;
• ID блока;
• ссылка на внешний ресурс;
• любая другая ссылка, которую нужно открыть по клику.

Настройте положение видеовиджета
Укажите расположение виджета на экране и настройте отступы от краёв.
Можно задать положение отдельно для разных устройств, если такая настройка предусмотрена в генераторе.

Настройте внешний вид виджета
Настройте визуальную часть виджета в свернутом и развернутом виде:

• цвета;
• толщину обводки;
• размеры;
• проценты увеличения;
• шрифты;
• скругления;
• отступы;
• другие параметры оформления.

Настройте аналитику, если нужно
При необходимости добавьте цели для:

• Яндекс Метрики;
• Google Analytics.

Это поможет отслеживать клики и взаимодействия пользователей с видеовиджетом.

Добавьте код на сайт
После настройки генератор выдаст HTML-код.
Чтобы установить модификацию на страницу:

1. добавьте на страницу блок Т123;
2. вставьте в него сгенерированный HTML-код;
3. опубликуйте страницу;
4. проверьте работу виджета на компьютере и мобильных устройствах.

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

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

Для Kinescope может потребоваться ссылка в специальном формате с указанием качества видео, например:

• https://kinescope.io/201558518/720p