Как создать видеогалерею на HTML,CSS

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

Интерактивные видеогалереи с формами и аналитикой позволяют не только красиво представить контент, но и собирать заявки напрямую во время просмотра. Ниже рассмотрим, как реализовать такую галерею вручную на HTML/CSS, а также сравним этот подход с готовым решением от QFORM, которое позволяет запускать интерактивные видеоблоки без привлечения разработчика.

Хотите галерею, которая не просто показывает ролики, но и собирает заявки?

Попробуйте QFORM

HTML–структура

Открываем файл index.html. Внутри тега <body> вставляем заголовок с тегом <h1> и текстом «Путешествия по России». Далее создадим div-контейнер для галереи с классом gallery.

<h1>Путешествия по России</h1>
<div class="gallery">
</div>

Внутри этого контейнера будут располагаться блоки-обёртки для заголовков и видео. Добавим первый блок-обёртку с заголовком:

<div class="gallery">
  <div class="wrap_video_item">
    <h3></h3>
  </div> <!-- END wrap_video_item -->
</div> <!-- END gallery -->

Теперь загрузим видео в галерею. Внутри <div class="wrap_video_item"> добавляем ещё один контейнер с классом video_item, внутри которого размещаем элемент <video> с атрибутом src (путь к видеофайлу) и controls, чтобы включить элементы управления плеером. Например, добавим видео о Санкт-Петербурге и подпишем его:

<div class="container">
  <div class="gallery">
    <div class="wrap_video_item">
      <h3>Санкт-Петербург</h3>
      <div class="video_item">
        <video src="video/piter.mp4" muted controls></video>
      </div>
    </div> <!-- END wrap_video_item -->
  </div>
</div>

Так можно добавить несколько блоков-обёрток и изменить ссылки на нужные видео.

Примечание: Если вы не хотите вручную собирать структуру из div-блоков, можно использовать готовый embed-виджет от QFORM, который автоматически создаёт адаптивную видеогалерею с заявками.

CSS-стили

Открываем файл style.css. Для начала зададим стили для контейнера с классом gallery, чтобы он располагал блоки в ряд:

.gallery {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

Далее стилизуем обёртку и видео внутри неё. Зададим ширину для .wrap_video_item и сделаем видео растягивающимся по ширине контейнера:

 .wrap_video_item{
    width: 30%;
    height: auto;
  }
  video{
    width: 100%;
    height: auto;
  }

Добавим эффект увеличения при наведении. При наведении на .video_item он будет плавно масштабироваться и подсвечиваться:

 .video_item:hover{
    position: relative;
    transform: scale(1.5);
    z-index: 1;
    transition-duration: .5s;
    transition-timing-function: ease-out;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }

Также можно указать стили для заголовков галереи:

h2 {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
  }
  h3{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

Совет: воспользуйтесь QFORM, чтобы настроить внешний вид галереи под ваш дизайн легко и быстро!

Javascript

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

$(document).ready(function() {
    $("video").on("mouseover", function(event) {
      this.play();
    }).on('mouseout', function(event) {
      this.pause();
    });
  })

Галерея готова. Всё, что остаётся – добавить остальные видеофайлы в HTML-документ.

Примечание: QFORM позволяет включать автозапуск, сценарии показа и отображение формы без дополнительного программирования.

Сценарии использования видеогалереи

Карточки товаров. В интернет-магазине видеогалерея позволяет демонстрировать товар «в деле». По статистике одного случая внедрения на примере магазина бытовой техники после запуска галереи с обзорами «живых» товаров посетители стали дольше проводить время на сайте, а конверсия карточек товара выросла.
Галерея отзывов. Видеоотзывы реальных клиентов (customer testimonials) смотрятся убедительнее текста. Наглядные отзывы повышают доверие к бренду и ускоряют решение о покупке. Видео-галерея с отзывами всегда будет работать лучше статичных цитат.

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

Преимущества QFORM перед ручной реализацией

Ручная галерея: требует знания HTML/CSS/JavaScript и занимает много времени на верстку, отладку и тестирование. При большом количестве видео легко ошибиться в коде и столкнуться с проблемами совместимости на разных браузерах.
Галерея QForm: создаётся без программирования — пользуйтесь готовым виджетом. Она сразу адаптивна под любые экраны и корректно отображается на всех CMS. Интегрированные инструменты аналитики и CRM-уведомления позволяют настроить сбор лидов без дополнительной разработки. По данным экспертов QForm, компании, внедрившие видеоконтент в виде галерей, получают заметные преимущества: рост вовлеченности, доверия и увеличение числа лидов.

Готовое решение с Qfrom

Написание кода вручную даёт полный контроль над дизайном и функциональностью, но у этого подхода есть минусы:

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

Готовые решения, такие как видеовиджет QForm, предоставляют удобный способ разместить видео на сайте без программирования. С его помощью вы быстро настроите параметры запуска, вид отображения, кнопку призыва к действию и отправку целей в систему аналитики. Это экономит время и упрощает процесс.

FAQ

Вопрос: Сколько времени занимает запуск видео-галереи?
Ответ: По опыту QForm, базовую видеогалерею можно собрать за несколько минут. После настройки виджета и вставки скрипта ролики сразу начинают работать на сайте.

Вопрос: Нужны ли для этого навыки программирования?
Ответ: Нет. В QForm всё настраивается через визуальный конструктор.

Вопрос: Как видео влияет на продажи?
Ответ: Видео увеличивает время на сайте, доверие и конверсию. По статистике, 90% людей решаются купить после просмотра ролика, а видеогалерея помогает удерживать посетителей и снижать отказ.

Создать видеогалерею, которая собирает заявки

Готовы создать собственную продающую видеогалерею? Запустите QFORM и убедитесь, что галерея может быть не просто красивым элементом сайта, а эффективным инструментом продаж.

Зарегистрироваться

Понравилась статья? Поделись!!