Два способа сделать видеофон для сайта

Два способа сделать видеофон для сайта

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

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

Пожалуй, одним из самых ярких примеров использования видео заставки в одном из блоков главной страницы, является сайт клининговой компании Eagleclean (eagleclean.co.uk). Оригинальное видео способно создать атмосферу доверия к компании и воздействует на визуальную память потенциального клиента.

Как сделать видеофон для сайта.

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

Видеофон с YouTube.

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

Мы можем вставить видео с помощью iframe-кода, но чтобы применить различные настройки воспроизведения воспользуемся jquery плагином YoutubeBackground. Это обертка для Youtube API — он отлично подходит для полноэкранных фоновых видео или обычных видеороликов.

Данный пример видеофона можно использовать в заголовке сайта или в любом другом блоке страницы. Если немного изменить CSS, то видеофоном можно полностью замостить всю страницу.

See the Pen Youtube video background header for WordPress by Natali Mambetova (@nalitana) on CodePen.dark

Создайте файл video-background.js и скопируйте код с вкладки JS из этого блока:

Загрузите файл на хостинг в папку JS. Если это сайт WordPress, подключите скрипт к вашей теме. Для этого скопируйте этот код в functions.php.

PHP
/**
Enqueues scripts video-background.
*/
function nanima_scripts() {
wp_enqueue_script( 'video-background', get_template_directory_uri() . '/js/video-background.js', array('jquery'), true );
}
add_action( 'wp_enqueue_scripts', 'nanima_scripts' );

Если это HTML сайт, добавьте в футер этот код:

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="src/jquery.youtubebackground.js"></script>

В этом участке скрипта замените ID видео на свой. ID — это конец ссылки видео на YouTube (https://youtu.be/X_LrrqVrLe4)

  jQuery(document).ready(function() {
    $("#demo").YTPlayer({
      videoId: "X_LrrqVrLe4"
    });
  });

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

Видеофон для сайта HTML5.

В этом примере мы уже не используем скрипты, а только HTML и CSS. И чтобы видео заставки могли воспроизводиться во всех браузерах, необходимо сконвертировать их в трех форматах: mp4, webm и ogv. Параметр loop=«loop» — позволяет видео проигрываться по кругу, autoplay=«autoplay» — автоматическое проигрывание,  muted=«» — со звуком или без.

Смотреть на Pen Video Background Header CSS by Natali Mambetova (@nalitana) on CodePen.black

Если у вас сайт Worpress, добавляйте HTML-код в виджет или на любую страницу через визуальный редактор.

Где брать шаблоны для создания видеороликов?

Моя небольшая подборка сайтов с качественными видео материалами для создания промороликов и видеофонов.

Videvo.net — бесплатный видео сток, на котором размещены интересные футажи, графика и звуковые эффекты. Видео футажи — это короткие ролики, используемые для видеомонтажа. Также их можно найти на YouTube каналах в свободном доступе.

Videezy.com — коллекция высококачественных видеоклипов в бесплатном и премиальном доступе.

Renderforest.com — качественные видео шаблоны, слайдеры, анимации и аудиофайлы для бизнеса. Создавать проморолики можно прямо на сайте. Мне очень понравился их редактор. Все настройки просты и понятны. Самое главное, что на создание ролика затрачивается намного меньше времени, по сравнению с монтажом на компьютере. Видео до 3-х минут предоставляется бесплатно.

качественные видео шаблоны

Templatemonster.com — внушительная коллекция премиальных видео шаблонов, видео открыток и наборов профессионально разработанных анимационных инструментов для создания видео.

СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

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

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

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт