Как сделать всплывающее окно с видео в WordPress
Если нужно показать демонстрацию товара, инструкцию или короткую презентацию, видео можно открыть во всплывающем окне поверх страницы. Для этого в WordPress обычно используют плагин попапов: он отвечает за появление и закрытие окна, а видео добавляют в его содержимое через блок редактора или код встраивания.
Практичный вариант для большинства сайтов — открывать ролик после нажатия на кнопку «Смотреть видео». Посетитель сам выбирает момент, а окно не перекрывает страницу сразу после загрузки. Автоматический показ уместен только в отдельных сценариях и требует более осторожной настройки.
Выберите способ вставки видео
Сначала решите, откуда будет загружаться ролик. Для большинства демонстраций удобнее разместить его на видеохостинге и встроить в окно: файл не хранится на вашем сервере, а видеоплатформа обычно сама подбирает качество воспроизведения. Подойдут YouTube и другие сервисы, которые поддерживает ваш сайт и используемый плагин.
Самый простой способ — вставить ссылку на ролик в блок редактора WordPress, который поддерживает встраивание с выбранной площадки. Если редактор попапа не распознаёт ссылку, используйте предоставленный видеосервисом код встраивания или блок «Произвольный HTML». Возможность вставить iframe зависит от редактора и плагина; WordPress может ограничивать такой код для некоторых ролей пользователей.
Например, для YouTube можно использовать адаптивную обёртку с адресом встраивания. Замените VIDEO_ID на идентификатор ролика. Вставляйте код в HTML-блок или редактор попапа, который разрешает iframe:
<div style="position:relative;aspect-ratio:16/9">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="Демонстрация продукта"
loading="lazy"
style="position:absolute;inset:0;width:100%;height:100%;border:0"
allowfullscreen>
</iframe>
</div>Адрес с доменом youtube-nocookie.com включает режим повышенной конфиденциальности YouTube, но сам по себе не отменяет всех вопросов, связанных с согласием на сторонние сервисы и обработкой данных. Если у вас настроен механизм согласия на внешние ресурсы, проверьте, как он работает с видео внутри попапа. Не добавляйте автозапуск без необходимости: он может быть неожиданным для посетителя и не всегда срабатывает в браузерах, особенно на мобильных устройствах.
Можно загрузить видеофайл в медиатеку WordPress и добавить его через видеоблок. Такой способ имеет смысл, если ролик должен храниться на вашем сайте. Но большой файл увеличивает нагрузку на хостинг и расход трафика, а воспроизведение и качество могут зависеть от возможностей сервера. Для длинной или часто просматриваемой демонстрации обычно удобнее видеохостинг.
Создайте попап и добавьте ролик
Для окна нужен плагин, который позволяет задать содержимое, способ открытия и закрытие. Например, можно рассмотреть My Popup или другой подходящий инструмент. Перед настройкой проверьте в документации или тестовом окне, что редактор плагина принимает нужный видеоблок либо iframe: возможности и названия настроек у разных решений отличаются.
Установите и активируйте выбранный плагин в административной панели WordPress. Если это рабочий сайт, сначала проверьте новый плагин на тестовой копии или в период низкой посещаемости.
Создайте новое всплывающее окно и добавьте понятный заголовок, если он нужен. В область содержимого вставьте видео через поддерживаемый блок или код встраивания. Не помещайте рядом длинный текст: в попапе важнее быстро объяснить, что посетитель увидит и зачем ему смотреть ролик.
Настройте ширину окна так, чтобы на компьютере видео не выглядело слишком маленьким, а на телефоне помещалось в экран. Для ролика формата 16:9 оставьте пропорции при изменении ширины. Если в настройках есть отдельные размеры для мобильных устройств, проверьте, что окно не выходит за границы экрана и кнопку закрытия легко нажать.
Выберите действие, которое открывает попап. Для демонстрации товара или услуги начните с нажатия на кнопку или ссылку. Если плагин предлагает показ после задержки или прокрутки, используйте эти условия только при ясной цели: например, предложить инструкцию тем, кто уже прочитал описание.
Добавьте заметную кнопку закрытия. Посетитель должен иметь возможность прекратить просмотр и вернуться к странице без поиска выхода. Закрытие по нажатию вне окна можно включить дополнительно, но не делайте его единственным способом закрыть попап.
Ограничьте повторные показы, если такая настройка есть. Не показывайте одно и то же окно при каждом переходе по сайту. Для предложения, которое не меняется, разумно скрывать его после закрытия на некоторый период; конкретный интервал выбирайте по сценарию и проверяйте на реальных посещениях.
Если попап открывается по кнопке, проверьте, что кнопка действительно связана с нужным окном: в редакторах и плагинах способ привязки различается. Не ставьте эту кнопку рядом с другими действиями, если из-за этого посетителю трудно понять, что произойдёт после нажатия.
Когда показывать окно с видео
Для обзора товара обычно достаточно кнопки «Посмотреть демонстрацию» рядом с описанием или изображениями. Так видео появляется по запросу, а сам попап не мешает сравнивать характеристики и читать страницу. Для инструкции кнопку можно расположить возле шага, к которому относится ролик. На странице услуги видео может объяснять процесс работы, но не должно заменять важные условия и стоимость, если они нужны для принятия решения.
Таймер или показ после прокрутки подходят не всем страницам. Если окно появляется до того, как посетитель понял предложение, он скорее закроет его, чем начнёт смотреть. Не перекрывайте попапом форму, корзину, меню или другой важный элемент. Для нового и вернувшегося посетителя могут быть уместны разные сценарии, но делите аудиторию только тогда, когда действительно меняется содержание или цель показа.
На телефоне особенно важно избегать полноэкранного навязчивого окна, которое закрывает контент и не помещается в область просмотра. Проверьте вертикальную ориентацию, видимость кнопки закрытия и прокрутку внутри окна. Если видео и кнопки не помещаются одновременно, уменьшите текст или упростите содержимое, а не заставляйте посетителя искать выход.
Проверьте попап до публикации
После сохранения откройте страницу не только в редакторе, но и в обычном браузере. Проверьте окно в режиме инкогнито и после повторного посещения: настройки показа по частоте могут запоминаться в браузере, поэтому результат для одного и того же пользователя отличается от первого просмотра. Убедитесь, что ролик запускается после нажатия на воспроизведение, звук не включается неожиданно, а закрытие возвращает к тому месту страницы, где посетитель открыл окно.
Затем протестируйте сайт на смартфоне и компьютере. Посмотрите, не обрезается ли видео, не перекрывает ли кнопка закрытия плеер и можно ли прокрутить содержимое попапа, если оно выше экрана. Если ролик не отображается, проверьте, поддерживает ли редактор плагина выбранный способ встраивания, не удалил ли WordPress iframe и не блокируют ли внешний контент настройки безопасности или согласия на cookies.
Наконец, проверьте скорость загрузки страницы. Некоторые плагины загружают встроенный плеер сразу, даже если окно пока закрыто; поведение зависит от реализации. Если страница стала медленнее, выясните, загружается ли iframe до открытия попапа, и рассмотрите вариант, при котором видео подгружается только по действию посетителя. Не отключайте скрипты сайта наугад: сначала проверьте изменения на тестовой копии.
Оцените, помогает ли видео
Сам факт появления ролика не означает, что конверсия вырастет. Смотрите, открывают ли посетители окно, досматривают ли видео и выполняют ли после просмотра целевое действие: например, переходят к заявке или нажимают кнопку заказа. Если попап часто закрывают сразу, проверьте соответствие ролика странице, формулировку кнопки и момент показа. Меняйте по одному элементу за раз — так проще понять, что повлияло на результат.
Используйте видео в попапе, когда оно быстрее и понятнее объясняет предложение, чем текст или статичное изображение. Оставьте посетителю контроль над просмотром, не повторяйте окно слишком часто и обязательно проверяйте его на мобильных устройствах. Тогда всплывающее окно будет помогать разобраться в продукте, а не отвлекать от страницы.