Главная > Веб мастерская > WordPress > Как установить видео фон на WordPress

Как установить видео фон на WordPress

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

videofon-600x410

 

Одна из наиболее популярных тенденций в веб-дизайне – видео ролики, которые воспроизводятся на фоне. Браузеры могут проигрывать фоновое видео при помощи HTML-5 тега video или с помощью формата H.264. Видео могут запускаться автоматически и автономно. Вы можете управлять видео роликами точно так же, как вы управляете любым другим элементом страницы. Видео фон может значительно улучшить визуальное представление вашего сайта и выделить его среди остальных ресурсов.

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

Шаг 1. Выбираем исходный видео ролик.

Вы можете либо использовать свое собственное видео и хранить его самостоятельно, либо взять его из некоторого источника, такого как YouTube или Vimeo. Также вы всегда можете использовать стоковые видео. Для интегрированных видео плееров подойдет любой метод.

Шаг 2. Конвертируем видео в соответствующий формат и меняем до нужных размеров

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

Шаг 3. Выбираем подходящий видео плеер.

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

HTML5, CSS и JavaScript

Преимущества кодирования с помощью HTML5, CSS, и JS состоят в малом весе и в адаптивности, вы можете стилизовать проигрыватель, как и любой другой элемент. Также вы можете протестировать видео в браузерах и вывести на экран альтернативное изображение для тех браузеров, которые не поддерживают воспроизведение видео (как, к примеру, Opera или IE).

Разметка

Сначала создаем контейнер для JS:

 

<section id="big-video">

<div class="video" data-src="[FALLBACK IMAGE URL]" data-video="[VIDEO URL]" data-placeholder="[PLACEHOLDER IMAGE URL]"></div>

</section>

В нем содержатся два изображения: первое – как заполнитель для первого кадра в видео, а второй – как альтернативное изображение.

Скрипты

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

function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

window.isIEOld = isIE() && isIE() < 9;
window.isiPad = navigator.userAgent.match(/iPad/i);

var img = $('.video').data('placeholder'),
video = $('.video').data('video'),
noVideo = $('.video').data('src'),
el = '';

if($(window).width() > 599 && !isIEOld && !isiPad) {
el += '<video autoplay loop poster="' + img + '">';
el += '<source src="' + video + '" type="video/mp4">';
el += '</video>';
} else {
el = '<div class="video-element" style="background-image: url(' + noVideo + ')"></div>';
}

$('.video').prepend(el);

Если требования для видео соблюдены, видео будет воспроизведено. Если нет, то в таком случае будет выведено на экран альтернативное изображение. Также происходят тесты разрешения экрана. Имеется проверка того, является ли устройство iPad’ом или нет. Вы можете протестировать любые параметры.

CSS

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

#big-video {
position: relative;
background: #000;
overflow: hidden;
height: 582px;
}

#big-video .video {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}

#big-video video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

#big-video .video-element {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: auto 100%;
}

Плагины

Другой вариант установки видео фона – использование плагинов. Вот пример некоторых плагинов, которые подойдут для этого:

Image & Video FullScreen Background WordPress Plugin

Этот премиум-плагин обеспечивает вывод слайдера с фоновыми изображениями, позволяет задавать видео фон, мультимедиа галереи, а также видео галереи. Он выводит их в полноэкранном виде. Плагин совместим с мобильными устройствами (без автопроигрывания). Он поставляется с двумя скинами и двумя стилями, имеет анимированный текст, два перехода, поддерживает ссылки на каждом слайдер, позволяет вам размещать текстуру поверх изображений. Плагин воспроизводит YouTube и Vimeo видео. Он имеет более 40 параметров, которые вы можете настраивать.

Регулярная лицензия стоит $17 для одного клиента и предназначена для некоммерческих проектов. Расширенная лицензия стоит $85 для одного клиента и предназначена для коммерческих проектов.

Easy Video Background WP

Еще один премиум-плагин, который поддерживает все браузеры, включая Internet Explorer 7 и 8. Он автоматически выберет оптимальный формат файла для вывода на экран. Плагин использует HTML5 и откатится до Flash, если HTML5 не поддерживается. Плагин выводит изображения на мобильных устройствах. Видео размещаются на страницах и в записях с помощью шорткодов. Плагин поддерживает абсолютное и фиксированное позиционирование, а также поддерживает соотношение сторон.

Регулярная лицензия стоит 14 долларов, расширенная лицензия – 70 долларов.

Video Player & FullScreen Video Bgd. — WP Plugin

Премиум-плагин для воспроизведения видео – как автономных, так и размещенных на Vimeo и YouTube. Плагин выводит их в полную ширину, в фиксированной ширине или на весь экран. Вы можете поместить текстуру поверх видео. Плагин совместим с мобильными устройствами (автопроигрывание отключается). Плагин имеет свыше 30 параметров, которые вы можете настраивать, и является очень легким.

Регулярная лицензия – 16 долларов, расширенная лицензия – 80 долларов.

mb.YTPlayer for background videos

Плагин позволяет воспроизводить фоновое видео с YouTube на главной страницы вашего сайта, а также на любой другой странице и в любой записи. Плагин использует YouTube iframe API и выводит видео с помощью тега HTML5 VIDEO.

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

Bgvideo

Плагин для воспроизведения фоновых видео. Работает с помощью шорткодов. Плагин воспроизводит MP4, WebM и OGG видео по предложенному URL. Вы можете задавать высоту, ширину, фиксированную позицию, автопроигрывание, зацикливание, а также отключение аудио.

Удачи, друзья! Успехов вам и красивых сайтов!

NEW!!! Полезное, нужное, важное:

Где заработать в интернете деньги? Надёжно, честно, без обмана!
Платежные системы, кошельки и обменники для работы

Лучшие хостинги, сервера и прочее для сайтов

Смотрите также

смена домена вордпресс

WordPress смена домена (как поменять домен сайта)

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *