Создание видео фона на вашем сайте с помощью HTML и CSS

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

В этом уроке мы рассмотрим, как создать фон для видео с помощью HTML и CSS. Репозиторий GitHub был предоставлен с стартовыми файлами и полный исходный код.

Вы также можете ознакомиться с действующей версией:

Предпосылки

В этом руководстве предполагается, что у вас есть базовые знания HTML и CSS.

Почему фоновое видео?

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

Начало работы

Для создания фона видео мы будем использовать следующее:

• video Элемент HTML.
• source HTML-элемент.
• Стили CSS.

HTML-элемент видео

Элемент HTML <video> встраивает в документ медиаплеер, поддерживающий воспроизведение видео.

Чтобы создать видеофон, мы добавляем в HTML-код элемент <video> с элементами playsinline, autoplay, loop< /code> и атрибуты muted:

<header>
  <video playsinline autoplay loop muted>
  </video>
</header>

Каждый из атрибутов видео играет роль в работе фонового видео:

• playsinline позволяет воспроизводить видео на iOS.
• autoplay гарантирует, что видео начнет воспроизводиться сразу после загрузки страницы.
• loop позволяет воспроизводить видео непрерывно без остановки.
• muted отключает звук видео.

:::подсказка 💡 Примечание. Мы не включили атрибуты управления, потому что не хотим, чтобы пользователь мог управлять нашими видео. То есть мы не хотим, чтобы они воспроизводили/приостанавливали наше видео.

:::

В этот момент на нашем экране не должно отображаться видео:

Исходный HTML-элемент

Элемент source будет использоваться для предоставления нескольких ресурсов для нашего видеоэлемента. Это означает, что мы можем предоставлять различные форматы (.mp4, .webm, и ****.ogg) **** нашего видео.

Видео в разных форматах предоставлено в репозитории Github.

<header class="cont">
  <video playsinline autoplay loop muted>
    <source src="./videos/jellyfish.mp4" type="video/mp4" />
        <source src="./videos/jellyfish.webm" type="video/webm" />
        <source src="./videos/jellyfish.ogg" type="video/ogg" />
  </video>
</header>

В этот момент на нашем экране должен отображаться фон нашего видео:

Стили видео с помощью CSS

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

Некоторые свойства CSS будут переданы в header, чтобы сделать возможным наш стиль:

• относительное положение позволяет нам контролировать, где размещать видео
• фиксированная высота ограничивает высоту видео

.cont {
  position: relative;
  height: 85vh;
}

Наш элемент видео будет иметь следующие свойства CSS:

• position устанавливает положение видео
• вверх & left устанавливает положение по вертикали и горизонтали
• ширина & height задает размеры
• object-fit устанавливает способ изменения размера видео в соответствии с его контейнером (<header>)
• z-index размещает видео за содержимым <header>
.

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

Теперь, когда наш видеофон подготовлен, как насчет того, чтобы добавить к нему какой-нибудь контент? Давайте добавим заголовок заголовка.

На этом этапе наш экран должен иметь полностью стилизованный фон видео:

Добавление контента на фон видео

Мы установили наше видео на место. Теперь мы можем добавить любой контент поверх него. Давайте добавим такой заголовок:

<header class="cont">
  <video playsinline autoplay loop muted>
    # ....
  </video>

    <h1 class="h1">Welcome to my website.</h1>
</header>

Затем обновите наш CSS:

.cont {
  /* add this */
  display: flex;
  align-items: center;
  justify-content: center;
}

.h1 {
  color: #fff;
  font-size: 5rem;
}

Мы даже можем улучшить видимость, добавив наложение:

<header class="cont">
  <video playsinline autoplay loop muted>
    # ....
  </video>

    <div class="overlay"></div>
    <h1 class="h1">Welcome to my website.</h1>
</header>

Наш CSS должен быть обновлен следующим образом:

.video {
    z-index: -2;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

В этот момент на нашем экране должно быть содержимое на фоне видео:

Заключение

Видеофоны – универсальный инструмент для веб-дизайна. Проявив некоторую изобретательность, вы можете добиться уникальных результатов, которые соответствуют вашему бренду и целям. Получайте удовольствие!

Подводя итог, вот основные шаги по созданию фона видео:

1. Добавьте в HTML элемент <video> с необходимыми атрибутами (autoplay, loop, muted)
2. Включите элементы <source> для предоставления видеофайлов в нескольких форматах (mp4, webm, ogg)
3. Стили видео с помощью CSS (позиция, размеры, object-fit, z-index)< /li>
4. Добавьте контент поверх видео и придайте ему нужный стиль
5. Рассмотрите возможность добавления наложения для улучшения видимости текста.

Вы даже можете пойти дальше:

• добавление атрибута постера к видео
• сделать фон полностраничным

В целом, видеофоны — это эффективный способ улучшить ваш веб-сайт и произвести неизгладимое первое впечатление на посетителей. Немного поэкспериментировав, вы сможете создать уникальные результаты, адаптированные к вашему бренду и целям. Получайте удовольствие!

Также опубликовано здесь