Фон — видео

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

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

<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>

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 — отключение кнопок управления и информации и звука

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