4 шага, чтобы добавить видео на фоне страницы WordPress

  1. Шаг 1 Выбор видео
  2. Шаг 2. Перевод видео в нужный формат и размер
  3. Шаг 3. Выберите видеоплеер
  4. Первый путь - HTML5, CSS и JavaScript
  5. Макет страницы
  6. скрипты
  7. CSS
  8. Второй способ - вилки
  9. Шаг 4. Добавление видео на сайт
  10. суммирование

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

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

Сегодня мы хотим представить вам интересный способ привлечения внимания посетителей с помощью видеоролика, который можно добавить на фоне сайта. На сегодняшний день этот подход - одна из самых популярных тенденций в мире веб-дизайна. Тем более что современные технологии позволяют добавлять видео в фоновом режиме: браузеры могут воспроизводить фоновое видео благодаря тегу <video> HTML5 или формату H.264 . Этот процесс является автоматическим, независимым от других, хотя вы можете управлять им. Все это позволяет создавать креативные сайты с использованием видео.

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

Шаг 1 Выбор видео

Первый очень важный шаг перед добавлением видео на сайт - это выбор. Добавить на сайт можно собственное видео и разместить его на сайтах YouTube или Vimeo , но в этом случае вам нужно помнить об авторских правах. Вы также можете купить интересные видео на специализированных сайтах:

При выборе видео вы должны помнить, что оно должно:

  • ориентироваться на целевую группу;
  • не будь слишком длинным и скучным;
  • хорошего качества

Шаг 2. Перевод видео в нужный формат и размер

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

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

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

Если размер видео уже выбран, вы можете перейти к конвертации выбранного видео. В этом могут помочь платные программы и сайты, а также их бесплатные альтернативы. Со своей стороны мы порекомендовали несколько бесплатных сервисов: convert-video-online.com и online-convert.com ,

Шаг 3. Выберите видеоплеер

Следующий важный шаг - выбрать видеоплеер для сайта. В этом случае есть несколько решений, а именно:

  1. Подключите видео к сайту самостоятельно, используя HTML5, CSS и JavaScript.
  2. Воспользуйтесь преимуществами готовых решений - плагинов.

Мы опишем приведенные способы.

Первый путь - HTML5, CSS и JavaScript

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

Макет страницы

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

<section id = "big-video"> <div class = "video" src = "[URL FALLBACK IMAGE]" data-video = "[URL VIDEO]" data-placeholder = "[URL PLACEHOLDER IMAGE]"> </ 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 ('заполнитель'), video = $ ('. video'). data ('video'), noVideo = $ ('. video'). data ('src' ), el = ''; if ($ (window) .width ()> 599 &&! isIEOld &&! isiPad) {el + = '<плакат цикла автозапуска видео = "' + 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);

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

CSS

Благодаря CSS вы можете установить размер контейнера с помощью тегов <img> и <video> . Пропорции сохраняются:

# big-video {позиция: относительная; фон: # 000; переполнение: скрытое; высота: 582 пикселей; } # big-video .video {z-index: 1; положение: абсолютное; верх: 0; слева: 0; ширина: 100%; высота: 0; прокладка снизу: 56,25%; } # big-video video {position: absolute; ширина: 100%; высота: 100%; верх: 0; слева: 0; } # big-video .video-element {position: absolute; ширина: 100%; высота: 100%; верх: 0; слева: 0; background-position: 50% 50%; повторение фона: без повтора; размер фона: авто 100%; }

Как видите, решение с использованием HTML5, CSS и JS не слишком сложно, но требует определенных знаний от пользователя на промежуточном уровне.

Второй способ - вилки

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

Плагин mb.YTPlayer для фонового видео может использовать любое видео YouTube в виде фона веб-страницы. Плагин использует API iframe YouTube и отображает видео с помощью тега HTML5 video.

Штекер очень прост в использовании (Рисунки 1, 2). Благодаря его параметрам вы можете выбрать страницы, на которых будет отображаться видео, настроить параметры прозрачности и качества, указать начало и конец видео, включить или выключить музыку, запустить повторяющееся воспроизведение видео и т. Д.

Д

Рисунок 1. Плагин mb.YTPlayer для фонового видео

YTPlayer для фонового видео

Рисунок 2. Плагин mb.YTPlayer для фонового видео

Видео добавляется к записи или странице с помощью шорткода.

Шаг 4. Добавление видео на сайт

Мы покажем вам, как добавить видео в фоновом режиме на сайт, используя плагин mb.YTPlayer для фонового видео .

Прежде всего, это должно быть установлено. Для этого просто перейдите в раздел « Плагины » - добавьте плагин и найдите нужный плагин. После его установки и включения вы можете перейти в раздел Настройки - mb.YTPlayer , где вам необходимо выбрать соответствующие опции (рис. 1, 2).

В нашем случае мы копируем видео, которое будет отображаться на странице в основном в поле URL-адрес видео на YouTube - это (URL-адрес для видео на YouTube -) . Мы оставляем другие параметры без изменений. Мы сохраняем все изменения и обновляем домашнюю страницу. В результате видео должно появиться в фоновом режиме (рисунок 3):

В результате видео должно появиться в фоновом режиме (рисунок 3):

Рисунок 3. Видео на фоне основного сайта

Сделать видео в фоновом режиме можно и для нужной страницы или записи. Для этого просто перейдите на страницу / страницу и добавьте шорткод, используя кнопку, которая появляется после установки плагина:

Рисунок 4. Кнопка добавления видео в фоновом режиме страницы или записи

В нашем случае мы добавим видео на фон записи. Поэтому мы нажимаем соответствующую кнопку, в результате чего появляется новое окно (рисунок 5):

Рисунок 5. Добавление шорткода к записи

В поле URL-адрес видео ( адрес URL-адреса видео) мы добавляем ссылку на наше видео и вставляем шорткоды с помощью кнопки « Вставить шорткод» . В результате в записи появится следующий код:

[mbYTPlayer url = "https://www.youtube.com/watch?v=Qbu_FRg8vuU" opacity = "1" quality = "medium" ratio = "auto" isinline = "false" showcontrols = "false" realfullscreen = "true "printurl =" true "autoplay =" true "mute =" false "loop =" false "addraster =" false "stopmovieonblur =" false "gaTrack =" false "]

Мы сохраняем все изменения и обновляем страницу с записью. На заднем плане будет добавлено видео (рис. 6):

Рисунок 6. Фоновое видео с записью

суммирование

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

Com/watch?