дизайн видео виджета

Всплывающее окно на сайт с помощью видео виджета

Что такое видео виджет всплывающего окна

Видео Виджет всплывающего окна — это тип графического элемента пользовательского интерфейса, который позволяет владельцам сайтов отображать видеоконтент во всплывающем окне или модальном диалоговом окне. Когда пользователь нажимает на указанную кнопку или ссылку, видеоплеер появляется в отдельном окне или оверлее, позволяя пользователю смотреть видео, не покидая текущей страницы.

видео виджет всплывающего окна

Преимущества и недостатки

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

  1. Отображая видео во всплывающем окне, вы обеспечиваете беспрепятственный просмотр, не отвлекая посетителей, поскольку им не нужно переходить со страницы на страницу или взаимодействовать с другими экранными элементами.
  2. Служат для продвижения товаров или услуг, предоставления обучающих материалов или демонстрации отзывов клиентов.
  3. Помогают передать идею и ценности вашего бренда более запоминающимся способом, чем просто текст или изображения.
  4. Легко добавляются на сайт с помощью простого плагина или скрипта и могут быть настроены в соответствии с дизайном и брендингом сайта.
  5. Поставляются со встроенными функциями аналитики и отслеживания, что позволяет отслеживать вовлеченность и оптимизировать стратегию.

Недостатки

  1. Некоторые посетители могут посчитать видео всплывающие окна навязчивыми или раздражающими, особенно если они автозапускаются или их трудно закрыть.
  2. Могут замедлять время загрузки страницы, особенно если видео большого размера или размещено на медленном сервере.
  3. Некоторые всплывающие окна могут работать не на всех устройствах, например, на старых смартфонах или планшетах, что может ограничить их охват и эффективность.
  4. Могут быть недоступны, особенно тем, кто использует вспомогательные технологии или имеет инвалидность.
  5. Эффективны не для всех типов контента: например, видеовиджеты бесполезны для длинных статей или сообщений в блогах.

Типы всплывающих видеовиджетов

  1. Lightbox: отображают видео во всплывающем окне. Оно появляется поверх основного содержимого страницы, затемняя фон.
  2. Встроенные: отображают видео прямо на странице, а не в отдельном всплывающем окне. Ролик воспроизводится автоматически или требует от пользователя нажатия кнопки для начала воспроизведения.
  3. Exit-intent video popups: появляются, когда пользователь собирается покинуть страницу, и могут быть использованы для предложения или предоставления дополнительной информации, чтобы побудить его остаться на сайте.
  4. Slide-in video popups: появляются сбоку или снизу экрана, привлекая внимание посетителя и не прерывая его просмотр.
  5. Полноэкранные: отображают видео в полноэкранном режиме, блокируя все остальные экранные элементы для создания более захватывающего впечатления от просмотра.
  6. «Липкие»: остаются прикрепленными к краю экрана, когда пользователь прокручивает страницу, делая видеоконтент видимым все время.

Как создать всплывающий виджет для видео

Найти платформу

Вам нужно будет разместить видео, например, на YouTube, Vimeo или Wistia. Загрузив его, вы получите ссылку или код для вставки в виджет.

Главная цель YouTube — показывать рекламу, поэтому может быть трудно удалить рекламу или предложения в конце видео.

Vimeo не предлагают другие видео для просмотра в конце вашего видео и не показывают рекламу. Их цены также довольно доступны.

Wistia

Wistia — самый удобный для бизнеса инструмент из трех платформ. Созданный с учетом потребностей малого и среднего бизнеса, он предлагает несколько хороших опций:

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

Настройка параметров

  • Размер

Всплывающее видео должно занимать не менее 50% экрана — если оно занимает больше, то оно слишком навязчиво для посетителя. Если оно занимает меньше, то на больших экранах оно может быть слишком маленьким. Для всплывающего окна на рабочем столе, с разрешением 1280 x 800, ширина должна быть такой:

1280 / 2 = 640 пикселей. При соотношении 16/9 высота видео будет 376 пикселей.

При таких настройках вот как будет выглядеть видео на экране 1280 x 800 ?

видео виджет
  • Автоплей

Большинство навигаторов отключают звук видео при активации автовоспроизведения. Можно активировать автовоспроизведение, если видео можно смотреть без звука, но это не выход, если зрителям нужен звук.

  • Скрыть рекомендации видео (только для YouTube)

Если вы решили использовать YouTube для размещения своего видео, отключите рекомендации в конце видео. Они могут оттолкнуть посетителей от вашего сайта после окончания ролика.

Скрыть рекомендации видео

Тайминг

Если найти подходящее время для всплывающего окна для вас сложно, то смело выводите его на лендинг (так поступает большинство наших клиентов).

Exito — интернет-магазин в Колумбии. Их маркетинговая команда подготовила видеорекламу ко Дню матери. Чтобы увеличить количество просмотров, они показали ее всем посетителям, зашедшим на их домашнюю страницу в тот день.

Exito

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

Дизайн

  • Используйте наложение

Просмотр видео поверх веб-сайта может быть более комфортным с эффектом всплывающего лайтбокса, который затемняет фон и помогает посетителям сосредоточиться на всплывающем видео.

дизайн видео виджета
  • Добавьте удобные для пользователя опции закрытия

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

  • Используйте цвета и шрифты вашего сайта

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

Самый быстрый способ создать виджет

Если вам не хочется самостоятельно «при помощи кувалды и какой-то матери» создавать видео виджет для сайта, всегда можно воспользоваться уже готовым инструментом. Например, видео виджетом Epic Hunter. Специалисты компании помогут вам создать максимально эффективный инструмент, который будет решать задачи вашего бизнеса, удерживать клиентов на сайте и повышать конверсию в покупку.