Как создать видео всплывающие окна (pop-up) в WordPress: практическое руководство

Автор: Юлия Игнатьева | Опубликовано: 26.02.2026

Всплывающие окна с видео — отличный способ привлечь внимание посетителей вашего сайта, повысить вовлечённость и конверсию. В этой статье разберём, как создать видео pop-up в WordPress с помощью плагинов и собственного кода, а также рассмотрим тонкости настройки и оптимизации для разных устройств.

Почему стоит использовать видео всплывающие окна в WordPress

Видео в pop-up помогает быстро донести основное сообщение, не заставляя пользователя искать нужный контент. Такой подход полезен для запуска промо-роликов, презентаций, обучающих материалов или отзывов клиентов. Кроме того, всплывающие окна позволяют отложить загрузку тяжелого видео, улучшая скорость загрузки страницы.

Однако важно не злоупотреблять pop-up, чтобы не раздражать пользователя и не ухудшать показатели SEO. Правильная настройка и грамотное использование — ключ к успеху.

Использование плагинов для создания видео pop-up

Плагин Popup Maker

Popup Maker — универсальный и популярный плагин для создания любых всплывающих окон. Он поддерживает вставку видео с YouTube, Vimeo и локальных файлов.

Для создания видео pop-up с Popup Maker:

Установите и активируйте плагин Popup Maker.
Перейдите в раздел "Popup Maker » Добавить новый".
В редакторе добавьте видео через шорткод YouTube, например: [youtube id="VIDEО_ID"] или вставьте iframe.
Настройте условия открытия окна — например, клик по кнопке или ссылка.
Опубликуйте и протестируйте.

Popup Maker можно дополнить расширениями для более тонкой настройки поведения.

Плагин WP Video Popup

WP Video Popup — специализированный плагин для быстрого создания видео всплывающих окон. Он поддерживает автоматический автозапуск, адаптивный дизайн и работу на мобильных устройствах.

Преимущества:

Простота настройки без кода.
Возможность вставки нескольких видео с разными триггерами.
Поддержка YouTube, Vimeo и локальных видео.

Для установки посетите официальную страницу плагина.

Создание видео pop-up на чистом коде

Если нужны максимально легковесные решения без плагинов, можно написать собственный скрипт с HTML, CSS и JavaScript. Рассмотрим пример создания видео всплывающего окна с YouTube.

HTML-разметка и CSS стили

<!-- Кнопка для открытия окна -->
<button id="wpvideoOpenPopup">Смотреть видео</button>

<!-- Всплывающее окно -->
<div id="wpvideoPopup" class="wpvideo-popup">
  <div class="wpvideo-popup-content">
    <span id="wpvideoClosePopup" class="wpvideo-popup-close">&times;</span>
    <iframe id="wpvideoIframe" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

<style>
.wpvideo-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
}
.wpvideo-popup-content {
  position: relative;
  margin: 10% auto;
  padding: 0;
  width: 80%;
  max-width: 700px;
}
.wpvideo-popup-close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}
</style>

JavaScript для открытия и закрытия pop-up с автозапуском видео

document.getElementById('wpvideoOpenPopup').addEventListener('click', function() {
  var popup = document.getElementById('wpvideoPopup');
  var iframe = document.getElementById('wpvideoIframe');
  // Вставьте ваш ID видео YouTube
  var videoId = 'dQw4w9WgXcQ';
  // Добавляем параметр autoplay=1 для автозапуска
  iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
  popup.style.display = 'block';
});

document.getElementById('wpvideoClosePopup').addEventListener('click', function() {
  var popup = document.getElementById('wpvideoPopup');
  var iframe = document.getElementById('wpvideoIframe');
  popup.style.display = 'none';
  // Остановка видео
  iframe.src = '';
});

// Закрытие по клику вне контента
window.addEventListener('click', function(event) {
  var popup = document.getElementById('wpvideoPopup');
  if (event.target == popup) {
    popup.style.display = 'none';
    document.getElementById('wpvideoIframe').src = '';
  }
});

Такой подход даёт полный контроль над поведением и внешним видом, без необходимости использовать сторонние библиотеки.

Оптимизация и особенности видео pop-up в WordPress

Задержка загрузки видео и lazy load

Чтобы не замедлять загрузку страницы, лучше загружать iframe с видео только при открытии окна, как показано в примере выше. Это экономит ресурсы и улучшает UX.

Совместимость с мобильными устройствами

На мобильных устройствах всплывающие окна могут вести себя иначе из-за особенностей браузеров и ограничений в автозапуске видео. Обязательно тестируйте pop-up на разных устройствах и используйте адаптивные стили.

Использование плагина OmniVideo для расширенных возможностей

Плагин OmniVideo позволяет интегрировать видео с YouTube, Vimeo и собственных хостингов с автозапуском и всплывающими окнами без сложных настроек. Он отлично подойдёт, если хотите быстро добавить продвинутые видео pop-up с минимальным кодом.

Резюме по созданию видео всплывающих окон в WordPress

Для создания видео pop-up в WordPress можно использовать как проверенные плагины Popup Maker и WP Video Popup, так и написать собственное решение на JavaScript. Важно учитывать производительность, совместимость с мобильными устройствами и удобство пользователя. Продвинутые возможности предоставляют плагины вроде OmniVideo, которые отлично интегрируются в WordPress и расширяют функционал.

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