Как установить видео-фон на свой сайт | Блог веб-разработчика MaxGraph

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

Подключение видеофона на ваш сайт

Введение

Собственно, данный мануал я решил сделать после недавней статьи об тенденциях веб-разработки в 2017 году. Видео-фон действительно красивое дополнение к вашему сайту, которое позволит пользователю не заскучать и получить «вау»-эффект.

Что будем использовать

Я решил, что мы будем использовать лишь один вариант — с уже скачанными (или созданными) своими видео. Да, есть еще вариант использовать YouTube, но там свои минусы. Если хотите информации еще и про добавление видео с YouTube — пишите комментарии :)
Использовать будем собственно видео и js-библиотеку vide.js.

Какие видео подходят

Для установки видео-фона подходят видео в форматах .mp4, .ogv, .webm. Создать их можно самому (конвертировав в нужные форматы) или же взять со специального сервиса — http://coverr.co/

Плагин Vide.js

Пользователь github с интересным ником — «vodkabears» — разработал специальный плагин, позволяющий быстро и адаптивно добавить видео-фон на ваш сайт. Собственно, этим плагином мы и будем пользоваться.

Разработка

Для начала создадим стартовый проект (либо Вы будете размещать видео в уже имеющемся у вас проекте). Для этого нам нужны несколько файлов — index.html, style.css, jquery.min.js и  jquery.vide.min.js.


В index.html благодарю плагину emmet создаем базовую разметку, а так же подключаем библиотеку jQuery и собственно сам плагин:

 

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title>Видеофон</title>
</head>
<body>
<section class="videofon" data-vide-bg="video/ocean">
<h1>Привет мир</h1>
<p>привет друзья</p>
</section>
</body>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.vide.min.js"></script>
</html>

 

Как Вы можете видеть, дата-атрибут «data-vide-bg» выполняет основную работу — подгружает видео, которое находится в папке video.

 

Все, по сути, видео будет отображаться, но мы для красоты еще добавим чуть-чуть  CSS:

 

section { 
text-align: center; 
padding-top: 15%; 
height: 100vh;
}

body { 
margin: 0;
}

h1 { 
font-family: sans-serif; 
font-size: 40px; 
color: #fff;
}

p { 
font-family: sans-serif; 
font-size: 25px; 
color: #fff;
}

 

 

 

Инструкция на видео

Референсы

videofon — скачиваем и пользуемся.

БОНУС

Маленький бонус к данному мануалу — мини-разбор утилиты Fast Keys, которая поможет написать сниппеты для фрилансера.

 

 

 

Надеюсь, данная информация была Вам полезна и интересна. Я стараюсь для всех Вас! Спасибо за внимание, и до скорых встреч :)

12345 (2 оценок, среднее: 5,00 из 5)
Загрузка...

Метки: , ,

Понравилось? Расскажи другим!

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

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

Максим Васянович

Я являюсь автором этого блога, а также занимаюсь разработкой сайтов. Любой feedback по каналу на YouTube или этому блогу принимаю по форме (либо пишите Вконтакте). Надеюсь на Вас.

Напишите мне Смотрите меня