содержание x
    Как создать попап с видео
    • 07 Feb 2023
    • 1 минута
    • Темная тема
      Светлая тема
    • формат pdf
    содержание

    Как создать попап с видео

    • Обновлено 07 Feb 2023
    • 1 минута
    • Темная тема
      Светлая тема
    • формат pdf
    Article Summary

    Рассмотрим способ создания попапа с видео:

    Добавьте в кампанию попап:

    создать-попап.png

    Выберите шаблон. Например, информационный с картинкой:

    Снимок экрана 2022-08-05 в 16.14.04.png

    После выбора шаблона укажите сайт:

    выбрать сайт.png

    В разделе «Попап» нажмите «Изменить», затем — «Редактировать»:

    редактировать попап.png

    Откройте код:

    Снимок экрана 2022-08-05 в 22.25.35.png

    Уберите тег <img/>:
    Снимок экрана 2022-08-05 в 22.26.38.png

    И вставьте код с ссылкой на видео:

    <video controls autoplay loop muted class="popmechanic-video popmechanic-video-desktop">
<source src="ссылка на видео" type="video/mp4">
</video>

    Снимок экрана 2022-08-05 в 22.55.45.png

    src для video - это ссылка на конкретный видеофайл, который должен быть загружен в хранилище. Это хранилеще по ссылке должно выдавать сам файл, а не страницу для его скачивания (поэтому не подходят такие системы как Битрикс 24 или Яндекс диск). Ссылка на видео в YouTube также не подойдет. Мы рекомендуем загрузить видео на сайт, на котором будет показана форма.

    Используем тег <video> с атрибутами:

    • autoplay — видео воспроизводится автоматически после загрузки страницы;
    • loop — после завершения видео повторяется с начала;
    • controls — добавляет панель управления к видео;
    • muted — видео включается без звука.

    В последних версиях Google Chrome блокируется автовоспроизведение видео со звуком. Чтобы этого избежать, используйте атрибут muted

    В css замените селектор img на video, чтобы свойства прописались нужному тегу:

    Снимок экрана 2022-08-05 в 22.56.14.png

    Протестируйте на сайте:

    Снимок экрана 2022-08-05 в 22.57.01.png

    Остальные настройки попапа выполните по базовой инструкции.

    Как использовать попапы, не раздражая клиентов. Какие ошибки совершают бренды при создании попапов и как сделать, чтобы этот инструмент приносил пользу и клиенту, и компании.
    Была ли эта статья полезной?
    What's Next