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. Фоновое видео с записью

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

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

Похожие

Заказ на компьютер в картинках
Заказ на компьютере является важным вопросом. В конце концов, мы проводим все больше и больше времени перед экраном наших ноутбуков. Как бороться с постоянно растущим количеством цифровых файлов? Как сделать, а затем поддерживать порядок на вашем компьютере? Мы немного изменчивы - как будто мы постепенно входим в этот мир, но в то же время никто не учил нас, как обращаться с каждым следующим гигабайтом данных. Я научился сам - в течение нескольких лет я менял свои методы, чтобы найти
Компоненты пользовательского интерфейса Styling с нуля: кнопки и формы
Трудно стилизовать основные веб-компоненты, если вы никогда не делали этого раньше. Вы хотите, чтобы ваши кнопки и формы выглядели хорошо, а также были совместимы с разными браузерами. Самое простое решение - использовать такую ​​среду, как Bootstrap или Foundation, но это не поможет вам понять основы. На самом деле это не так сложно, как кажется, и в этой статье я покажу вам, как это сделать. Чтобы облегчить себе жизнь, я собрал все это в свои собственные
45+ лучших тем WordPress для видео 2019 [обновлено]
... CSS3 и HTML5, выглядит потрясающе со всех сторон, а анимационные эффекты JQuery выводят этот шаблон на новый уровень. Этот способ включает в себя простые настройки, полноэкранное видео и фоновые изображения, а также ярлыки социальных сетей, чтобы вывести ваш сайт на новый уровень.
Одра Водный путь для фондов ЕС?
... ие Щецин - Берлин стало частью европейского транспортного коридора Северное море - Балтика. Теперь Польша может подать заявку на средства ЕС для модернизации водного пути Одра в его окончательном фрагменте. Европейская комиссия опубликовала проект нового
Как автоматически повторять видео на YouTube
... шаги научат вас повторять любое видео на YouTube. Зациклить видео на YouTube YouTube теперь позволяет зацикливать любое видео щелкнув правой кнопкой мыши на видео или кнопку воспроизведения, а затем выберите параметр Loop из выпадающее меню это появляется.
Live Composer: как редактировать макет страницы и макет на WordPress
Вы часто спрашиваете о возможности простого добавления страницы на основе WordPress. В этой статье мы покажем вам, как легко изменить практически каждый аспект такого веб-сайта с помощью открытого и бесплатного плагина Live Composer. Вам не нужно знать CSS: вы изменяете все изменения из меню и видите живые эффекты. Каждый, вероятно, хочет, чтобы его сайт выглядел эстетично и в то же время выделялся на фоне других сайтов. Бесплатные скины WordPress, однако, не предлагают слишком много,
Курс языка HTML: несколько слов об инструментах
... страницы. Вы можете скачать Minipad бесплатно, удобный редактор для быстрых исправлений. Автор: Яцек Сзарапа, Вега Я лично рекомендую использовать польские программы, когда они лучше всего соответствуют нашим конкретным потребностям, особенно в языке. Для большинства веб-мастеров достаточно инструментов Sia ведущих польских программ, так что вы можете отказаться от программ США. Какими функциями должен обладать
. Kwit.pl - сайт сравнения цен на онлайн-деликатесы
Компараторы цен уже цеплялись за наши покупательские привычки навсегда. Многие люди не могут себе представить, что можно совершить более крупную покупку, не открывая сайт в Интернете. Не только с большими затратами, но стоит посмотреть на цены. До сих пор сравнивать цены на продукты питания было не самой легкой работой. Польский проект приходит с помощью Kwit.pl
30 лучших модных блогов и журналов WordPress Themes 2019
... ите слово «мода»? Возмутительные тренды одежды? Красивые модели взлетно-посадочной полосы? Дорогие дизайнеры? Лично я думаю о двух мирах: один из гламура, экзотической привлекательности и роскошного образа жизни, а другой - с приглушенным стилем и утонченной грацией. Неудивительно, что эти черты также воплощаются в дизайн модных сайтов. Почти все модные блоги, с которыми вы столкнетесь, отличаются либо шикарным дизайном, ориентированным на изображение и насыщенным
Как скачать YouTube видео 720p или 1080p
YouTube предлагает все больше и больше видео в разрешении 720, 1080 или 4k. Чтобы снизить стоимость размещения таких файлов, YouTube недавно изменил способ хранения видео в разрешении 1080p, 720p и 4K. Прежде всего, сервис уменьшил обработку контейнера MKV, что затрудняет просмотр видео в формате MKV в высоком разрешении. Во-вторых, YouTube хранит аудио и видео дорожки отдельно, поэтому многие программы для загрузки файлов не могут их правильно загрузить. К счастью, 4K Video Downloader
Как создать вики
Вовлеките всех в развитие знаний о бизнесе и ищите новые возможности. Ваша команда активно собирает и развивает деловые знания? И есть ли у вас система для обмена развивающимися методами и процедурами? Если нет, возможно, пришло время подумать об использовании вики для содействия сотрудничеству. Что такое вики? «Wiki» - это гавайский термин, который означает «быстрый». Вики на основе компьютеров - это

Комментарии

Что вы должны пропустить, чтобы сделать ваш проект действительно красиво минималистичным?
Что вы должны пропустить, чтобы сделать ваш проект действительно красиво минималистичным? Проще говоря, опустите все, что не нужно в дизайне вашего проекта. Готовы упростить свой проект? Отлично. Вот 5 предварительных советов по упрощению дизайна вашего сайта. Увидите захватывающий эффект минимализма в дизайне сайта. Сосредоточьтесь на самых важных элементах. Иногда трудно быть объективным и определить, что более или менее важно, потому что все
Хотите, чтобы это обращение исчезло навсегда?
Хотите, чтобы это обращение исчезло навсегда? Поддержите нас на Patreon, и мы сделаем это! Нажмите на кнопку слева, чтобы узнать больше. "Я не использую блокировщик рекламы!" - Обновите / перезагрузите страницу, если вы все еще видите панду или у вас есть другие проблемы, тогда нажмите здесь, чтобы немедленно связаться с нами, спасибо. "Почему вы это делаете?" - Честно говоря,
Заинтересованы в том, чтобы попробовать новый местный ресторан или даже ресторан в городе, в котором вы никогда не были?
Заинтересованы в том, чтобы попробовать новый местный ресторан или даже ресторан в городе, в котором вы никогда не были? Легко сделать через поиск по графику. Зачем беспокоиться о Yelp (или даже Google), когда Facebook использует отзывы и интересы ваших социальных связей для вас? Вы, вероятно, доверяете рекомендациям своих друзей по сравнению с рекомендациями совершенно незнакомого человека. Как это применимо к адвокатам? На данный момент основные параметры поиска по
Как я могу добавить эту защиту в мою учетную запись Google?
Как я могу добавить эту защиту в мою учетную запись Google? Чтобы использовать эту опцию, перейдите в настройки своей учетной записи Google и включите двухэтапную функцию проверки, которая называется «Вход с помощью телефона». Прямая ссылка на эту опцию может быть найдена ниже: Настройте функцию «Вход с помощью телефона» Перейдите по указанной выше ссылке,
Почему я не могу добавить новый класс документа?
Почему я не могу добавить новый класс документа? На странице «Классы документа» диалоговое окно «Параметры класса документа» невозможно создать или удалить, если открыты какие-либо документы, даже пустые. Однако вы можете создать их, используя команду New Document Class в меню Configure. Как изменится название инструмента? Выберите «Настройки» в меню
Вы хотите, чтобы ваша целевая страница была впечатляющей?
Вы хотите, чтобы ваша целевая страница была впечатляющей? Отлично! Вы уже знаете, как привлечь трафик на такой сайт? PPC реклама, электронный маркетинг - конечно. А что скажешь бесплатно * источник продвижения сайта, которым пользуются миллионы людей каждый день? Звучит хорошо? Познакомьтесь с ними поближе: это обычный трафик или люди, которые посещают сайт благодаря обычным результатам поиска (не из рекламы или других платных
Мы пропустили ваш выбор дисков для восстановления системы?
Мы пропустили ваш выбор дисков для восстановления системы? Не стесняйтесь, дайте нам знать и сообщите нам, почему они заслуживают того, чтобы быть в списке в разделе комментариев ниже. Благодаря Aggelelax а также Ромуальдо Солер Гонсалес за правильное предложение Boot Repair Live CD и Parted Magic Live CD соответственно.
Moto X Style имеет богатый выбор характеристик; а как поживает топовое устройство от Motorola в повседневной жизни?
Moto X Style имеет богатый выбор характеристик; а как поживает топовое устройство от Motorola в повседневной жизни? Вы можете прочитать это в нашем обзоре Moto X Style. Как уже говорилось, Moto X Style - топовое устройство прошлого года от Motorola. По сравнению с его меньшими братьями, Moto G (3-го поколения) и Moto X Play , Moto X Style имеет
Чтобы в полной мере оценить новые iPad, вам придется подождите пока iOS 11 Что нового в iOS 11?
Moto X Style имеет богатый выбор характеристик; а как поживает топовое устройство от Motorola в повседневной жизни? Вы можете прочитать это в нашем обзоре Moto X Style. Как уже говорилось, Moto X Style - топовое устройство прошлого года от Motorola. По сравнению с его меньшими братьями, Moto G (3-го поколения) и Moto X Play , Moto X Style имеет
Вы управляете мобильным офисом, и вам нужно, чтобы несколько энергоемких устройств были довольны?
Вы управляете мобильным офисом, и вам нужно, чтобы несколько энергоемких устройств были довольны? Или вы беспокоитесь о том, чтобы у вас был полностью заряженный телефон на выходных? Варианты меньшего ватта будут менее дорогими и зачастую менее мощными. По мере увеличения мощности панели становятся все более и более эффективными. Небо это предел, но это зависит от того, сколько денег вы готовы потратить. Мы проверили всех 18 из этих конкурентов и обнаружили, что некоторые из них работают лучше,
Хотите, чтобы больше подобных сообщений доставлялось на ваш почтовый ящик?
Хотите, чтобы больше подобных сообщений доставлялось на ваш почтовый ящик? Введите адрес электронной почты, чтобы подписаться на нашу рассылку.

Com/watch?
Как бороться с постоянно растущим количеством цифровых файлов?
Как сделать, а затем поддерживать порядок на вашем компьютере?
Одра Водный путь для фондов ЕС?
Ите слово «мода»?
Возмутительные тренды одежды?
Красивые модели взлетно-посадочной полосы?
Дорогие дизайнеры?
Ваша команда активно собирает и развивает деловые знания?
И есть ли у вас система для обмена развивающимися методами и процедурами?