Видео во всплывающем окне Тильда: запуск по кнопке на тёмном фоне

Запрос «видео во всплывающем окне тильда» чаще всего решается одним блоком T123 с небольшим куском своего кода: кнопка на странице открывает затемнённое окно, внутри него стартует ролик, а при закрытии окна звук гаснет. Я так делаю на лендингах, где видео-отзыв или обзор продукта должен открываться по клику, а не висеть на странице и тормозить загрузку. Ниже полный рабочий код, правила подключения кнопки и разбор мелочей, на которых обычно ломается мобильная версия.

Как устроено всплывающее окно с видео на Тильде

Попап в Тильде это всегда блок на той же странице, скрытый до вызова. Отдельной страницы поверх другой нет, у окна нет своего URL. Штатные окна из категории «Форма» (BF501N, BF502N, BF503, BF504) заточены под формы и вызываются ссылкой вида #popup:имя. Для ролика проще и надёжнее собрать своё окно, потому что ключевое требование к нему другое: плеер должен создаваться в момент клика и уничтожаться при закрытии.

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

По схеме работы получается три части:

• кнопка или любой элемент со ссылкой вида #video-promo, которую вы задаёте в обычных настройках блока Тильды;
• блок T123 («Библиотека блоков», категория «Другое») с разметкой тёмной подложки и скриптом;
• адрес embed-версии ролика, который скрипт подставит в iframe в момент клика.

Тариф для этого не важен: вставка HTML-кода работает на платных тарифах, а Personal ничем не ограничен.

Подготовка: адрес ролика для встраивания

В iframe нужна не обычная ссылка на страницу видео, а адрес плеера. Для YouTube он выглядит так: https://www.youtube.com/embed/ИДЕНТИФИКАТОР, где идентификатор это часть после v= в обычной ссылке. Для RuTube формат https://rutube.ru/play/embed/ИДЕНТИФИКАТОР, идентификатор берётся из адреса страницы ролика. У VK Видео и Vimeo адреса встраивания тоже есть, их надёжнее копировать из пункта «Поделиться» самого сервиса, чем собирать по памяти.

Короткое сравнение того, что я учитываю при выборе площадки:

Существует и вариант с самостоятельным хранением файла на хостинге и тегом video, но для маркетингового ролика на несколько минут площадка выгоднее: она сама подбирает качество под скорость соединения посетителя.

Код блока T123: кнопка, тёмный фон и закрытие

Добавьте на страницу блок T123 («Библиотека блоков → Другое») и вставьте в него код ниже. Разместить блок можно в любом месте страницы, например в самом низу: окно позиционируется по экрану, а не по блоку. В объекте videos слева ссылка, которую вы укажете на кнопке, справа адрес плеера.

<style>
.vp-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.88);
}
.vp-overlay.vp-open { display: flex; }
.vp-box {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
}
.vp-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vp-close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
</style>

<div class='vp-overlay' id='vp-overlay'>
  <div class='vp-box' id='vp-box'>
    <button class='vp-close' id='vp-close' type='button' aria-label='Закрыть'>×</button>
  </div>
</div>

<script>
(function () {
  var videos = {
    '#video-promo': 'https://www.youtube.com/embed/ИДЕНТИФИКАТОР',
    '#video-review': 'https://rutube.ru/play/embed/ИДЕНТИФИКАТОР'
  };
  var overlay = document.getElementById('vp-overlay');
  var box = document.getElementById('vp-box');
  var frame = null;

  function closeVideo() {
    if (frame) {
      frame.remove();
      frame = null;
    }
    overlay.classList.remove('vp-open');
    document.body.style.overflow = '';
  }

  function openVideo(src) {
    closeVideo();
    frame = document.createElement('iframe');
    frame.src = src + (src.indexOf('?') === -1 ? '?' : '&') + 'autoplay=1';
    frame.allow = 'autoplay; fullscreen; encrypted-media';
    frame.setAttribute('allowfullscreen', '');
    box.appendChild(frame);
    overlay.classList.add('vp-open');
    document.body.style.overflow = 'hidden';
  }

  document.addEventListener('click', function (e) {
    var link = e.target.closest('a');
    var href = link ? link.getAttribute('href') : null;
    if (href && videos[href]) {
      e.preventDefault();
      e.stopPropagation();
      openVideo(videos[href]);
      return;
    }
    if (e.target === overlay || e.target.id === 'vp-close') {
      closeVideo();
    }
  }, true);

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeVideo();
  });
})();
</script>

Вместо слова «ИДЕНТИФИКАТОР» подставьте код своего ролика. Лишние строки из объекта videos можно удалить, а если роликов несколько, добавлять новые строки по тому же образцу: каждому ролику своя ссылка, одно окно на всех.

Что делает каждая часть

Стиль .vp-overlay растягивает слой на весь экран и красит его в чёрный с прозрачностью 0.88. Эту цифру я подбираю глазами: на светлых лендингах 0.88 даёт ощущение «выключенного света», а если сделать меньше, ролик начинает спорить с текстом страницы позади. Контейнер .vp-box держит пропорцию 16 к 9 через aspect-ratio, поэтому на телефоне и на мониторе ролик не вытягивается и не обрезается, а ширина ограничена 960 пикселями.

Скрипт ловит клики на уровне документа в фазе перехвата (третий аргумент true). Это нужно, чтобы наш обработчик сработал раньше скриптов якорных переходов Тильды. Если ссылка совпала с ключом из videos, переход отменяется и открывается окно. Остальные клики по странице скрипт не трогает.

Параметр autoplay=1 сработает, потому что ролик запускается в ответ на клик посетителя: браузеры блокируют автозапуск со звуком только там, где пользователь ничего не нажимал. Для RuTube и других площадок поведение этого параметра я проверяю на конкретном ролике, а не принимаю на веру.

Подключение кнопки: запуск ролика по клику

Откройте блок с кнопкой (подойдёт любой блок со ссылкой: обложка, текст с кнопкой, меню, кнопка в Zero Block) и в поле ссылки впишите значение из объекта, например #video-promo. Больше ничего настраивать не нужно. Работает это и со ссылкой на слове в тексте, и с картинкой-превью, на которую стоит ссылка.

Несколько правил, которые экономят время при отладке:

1. Ссылка в блоке и ключ в объекте videos должны совпадать до символа, включая решётку и регистр.
2. Не используйте для видео префикс #popup:. Он принадлежит штатным окнам Тильды, и Тильда попытается найти блок с таким хуком.
3. После правок опубликуйте страницу и проверяйте клики на опубликованной версии: в режиме редактора часть скриптов страницы не запускается.
4. Если на странице несколько блоков T123 с этим кодом, оставьте только один, иначе идентификаторы vp-overlay задвоятся и окно будет открываться дважды.

Кнопка-превью с иконкой воспроизведения

Часто вместо обычной кнопки нужна картинка с треугольником «play». Я кладу в обложку или в блок с картинкой изображение-кадр из ролика, поверх него в Zero Block ставлю иконку и вешаю ссылку на весь слой. Кадр и иконка загружаются как обычные картинки сайта, плеер остаётся неподгруженным до клика, и для скорости страницы это лучший вариант.

Окно в Zero Block: когда нужен свой дизайн

Код выше самодостаточный, но иногда дизайнер рисует окно с заголовком, текстом под роликом и кнопкой «Заказать». Тогда есть смысл собрать оформление в Zero Block, а блок-модификатор T1093 (категория «Другое») использовать как оболочку. В нём указывается ID Zero Block, ссылка вызова по умолчанию #zeropopup, а в настройках можно выбрать фон подложки, иконку закрытия, скорость анимации и Z‑index. Сам плеер в такое окно я всё равно подгружаю скриптом: в момент открытия добавляю iframe в нужный контейнер, при закрытии удаляю.

Как я выбираю между вариантами:

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

Проверка на телефоне и скорость страницы

На мобильных устройствах чаще всего ломаются три вещи. Первая: кнопка закрытия. Я вынес её на 42 пикселя выше ролика, и в альбомной ориентации телефона она может уйти за край экрана. В таком случае закрыть окно можно касанием по тёмному полю, поэтому я оставил этот сценарий в обработчике. Если у вас ролик занимает почти всю ширину, уменьшите значение top у .vp-close до нуля и поставьте кнопку внутрь рамки.

Вторая: полноэкранный режим. Атрибут allow с fullscreen и allowfullscreen у iframe нужны, иначе кнопка разворота внутри плеера окажется неактивной. На iPhone ролик при разворачивании может открыться во встроенном плеере системы, это нормально и от вашего кода не зависит.

Третья: прокрутка страницы под окном. Строка document.body.style.overflow = 'hidden' блокирует фон, пока окно открыто, а при закрытии возвращает значение. Если на сайте есть другие скрипты, которые тоже меняют overflow у body, проверьте, что они друг друга не затирают.

По скорости: плеер подгружается только после клика, а до этого страница тянет лишь небольшой блок разметки. В моих проектах это заметно сказывается на показателях загрузки по сравнению со вставкой готового iframe в каждый блок с роликом. Точные цифры зависят от вашей страницы, поэтому прогоните её через PageSpeed до и после и сравните сами.

Если нужна нестандартная логика, например запуск ролика после заполнения формы, учёт просмотров в метрике или показ разных роликов по UTM-метке, такие вещи делаются небольшим кодом поверх этой же схемы. Кастомные доработки такого рода я беру в работу как кастомный скрипт для Tilda, от 3 000 ₽ за простую задачу.

Условия и возможности Тильды меняются, а embed-параметры YouTube и RuTube обновляются без предупреждения, поэтому перед запуском я уточняю их у самих сервисов.

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

Почему ролик продолжает играть после закрытия окна?

Это происходит, когда iframe вставлен в скрытый блок заранее, а окно закрывается только через display: none. Плеер остаётся живым. В коде из статьи iframe создаётся при клике и удаляется методом remove() при закрытии, поэтому звук прекращается сразу.

Можно ли открывать разные ролики с разных кнопок?

Да. В объект videos добавляете новую пару «ссылка: адрес плеера» и указываете эту ссылку в нужной кнопке. Окно остаётся одно, меняется только адрес в iframe. Ссылки придумывайте с одним и тем же началом, например #video-, чтобы не путать их со штатными хуками окон.

Работает ли это на бесплатном тарифе?

Вставка своего HTML-кода относится к платным тарифам, поэтому на Free блок T123 для такой задачи не рассчитан. На Personal и Business схема работает одинаково. Перед покупкой сверьтесь со страницей тарифов Тильды, состав тарифов может меняться.

Как сделать так, чтобы окно закрывалось по Esc и клику на фон?

В коде это уже есть: обработчик keydown реагирует на клавишу Escape, а в обработчике клика проверяется, что нажат сам слой vp-overlay, а не рамка с роликом. Если закрытие по фону не нужно, удалите условие e.target === overlay из последней проверки клика.