Как вставить видео в Тильду: 5 способов, фон обложки и Zero Block

Как добавить видео в Тильду: 5 способов, включая фоновое видео

Добавить видео на Tilda можно пятью способами: загрузить файл прямо в конструктор, вставить ссылку на YouTube или другую площадку, подключить плеер видеохостинга, указать прямую ссылку на MP4 или встроить HTML-код. Какой выбрать — зависит от задачи. Для короткой фоновой анимации важен лёгкий файл, для открытого ролика хватит публичной площадки, а для курса или закрытого раздела нужен видеохостинг с аналитикой и защитой.

Коротко:

• файл до 5 МБ можно загрузить прямо в Tilda;
• ролик с YouTube, Rutube, VK Видео или Vimeo вставляется ссылкой в видеоблок;
• чтобы вставить видео в Тильду без YouTube и рекламы, используйте плеер видеохостинга — Boomstream есть в списке источников Tilda;
• для фонового видео нужна прямая ссылка на облегчённый MP4 без звука;
• HTML-код позволяет встроить плеер в Zero Block, попап и нестандартную вёрстку.

100 ₽ на бонусный баланс для теста платформы на 30 дней. Бонус начисляется автоматически при регистрации.
Зарегистрироваться и получить бонус →

Быстрый выбор способа

Подготовка видео: формат, вес, разрешение

• Формат. MP4 с кодеком H.264 открывается во всех современных браузерах. Справка Tilda для HTML5-видео советует добавлять ещё WebM, но для актуальных браузеров достаточно MP4.
• Разрешение. Для ролика в контенте — 720p или 1080p. Для фона обычно хватает 720p.
• Пропорции. 16:9 для горизонтального видео — под него рассчитаны стандартные блоки.
• Длительность фона. 10–30 секунд с плавным зацикливанием.
• Звук. Фон в обложке Tilda проигрывается без звука, а браузеры не запускают автоматически видео со звуком. Звуковую дорожку фонового ролика лучше убрать ещё при монтаже.

Примечание: Если вы загружаете ролик в Boomstream, сжимать его вручную не нужно. Платформа сама перекодирует видео в несколько MP4 разных разрешений, и для фона остаётся выбрать подходящее. Максимальное разрешение транскода равно разрешению исходника: из видео 720p не получится версия 1080p.

Способ 1. Загрузить видео прямо в Tilda

Простой вариант для коротких роликов и фоновых анимаций.
Ограничения:

• только MP4 или WebM;
• размер файла — не больше 5 МБ;
• функция работает в режиме тестирования: включите «Участвовать в тестировании новых функций» в профиле Tilda.

Как загрузить файл:

1. Откройте нужный блок и перейдите в «Контент».
2. Выберите загрузку видеофайла.
3. Загрузите подготовленный MP4 или WebM.
4. Опубликуйте страницу и проверьте воспроизведение на компьютере и смартфоне.

5 МБ — это примерно 15–30 секунд видео в среднем качестве. У загруженного файла нет автоматического переключения качества, аналитики и защиты.

Когда использовать: короткие декоративные ролики, микроанимации, небольшие превью.

Способ 2. Ссылка с YouTube, Rutube, VK Видео или Vimeo

Самый быстрый вариант для открытого контента: в «Контенте» видеоблока выберите площадку и вставьте публичную ссылку на ролик.

• YouTube — видео должно быть публичным и разрешённым для встраивания на сторонних сайтах. Чтобы ролик начинался не с начала, добавьте к ссылке ?start= и время в секундах, например ?start=120.
• Vimeo — для приватного видео в ссылке нужен параметр ?h=.
• Rutube — для приватного видео нужен параметр ?p=.
• VK Видео — бесплатно, но в плеере остаётся логотип соцсети.

Минусы публичных площадок стоит знать заранее:

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

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

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

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

Все ссылки и коды берутся в одном месте: в разделе «Видеофайлы» нажмите на название видео и откройте вкладку «Публикация плеера».

Способ 3. Плеер Boomstream в видеоблоке

Для отзывов, презентаций, обзоров, вебинаров и уроков удобнее полноценный плеер. Boomstream — один из официальных источников видео в Tilda, наряду с YouTube, Vimeo, Rutube, Kinescope и VK Видео. По справке Tilda, плеер Boomstream работает в блоках VD01, VD04, VD08, VD09, VD11, VD12, VD14, AB701 и BF402N.

Пошагово:

1. Зарегистрируйтесь в Boomstream и загрузите видео в раздел «Видеофайлы».
2. Дождитесь обработки: метки качества (240p, 360p, 720p…) станут зелёными.
3. Нажмите на название видео → вкладка «Публикация плеера» → «Прямая ссылка». Скопируйте ссылку.
4. В Tilda добавьте видеоблок, например VD01. В «Контенте» в поле «Источник видео» выберите Boomstream и вставьте ссылку.
5. Опубликуйте страницу и проверьте плеер на разных устройствах.

Так же вставляются онлайн-трансляции и плейлисты: скопируйте ссылку на трансляцию или плейлист из Boomstream — плеер сам переключится в режим прямого эфира. Способ работает на бесплатном тарифе Tilda и без кода.

Что получаете:

• плеер без рекламы и рекомендаций чужих роликов;
• адаптивное качество: плеер сам переключает разрешение под скорость интернета зрителя;
• статистику просмотров, ваш логотип и цвета;
• стабильную работу при любой нагрузке: одновременно на сайт может зайти 1 человек или 1 000, видео увидит каждый;
• воспроизведение из любой страны, в том числе у зрителей с VPN или прокси; видео хранится и раздаётся с серверов в России;
• замену ролика без правки сайта: если заменить видео в Boomstream, на странице Tilda оно обновится само — ссылка остаётся прежней.

Подробнее о всех вариантах — в инструкции по интеграции Boomstream с Tilda.

Способ 4. Прямая ссылка на MP4

Прямая ссылка на файл .mp4 нужна для фона в обложках, HTML5-видео и элемента Video в Zero Block. Ссылка должна вести на сам видеофайл, а не на страницу облачного диска. Проще говоря, адрес должен заканчиваться на .mp4. Google Диск, Яндекс Диск и Dropbox таких ссылок не дают.

В Boomstream прямая ссылка есть для каждого разрешения видео.

Где взять ссылку:

1. Нажмите на название видео → вкладка «Публикация плеера» → «MP4».
2. Выберите нужное качество — 240p, 360p, 540p, 720p и т. д.
3. Нажмите на значок копирования справа от ссылки. Ссылка выглядит так: https://…boomstream…/balancer/XXXXXXXX.mp4 (домен может отличаться).

Важно:

• У ссылки на MP4 нет адаптивного качества: это один файл одного разрешения. Чтобы качество менялось под скорость интернета, используйте плеер (способ 3).
• Защита по домену на прямые ссылки не распространяется. Кто угодно может открыть или встроить файл по такой ссылке, а трафик будет оплачиваться с вашего аккаунта. Используйте MP4 для фона и открытых роликов.
• С DRM-защитой прямая ссылка не работает: зашифрованный поток не воспроизводится сторонним плеером. Для фона берите видео без DRM, а защищённый контент вставляйте плеером.

Способ 5. HTML-код плеера

Блок T123 и HTML-элемент Zero Block подходят для готового кода плеера. Его используют в попапах, нестандартных композициях и там, где возможностей видеоблока не хватает. В Boomstream код берётся на вкладке «Публикация плеера» → «Статичный» (фиксированный размер) или «Адаптивный» (подстраивается под ширину).

Учтите три вещи:

1. Блок T123 доступен только на платных тарифах Tilda (Personal, Business).
2. В редакторе код не отображается — плеер появится только на опубликованной странице или в предпросмотре.
3. Копируйте код целиком. Не собирайте адрес плеера вручную: параметры у разных сервисов отличаются.

Не смешивайте два сценария:

• если поле Tilda ожидает ссылку — вставляйте ссылку;
• если это блок T123 или HTML-элемент Zero Block — вставляйте готовый код.

Адаптивный iframe. Значение height="auto" не делает iframe адаптивным. Если код фиксированного размера, оберните его в контейнер с aspect-ratio:

<div class="video-wrapper">
  <!-- Вставьте сюда полный код плеера из кабинета видеохостинга -->
</div>
<style>
  .video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; }
  .video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
</style>

Подробнее — в документации по встраиванию видео.

Фоновое видео в обложке: пошагово

Фоновое видео — самый частый камень преткновения. В Tilda для него три пути:

1. Ролик с YouTube или другой площадки — работает, но в фоне может мелькнуть интерфейс площадки, а в России YouTube грузится нестабильно.
2. Загрузка в Tilda — не больше 5 МБ.
3. Прямая ссылка на MP4 — без ограничения по размеру, но нужен хостинг, который даёт такую ссылку.

Как поставить фон с Boomstream:

1. Подготовьте короткий ролик без звуковой дорожки и загрузите его в Boomstream. DRM-защиту для этого видео не включайте.
2. Откройте видео → «Публикация плеера» → «MP4» и скопируйте ссылку на 720p.
3. Добавьте в конец ссылки #t=0.001 — так на iPhone и iPad не появится серый или чёрный экран в начале.
4. В Tilda откройте «Контент» обложки (например, CR01 или CR30N) → вкладка «Видео» → вставьте ссылку в поле для MP4-файла.
5. Загрузите запасную картинку: на многих смартфонах фоновое видео не воспроизводится, и вместо него показывается изображение.
6. Опубликуйте страницу. Проверьте её на мобильном интернете и убедитесь, что текст поверх фона читается.

Совет: Для фона обычно хватает 720p: разница с 1080p почти не видна, а трафика и времени загрузки уйдёт заметно больше. Если фон нужен не в обложке, а в своём макете или на весь сайт, — подробная инструкция по фоновому видео с готовым кодом.

Видео в Zero Block

• Элемент Video — для прямой ссылки на MP4 с вкладки «MP4». Видео встраивается в макет с нужными размерами и положением.
• HTML-элемент — для кода плеера Boomstream со всеми настройками (брендирование, защита, статистика) или для собственного тега <video>:

<!-- Фон: автозапуск без звука, зацикливание, без элементов управления -->
<video src="ССЫЛКА_НА_MP4_ИЗ_BOOMSTREAM#t=0.001"
       autoplay muted loop playsinline
       poster="/images/hero-poster.jpg"></video>

<!-- Ролик с кнопкой «Play»: не загружать видео до клика -->
<video src="ССЫЛКА_НА_MP4_ИЗ_BOOMSTREAM"
       controls preload="none"
       poster="/images/video-poster.jpg"></video>

• muted и playsinline нужны, чтобы фон запустился автоматически, в том числе на iPhone.
• preload="none" не даёт браузеру скачивать ролик, пока зритель не нажал «Play». Почему это экономит деньги — в разделе про трафик.

После публикации проверьте все адаптивные версии Zero Block: ширину и высоту плеера, пропорции видео, расположение на разных разрешениях экрана, кликабельность элементов поверх видео.

Всплывающее видео по кнопке

Видео во всплывающем окне открывается поверх страницы и не занимает место в макете — удобно для отзывов и демо на лендинге. В Boomstream готовый код такого плеера есть на вкладке «Публикация плеера» → «Всплывающий». Вставьте его в блок T123 или HTML-элемент Zero Block рядом с кнопкой.

Видео в курсах Tilda

Если вы делаете онлайн-курс на Tilda, Boomstream можно подключить прямо в конструкторе курсов:

1. В личном кабинете Tilda создайте курс и раздел.
2. Нажмите «Добавить лекцию» → «Видео».
3. В поле «Видео: ID или ссылка» выберите Boomstream и вставьте ссылку на видео.

Конструктор курсов работает на бесплатном тарифе Tilda, а защита Boomstream (DRM, запрет скачивания) сохраняется. Если ученикам нужен водяной знак с их почтой, вставляйте плеер не уроком типа «Видео», а кодом через Zero Block или HTML-блок: в стандартных видеоблоках и уроках «Видео» этот знак не работает. Подробнее о видеоплатформе для обучения — на странице для онлайн-школ.

Плейлист и видео в карточке товара

• Плейлист. Блок VD14 собирает несколько роликов в один плеер. Boomstream есть в списке поддерживаемых источников — достаточно вставить ссылку на плейлист из Boomstream.
• Карточка товара. В каталоге товаров Tilda, по справке конструктора, поддерживаются только YouTube, Vimeo, Rutube и VK Видео. Если нужен ролик без рекламы, разместите его плеером Boomstream в описании страницы товара.

Как настроить плеер Boomstream под дизайн сайта

Обложка

Обложка показывается до запуска видео и объясняет, о чём ролик. Используйте изображение с подходящим соотношением сторон, читаемым заголовком и заметным акцентом. Вес обложки влияет на скорость сайта: сжимайте изображение и проверяйте страницу в PageSpeed Insights.

Цвета и элементы управления

Цвет элементов управления под бренд сайта задаётся в настройках проекта в аккаунте Boomstream. В настройках публикации плеера оставьте только нужные функции. Для контентного видео полезны: воспроизведение и пауза, регулировка громкости, полноэкранный режим, выбор качества, субтитры, эпизоды.

Для фона используйте отдельный MP4 без звука и элементов управления.
У нативного HTML5-плеера (<video controls>) настроить внешний вид почти нельзя: браузер рисует элементы управления сам и скрывает их внутреннюю структуру. Если нужен плеер в цветах бренда — используйте плеер видеохостинга.

Брендирование

Возможность убрать логотип платформы или поставить свой зависит от тарифа.

Защищённое и платное видео на Tilda

Если на Tilda вы продаёте курсы или открываете доступ к видео после оплаты, размещайте ролик плеером, а не фоном или MP4-ссылкой. В Boomstream для этого есть:

• водяные знаки с данными зрителя поверх видео — против записи экрана (как подключить на Tilda);
• продажа доступа к видео и трансляциям с автоматической выдачей после оплаты на Tilda (инструкция, Pay-per-view);
• доступ по паролю (как настроить), ограничение по домену и защита от скачивания (подробнее о защите видео).

Сколько трафика тратит видео на сайте

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

1. Плеер Boomstream без автозапуска

Трафик расходуется, только когда посетитель нажимает «Play».
3 ролика по 1 минуте, 50 посетителей в день, каждый смотрит 2 ролика:
2 ролика × 1 мин × 50 посетителей = 100 минут ≈ 1,67 часа просмотра.
При тарифе 0,8 ₽ за час: 1,67 × 0,8 ≈ 1,34 ₽ в день.

2. MP4-ссылка в видеоблоке или Zero Block без preload

Видеоблоки Tilda не передают атрибут preload, поэтому браузер решает сам и часто заранее подгружает около 15–20% длительности каждого ролика на странице — даже если никто не нажимает «Play».
5 роликов по 1 минуте, 100 посетителей в день, никто не смотрит:
5 × 1 мин × 100 × 20% = 100 минут ≈ 1,67 часа.
При тарифе 0,8 ₽ за час: ≈ 1,34 ₽ в день — за видео, которые никто не смотрел.
Решение: для роликов с кнопкой «Play» используйте плеер Boomstream или HTML-код с preload="none".

3. Фоновое видео (автозапуск и зацикливание)

Фон воспроизводится, пока вкладка с сайтом открыта и активна. Когда посетитель сворачивает вкладку или уходит со страницы, передача прекращается.
Формула: время на странице × число посетителей × число фоновых роликов.
Фон из 1-минутного ролика, 100 посетителей в день, в среднем 3 минуты на сайте:
3 мин × 100 посетителей × 1 ролик = 300 минут = 5 часов.
При тарифе 0,8 ₽ за час: 5 × 0,8 = 4 ₽ в день.

Хранение оплачивается отдельно — условно 13,2 ₽ за час видео (0,22 ₽ за минуту) в месяц.

Как снизить расход на фон: делайте ролик короче (15–30 секунд), берите 720p вместо 1080p и добавьте poster-изображение, которое видно до загрузки видео.

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

Типичные ошибки при добавлении видео на Tilda

Частые вопросы

Можно ли вставить видео на Тильду бесплатно?

Да. Tilda позволяет загрузить файл до 5 МБ, а YouTube и VK Видео бесплатны. Плеер Boomstream работает в видеоблоках и конструкторе курсов на бесплатном тарифе Tilda. При регистрации Boomstream даёт 100 ₽ бонусного баланса на 30 дней — этого хватит, чтобы протестировать плеер и фон на своём сайте.

Можно ли загрузить на Тильду видео больше 5 МБ?

На серверы Tilda — нет. Видео большего размера храните на видеохостинге и вставляйте плеером или прямой ссылкой на MP4.

Где хранить фоновое видео для сайта на Тильде?

На хостинге, который даёт прямую ссылку на MP4. В Boomstream она есть для каждого разрешения ролика на вкладке «Публикация плеера» → «MP4».

Какой формат видео нужен для Тильды?

MP4 с кодеком H.264 — он работает во всех современных браузерах. WebM можно добавить, но это не обязательно.

Почему фоновое видео не работает на телефоне?

Многие мобильные браузеры не воспроизводят фоновое видео ради экономии трафика и заряда. Tilda в этом случае показывает запасное изображение — загрузите его в «Контенте» блока. На iPhone также помогает параметр #t=0.001 в конце ссылки.

Как сделать, чтобы видео начиналось не с начала?

Для YouTube добавьте к ссылке ?start= и время в секундах. Для других плееров используйте HTML-код с параметрами, которые поддерживает сервис.

Как добавить видео в Zero Block?

Для прямой ссылки на MP4 — элемент Video. Для плеера — HTML-элемент с готовым кодом из кабинета видеохостинга.

Как добавить видео в курс на Tilda?

В конструкторе курсов нажмите «Добавить лекцию» → «Видео», выберите источник Boomstream и вставьте ссылку на видео.

Почему видео медленно загружается?

Частые причины — тяжёлый файл, предзагрузка нескольких роликов, большая обложка и отсутствие адаптивного качества. Возьмите облегчённую версию, добавьте preload="none" или используйте адаптивный плеер.

Как защитить видео на Tilda от копирования?

Абсолютной защиты от записи экрана не существует, но распространение можно ограничить: доступ по паролю, воспроизведение только на ваших доменах, динамические водяные знаки и контроль сессий. Всё это работает в плеере Boomstream. Прямые MP4-ссылки для закрытого контента не подходят.

Готовы добавить видео на сайт?

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

100 ₽ на бонусный баланс для теста платформы на 30 дней. Бонус начисляется автоматически при регистрации.
Зарегистрироваться и получить бонус →

См. также

• Интеграция Boomstream с Tilda: все способы
• Фоновое видео на сайт: код и рекомендации
• Продажа видео на Tilda с автоматической выдачей доступа
• Водяной знак с почтой ученика в Tilda