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

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

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

Каждый видеоролик представлен в виде блока с названием. При наведении блок плавно увеличивается, а по клику видео запускается в плеере.

Перед основной работой:

Подготовим видеофайлы и поместим их в отдельную папку внутри документа.
Создадим файлы: index.html – для разметки, style.css – для стилей, main.js – для скриптов.
В файле index.html внутри тега <head> надо указать ссылки на другие файлы и добавить вспомогательную библиотеку jquery. Все это выглядит примерно так:

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
  </head>

Теперь начнем создавать галерею, следуя шагам ниже.

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"> разместим блок с помощью тега <div> и классом "video_item". Внутри него добавим ролик. Для этого используем элемент <video>, который содержит атрибут src, указывающий на путь к видеофайлу, и controls, чтобы добавить элементы управления плеера. Так как в самом начале мы поместили файлы в отдельную папку, наш путь выглядит так: video/название_файла. В качестве примера разместим видео о Санкт-Петербурге и сразу пропишем это в заголовке.

<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>

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

CSS-стили

Теперь, когда основная структура галереи готова, можно приступить к оформлению. Открываем файл style.css.

Для начала зададим стили для нашего контейнера с классом "gallery".

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

Далее стилизуем блок-обертку и тег <video>. Укажем ширину, а высота будет автоматической.

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

Устанавливаем стили, чтоб блок увеличивался при наведении.

 .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;
  }

Javascript

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

Добавим следующий код в файл main.js

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

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

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

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

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

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