Как создать собственный видеофон хедера

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

В данной статье мы постараемся максимально доступно объяснить, как сделать собственный видеофон в шапке сайта без каких-либо трудностей.

Вводная часть

В качестве примера мы будем использовать шаблон GavickPro Steak House. Он актуальный, очень популярный и, судя по поисковым запросам, наиболее интересный в отношении видеофонов, поэтому мы сэкономим время, которое пользователи могли потратить на поиск по форуму или использование обратной связи. По умолчанию хедер шаблона отображает картинку слайдера. Здесь можно установить случайный выбор изображения либо вращать слайдер в реальном времени, но добавить сюда видео изначально не представляется возможным. Давайте же решим эту проблему.

Способы добавления видеофонов

Если вы ходите добавить видеофон на всю ширину страницы вашего веб-сайта и не ограничены в использовании пространства главной страницы, то написание кода вручную может оказаться нецелесообразным, поскольку специально для таких целей существуют некоторые готовые плагины, такие как YT Player for Background Videos. Конфигурирование данного плагина достаточно несложное, но он может быть использован не со всеми шаблонами. Для более простых видеофонов существуют некоторые другие методы, которые также можно использовать.

Использование плагина вставки iframe для отображения видео с популярных сервисов.

Сервисы как YouTube, Vimeo и т.п. позволяют отображать свои видеоролики с помощью iframe. (Не забудьте проверить лицензию видео, которое вы хотите использовать. Избегайте изпользования материалов, защищённых авторским правом либо удостоверьтесь, что их использование разрешено вам владельцем, если это необходимо). После выбора видео необходимо кликнуть на кнопку «поделиться», чтобы получить iframe-код, готовый к вставке на страницу вашего сайта. Чтобы видео воспроизводилось, нам потребуется добавить вышеупомянутый код в файл Steakhouse/header-frontpage.php в область хедера, после строки:

HTML код:
<header id="gk-header" role="banner" style="background-image: url("<?php header_image(); ?>");">

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

HTML код:
<iframe id="video-bg" src="//www.youtube.com/embed/k0wTHj1zAOY?rel=0" seamless="seamless" allowfullscreen></iframe>

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

HTML код:
&autoplay=1&controls=0&loop=1

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

После обновления страницы вы увидите, что видео отображается, но в маленьком «контейнере» перед хедером страницы. Для того, чтобы оно было правильно размещено на странице, потребуется немного CSS-стайлинга.

Можно использовать файл файл SteakHouse/css/override.css либо метод, указанный «здесь» (ссылка), чтобы добавить собственный CSS-код в шаблон.

Для начала необходимо сделать фон #gk-header and #gk-bg прозрачным - это позволит отобразить видеоролик.

Затем следует установить позицию видеоконтейнера как «повсеместная» и задать значения z-index proper (+1) или negative (-1) для лучшего эффекта:

CSS код:
#gk-bg {
  background: transparent;
}
 
#gk-header {
    background: transparent!important;
    overflow: hidden;
}
#video-bg {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

Загрузка и использование собственного видео

Если вы ходите использовать собственное видео, а не видео с хостинга на подобие Youtube, то первое, что для этого потребуется сделать, это загрузить данное видео в вашу медиатеку, после чего вы сможете увидеть и скопировать полный путь к загруженному файлу. Затем, определив место отображения хедера, перейдите к файлу Steakhouse/header-frontpage.php и добавьте ваше видео в хедер - в то же место, как и в методе, описанном выше, но немного другой код:

HTML код:
<video autoplay loop poster="cookies.jpg" id="bg-video">
    <source src="https://our-website/uploads/2015/01/cookies.webm" type="video/webm">
    <source src="https://our-website/uploads/2015/01/cookies.mp4" type="video/mp4">
</video>

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

Теперь видео будет отображаться, но только в маленьком «контейнере» перед хедером (как и после вставки iframe в предыдущем случае). Если необходимо установить это видео в качестве фона, то потребуется выполнить CSS-стайлинг, как и прежде.

Как и ранее, необходимо сделать прозрачным фон #gk-header и #gk-bg , чтобы предоставить некоторое свободное пространство для видео и сделать его видимым для пользователей, и вновь установить позицию видеоконтейнера «повсеместная» и задать значения z-index proper (+1) или negative (-1) :

CSS код:
#gk-header {
    background: transparent!important;
    overflow: hidden;
}
 
#gk-bg {
    background: transparent;
}
 
#bg-video {
    background: url('poster.jpg') no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%; 
    height: auto;
    z-index: -1;
}

Теперь это должно выглядеть приблизительно так:

На сегодня это всё! А теперь идите и добавьте видеофон для содержимого вашего сайта! Надеемся, что эта статья была полезной, а если у вас возникли какие-то предложения, то почему бы не поделиться ими в комментариях ниже?