/ Дизайн / Фон — видео

Фон — видео

HIT

03.05.2016

1715

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки».

Добавление видеофона в вёрстку

<div class="video-bg">
<video autoplay="" loop="" muted="" poster="https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.jpg">
<source src="https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.mp4" type="video/mp4">
</video>
</div>
Чтобы видео автовоспроизводилось в решении Fullpage.js нужно добавлять атрибут data-autoplay

CSS стили, адаптация под размер области, с наложением пиксельной сетки поверх видео

.video-bg {position: absolute; top: 0; bottom: 0; width: 100%; overflow: hidden;}

.video-bg video {position: relative; min-width: 100%; height: auto; z-index: -100;}
 
.video-bg:before {
    background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
    width: 100%;
    position: absolute;
    content: " ";
    top: 0;
    bottom: 0;
    left: 0;
}

Стили для более точно центровки видео (при широком экране максимум по ширине, при узких экранах максимум по высоте и края равномерно выходят за экран):

.video-bg {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

.video-bg video {position: relative; min-width: 100%; min-height: auto; z-index: -100;}
	
.video-bg:before {
	background: rgba(0, 0, 0, 0.3);
	width: 100%;
	position: absolute;
	content: " ";
	top: 0;
	bottom: 0;
	left: 0;
}

@media screen and (max-device-width: 1440px) { .video-bg video {min-width: auto;  min-height: 100%;} }

Стили из примера выше не корректно работают в Safari, более универсальные стили (!только к div.video-bg надо добавить еще id=»trailer»):

.video-bg {display: block; width: 100%; height: 100%;}

#trailer {
	position: fixed; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	overflow: hidden;
}

#trailer > video {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}


@media (min-aspect-ratio: 16/9) { 
	#trailer > video { height: 300%; top: -100%; } 
}

@media (max-aspect-ratio: 16/9) { 
	#trailer > video { width: 300%; left: -100%; } 
}

/* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */
@supports (object-fit: cover) { 
	#trailer > video {
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
		object-fit: cover;
	} 
}

Элементы управления тэгом video

autoplay=»» — авто воспроизведение
loop=»» — видео зациклено
muted=»» — без звука
controls=»» — показывать кнопки управления видео
preload=»» — предварительно полностью загружает видео
width=»», height=»» — Задает ширину и высоту области для воспроизведения видео
poster=»https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.jpg» — то что показывать предварительно

Желательно: постер должен быть назван так же как видеофайл

Форматы воспроизведения

Для кроссбраузерности рекомендуют использовать сразу 2 формата: .mp4 и .webm

<source src="video.mp4" type="video/mp4"></source>
<source src="video.webm" type="video/webm"></source>

Скорость воспроизведения

Скорость воспроизведения можно отрегулировать с помощью jQuery

Задаем тэгу <video> id=»slow-motion» и добавляем скрипт (без DocumentReady)

var vid = document.getElementById("slow-motion");
vid.playbackRate = 0.5;
vid.volume = 0.5; // управлять уровнем громкости
Если задать отрицательное значение — будет воспроизводится в обратном порядке

Воспроизведение и пауза видео по событию jQuery:

$('.video-btn').click(function() {
	$('#video').get(0).play();
	$('#video').get(0).pause();
});

Событие по окончании видео:

document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
	// Необходимое событие      
}

iframe Youtube

Фоновое видео можно также сделать с iframe с Youtube. Принцип тот же:

<div class="video-bg">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ie31pg3NknE?rel=0&controls=0&mute=1;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen data-autoplay></iframe>
</div>

controls=0&mute=1;showinfo=0 — отключение кнопок управления и информации и звука

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Форматы записей

Форматы записей

Записям в WP можно назначать формат, в зависимости от содержания: aside (заметка), gallery (галерея), link (ссылка), image (изображение), quote (цитата), status (статус), video, chat (чат), audio либо Стандартный (по-умолчанию). Пользовательские Читать далее »

Видео на сайте

Видео на сайте

Знакомимся с различными способами и сервисами (youtube, vimeo и т.д.) добавления видео на страницу сайта. Vimeo <iframe src="https://player.vimeo.com/video/130903027" width="500" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> YOUTUBE <iframe width="500" height="500" src="https://www.youtube.com/embed/BeaW2qq8wAk" frameborder="0" Читать далее »

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

Пока нет комментариев. Будь первым!

Фон — видео
Создаём корзину
Рекомендации для васСоздаём корзинуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.