Вставка видео в Tilda: пошагово

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

Зачем Tilda-сайтам профессиональное видео

Конструктор Tilda изначально поддерживает встраивание видео с YouTube, Vimeo и других популярных платформ. Но для бизнес-проектов этого часто недостаточно. YouTube показывает рекламу конкурентов, делает контент публичным, не предоставляет детальную аналитику просмотров. К тому же доступ к хостингу в России затруднён.

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

Профессиональные видеохостинги, например Kinescope, решают проблемы с воспроизведением, скоростью загрузки и рекламой конкурентов. Они предлагают чистый плеер без рекламы, детальную аналитику просмотров, защиту контента от копирования и глубокую аналитику. Интеграция Tilda с Kinescope возможна несколькими способами.

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

Блоки с готовой поддержкой видео

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

Пример настройки блока галереи:

1. Добавьте на страницу блок галереи (например, GB101).
2. В настройках элемента галереи выберите тип «Видео».
3. В поле «Ссылка на видео» вставьте URL видео из Kinescope.
4. Настройте размер превью и описание.

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

Блоки с фоновым видео

Фоновое видео — эффектный способ привлечь внимание к ключевым разделам сайта. Tilda поддерживает фоновые видео в cover-блоках и секциях.

Настройка фонового видео:

1. Выберите cover-блок с поддержкой видео (например, CV11).
2. В настройках фона выберите «Видео».
3. Загрузите короткий ролик без звука или укажите ссылку на Kinescope.
4. Настройте наложение текста и кнопок поверх видео при необходимости.

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

Продвинутая интеграция через HTML-блоки

Блок T123: полный контроль над плеером

Для максимальной гибкости настройки используйте блок T123 «HTML-код». Он доступен на платных тарифах Tilda и позволяет вставить любой код встраивания.

Пошаговая настройка:

1. В редакторе Tilda добавьте блок T123 (найдите через поиск по блокам).
2. В панели управления Kinescope откройте нужное видео.
3. Нажмите «Встроить» и скопируйте адаптивный код встраивания.
4. Вставьте код в блок T123.
5. Настройте ширину блока: рекомендуется 10 колонок ширины и 1 колонка отступа.
6. Сохраните изменения и опубликуйте страницу.

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

Плеер появится только после публикации страницы. В режиме предпросмотра Tilda вы увидите только серую область с текстом «HTML-код».

Zero Block: конструктор без ограничений

Zero Block в Tilda — это инструмент для создания уникального дизайна без готовых шаблонов. В него также можно встроить видео из Kinescope для создания нестандартных решений.

Интеграция Kinescope с Zero Block:

1. Создайте Zero Block на странице.
2. Добавьте HTML-элемент в нужное место макета.
3. Вставьте iframe-код Kinescope в HTML-элемент.
4. Настройте позиционирование и размеры через визуальный редактор.
5. Добавьте дополнительные элементы дизайна вокруг плеера.

Zero Block подходит для создания сложных макетов с видео: лендингов с нестандартной версткой, презентационных страниц с интерактивными элементами, портфолио.

Всплывающие видео: максимальное вовлечение

Pop-up блок T868 для модальных окон

Всплывающие видео привлекают максимальное внимание пользователей. Они открываются поверх содержимого страницы и создают эффект кинотеатра.

Настройка всплывающего видео:

1. Добавьте на страницу блок T868 «Pop-up».
2. В настройках блока вставьте специальный JavaScript-код для интеграции с Kinescope.
3. В коде укажите ссылку на ваше видео из Kinescope.
4. Настройте триггер открытия: кнопка, изображение, ссылка в тексте.
5. Протестируйте работу всплывающего окна.

Готовый код для интеграции:

document.addEventListener('DOMContentLoaded', function() {
var embedLink = 'https://kinescope.io/ВАШ_ID_ВИДЕО?autoplay=1';   	
	var popupId = '#popup:embedcode';  
    var aspectRatio = 16/9;    
    var popupContainer = document.querySelector('.t868__code-wrap');    
    function addIframe() {        
    	var iframe = document.createElement('iframe');        
        iframe.width = '100%';     
        iframe.height = '100%';       
        iframe.src = embedLink;       
        iframe.frameBorder = '0';       
        iframe.setAttribute('allowfullscreen', '');        
        popupContainer.appendChild(iframe);   
  	}
 });

Параметры кастомизации: соотношение сторон видео (16:9 для горизонтальных, 9:16 для вертикальных), автозапуск при открытии окна, размер плеера относительно экрана.

Защита контента водяными знаками

Динамические водяные знаки

Если ваш Tilda-сайт использует систему членства (платная функция), Kinescope может отображать email авторизованного пользователя в виде полупрозрачного водяного знака на видео.

Настройка динамических водяных знаков:

1. Добавьте переменную в код встраивания.‍
2. Используйте ваш сервер или CMS для передачи данных авторизованного пользователя.
3. В параметре watermark укажите переменную, содержащую данные пользователя. Например, его email или ID.

Статические водяные знаки

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

Чтобы добавить статический водяной знак:

Включите водяные знаки в настройках плеера Kinescope:

1. Перейдите в раздел «Плееры» → «Шаблоны плееров».
2. В верхней панели настроек перейдите в раздел «Расширенные».
3. Найдите настройку «Водяной знак» и включите её.
4. Задайте параметры и нажмите на кнопку «Сохранить». Проверьте работу водяных знаков в плеере справа.
5. В коде встраивания видео укажите текст водяного знака в параметре watermark.

Также можно использовать логотип как водяной знак. Для этого настройте логотип в настройках плеера Kinescope:

• Перейдите в раздел «Плееры» → «Шаблоны плееров».
• В настройках выберите пункт «Добавить логотип».
• Загрузите изображение и настройте его расположение на экране.

Интеграция с системой курсов Tilda

Создание видеолекций в конструкторе курсов

Tilda предлагает встроенный конструктор онлайн-курсов с поддержкой различных типов контента. Kinescope интегрируется с этой системой для создания защищённых образовательных материалов.

Настройка лекции-видео:

1. В конструкторе курсов создайте новую лекцию.
2. Выберите тип «Видео».
3. В параметре «Видеосервис» выберите Kinescope.
4. Укажите ID или прямую ссылку на видео из вашей библиотеки Kinescope.
5. Настройте дополнительные параметры: описание, продолжительность, доступ.

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

Настройка вебинаров и live-трансляций

Для проведения вебинаров Tilda поддерживает интеграцию с live-трансляциями Kinescope.

Подключение трансляции:

1. В Kinescope создайте событие трансляции и получите ссылку.
2. В конструкторе курсов Tilda создайте лекцию типа «Вебинар».
3. Выберите способ встраивания: по ссылке или через embed-код.
4. Укажите URL трансляции или iframe-код Kinescope.
5. Настройте время начала и уведомления для студентов.

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

Продвинутые возможности интеграции

Аналитика и отслеживание просмотров

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

Настройка аналитики:

1. Подключите Kinescope к сайту Tilda.
2. Анализируйте общий отчёт по всем видео во вкладке «Аналитика» в Kinescope или данные для каждого видео. Для этого кликните на видео дважды и перейдите во вкладку «Аналитика».

Интерактивные элементы в видео

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

Пример использования: в видеопрезентации товара на ключевых моментах появляются кнопки «Узнать цену» или «Заказать консультацию». Пользователь может перейти к действию, не прерывая просмотр.

Защита от несанкционированного доступа

Для корпоративных сайтов и образовательных проектов важна защита видеоконтента. Kinescope предлагает несколько уровней защиты.

Ограничение по доменам: видео воспроизводится только на указанных доменах. Если кто-то скопирует код встраивания на другой сайт, плеер не запустится.

Парольная защита: доступ к видео только после ввода пароля. Подходит для закрытых презентаций и внутренних материалов компании.

IP-фильтрация: видео доступно только с определённых IP-адресов. Используется для корпоративных сетей и ограниченного доступа.

Оптимизация производительности

Ленивая загрузка видео

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

Адаптивные размеры плеера

Для корректного отображения на всех устройствах используйте адаптивную вёрстку iframe. Подробнее о настройке здесь.

Решение типичных проблем

Видео не отображается в конструкторе

Проблема: после вставки кода в блок T123 видео не появляется в режиме редактирования.

Решение: это нормальное поведение Tilda. HTML-код исполняется только на опубликованной странице. Для проверки используйте режим предпросмотра или опубликуйте страницу.

Плеер не адаптируется под мобильные устройства

Проблема: на смартфонах видео обрезается или отображается некорректно.

Решение: используйте адаптивный код встраивания из Kinescope. Если проблема сохраняется, проверьте CSS-стили темы Tilda — они могут конфликтовать с iframe.

Медленная загрузка страниц с видео

Проблема: страницы с встроенными видео загружаются медленно.

Решение: включите ленивую загрузку плеера, используйте CDN Kinescope вместо загрузки файлов на сервер Tilda. Оптимизируйте размер превью изображений для блоков галереи.

Сравнение способов встраивания

Стандартные блоки vs HTML-код

Стандартные блоки Tilda:

• Простота настройки без знания кода.
• Ограниченные возможности кастомизации.
• Подходят для типовых задач.

HTML-блоки (T123, Zero Block):

• Полный контроль над внешним видом.
• Возможность добавления интерактивных элементов.
• Требуют базового понимания HTML/CSS.

YouTube vs Kinescope для Tilda

YouTube:

• Бесплатное размещение видео.
• Реклама конкурентов в плеере.
• Публичность всего контента.
• Зависимость от внешнего сервиса.

Kinescope:

• Полный контроль над дизайном и поведением плеера.
• Детальная аналитика просмотров.
• Защита корпоративного контента.
• Интеграция с образовательными и системами

Технические требования и ограничения

Требования к видеоконтенту

Для оптимальной работы с Tilda рекомендуется:

• Формат MP4 с кодеком H.264.
• Разрешение от 720p до 4K (в зависимости от целей).
• Битрейт аудио 128–320 kbps.
• Соотношение сторон 16:9 для горизонтальных видео.

Ограничения платформы Tilda

• HTML-блоки доступны только на платных тарифах.
• Система членства требует подключения дополнительных опций.
• Некоторые функции JavaScript могут не работать в режиме конструктора.

Правильная интеграция видеохостинга с Tilda превращает конструктор сайтов в мощную платформу для видеомаркетинга. Профессиональные инструменты Kinescope дополняют возможности Tilda. Результат — сайты, которые эффективно конвертируют посетителей в клиентов.