Как добавить фоновое видео, чтобы улучшить внешний вид блога на WordPress

Фоновое-видео-для-сайта-на-весь-экран-RUDEBOX1Видео могут значительно улучшить качество постов WordPress, они не только украшают внешний вид страницы, но и привлекают внимание пользователей. С помощью видео понять ваш пост можно гораздо быстрее, нежели обычный текст. Тем не менее это не так уже просто — процесс включает несколько сложностей в области формата, браузера и шаблона, которые могут заставить даже профессионального разработчика попотеть. Хотя CSS помогает в случае фоновых изображений, этот язык не сработает, когда дело доходит до создания полноэкранных фоновых видео.

Просто оставить ссылку на видео MP4 внутри пункта background и настроить размер видео «на весь экран» в CSS, к сожалению, не получится.

В реальности, чтобы добавить фоновое видео, следует осуществить следующие шаги

  • Создать div-блок с вашим видео;
  • Расположить этот блок точно в верхнем левом углу области просмотра, установить параметры ширины и высоты на 100%, а z-index на 1, так видео будет располагаться сразу под основным контентом;
  • Использовать javascript для того, чтобы установить фактическую ширину и высоту этого div, а затем масштабировать видео, сохраняя исходное соотношение, пока оно не займет весь экран;
  • Изменить размер страницы, чтобы продолжить масштабирование;
  • Исправить проблему с полосой прокрутки, которая возникает в Chrome при установке z-index на 1;
  • Создать функцию запуска по клику для всех IOS устройств, так как функция автозапуска видео отсутствует на iPad и iPhone.

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

Во-первых, скачайте, установите и активируйте плагин Background Video. Плагин имеет автономный bgvideo шорткод. При добавлении этого кода к содержанию поста, генерируется фоновое видео. Атрибуты, которые принимает шорткод, следующие:

  • Fixed: должно ли видео иметь фиксированную позицию, то есть, всегда ли виден фон, включая при прокрутке до верха страницы (по умолчанию «да»)
  • Muted: должно ли аудио находиться в выключенном режиме (по умолчанию «да»)
  • Loop: следует ли фоновому видео работать непрерывно (по умолчанию «да»)
  • Autoplay: должно ли видео начать проигрываться сразу после загрузки (по умолчанию «да»)
  • Ogg: URL для видео в Ogg версии
  • WebM: URL для видео в версии WebM
  • Mp4: URL для видео в версии MP4
  • Width: оригинальная ширина видео
  • Height: оригинальная высота видео

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

Выберите видеоклип и вставьте его с помощью кнопки «Add Media»(«Добавить медиа»), доступной в редакторе. Теперь переключайтесь в текстовый режим и поменяйте шорткод видео на bgvideo шорткод. Источник должен быть добавлен в качестве атрибута. В качестве примера приведем следующий шорткод видео:

[*video width=»1280″ height=»720″ mp4=»http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4″][/video]

[*video width=»1280″ height=»720″ webm=»http://www.test.dev/wp-content/uploads/2014/09/rainier.webm»][/video]

<ahref=”http://www.test.dev/wp-content/uploads/2014/09/rainier-cover.jpg”><imgsrc=”http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024×576.jpg”alt=”rainier-cover”width=”1024″height=”576″class=”alignnone size-large wp-image-1392″/></a>

Примечание: Снимите звездочку (*), прежде чем использовать этот код
Далее получаем следующий bgvideo шорткод:

[bgvideo width=»1280″ height=»720″ mp4=»http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4″ webm=»http://www.test.dev/wp-content/uploads/2014/09/rainier.webm» poster=»http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024×576.jpg» fixed=»no»]

После загрузки, установки и активации плагина, шорткод bgvideo превратится в фоновое видео.

Как сделать фон прозрачным

Даже если вы вставите фоновое видео, оно будет оставаться скрытым, если к содержимому был применен фон. Для того, чтобы предотвратить блокирование видео, вы должны будете добавлять пользовательские CSS. В большинстве шаблонов вордпрес, это может быть сделано путем удаления фона элемента #page. Чтобы сделать это, добавьте CSS, представленную ниже, к вашей теме. Вы также можете сделать это с помощью плагинов, типа Simple Custom CSS:

#page {
background: none;
}

Как исправить проблемы, возникающие на IOS устройствах

Одной из наиболее часто возникающих проблем на IOS устройствах является выключенная функция автовоспроизведения. Чтобы разрешить эту проблему, вам необходимо указать URL изображения в поле атрибута «постер». При этом пользователь устройства IOS увидит этот образ вместо первого кадра видео. Кроме того, можно создать кнопку для начала проигрывания. Используйте Media Queries, чтобы эта кнопка отображалась только на устройствах Apple. Фоновое видео начнет проигрываться, только когда пользователь IOS устройства нажмет эту кнопку. Хотя это не идеальное решение, но таким образом пользователи хоть как-то получат доступ к вашему видео.

Как сделать видео полноэкранным

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

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

То, какую технологию для этого использовать, зависит от вашего шаблона. И все же, можно пользоваться следующими общими инструкциями:

Разверните заголовок поста на полную высоту, которую позволит браузер. Для этого, необходимо поменять высоту .entry-header на высоту .bgvideo-wrapper. Скорее всего, вы уже поняли, что элемент «высота» .bgvideo-wrapper уже выставлен на 100%. Ниже приведен javascript, с помощью которого можно этого добиться:

jQuery(document).ready(function(){

varthe_height=jQuery(‘.bgvideo-wrapper’).height();
jQuery(‘header.entry-header’).height(the_height);
});

jQuery(window).resize(function(){

varthe_height=jQuery(‘.bgvideo-wrapper’).height();
jQuery(‘header.entry-header’).height(the_height);

});

Обратите внимание, что оба события: (window).resize и (document).ready должны включать функцию, которая позволит менять высоту видео при изменении размера окна браузера.

Как предотвратить появление боковой панели прокрутки в Chrome

В Chrome полоса прокрутки появляется, когда для div с фоновым видео выставлен z-index. Этого не происходит в Firefox или Safari. Чтобы устранить эту проблему, установите overflow для элемента HTML на «hidden» до того, как начнете менять элементы фонового видео. После того, как изменили размер видео, выставьте перенос слов на авто.

Следуя этим инструкциям вы сможете добавить фоновые видео в ваш блог WordPress и тем самым сделать ваши сообщения по-настоящему уникальными.

Алексей Алексей
О деньгах в интернете, по которым вы ходите не замечая...

Комментариев нет.

Ответить