Видео c YouTube в качестве фона сайта

Пара примеров как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery.

Воспроизведение локального видео-файла с помощью элемента <video>:

<div class="video-box">
	<video autoplay loop muted controls="">
		<source src="/video.mp4" type="video/mp4">
	</video>
  
	<div class="video-content">
		Контент...
	 </div>
</div>
HTML

У тега <video> атрибуты autoplay и loop запустят видео с повторением, muted отключит звук, controls="" – скроет элементы управления.

Далее разместим блоки с видео и контентом друг над другом и добавим затемнение видео с помощью :before и opacity: 0.5.

CSS:

.video-box {
	position: relative;
	overflow: hidden;
}
.video-box video {
	position: absolute;
	top: 0px;
	left: 0;
	width: 0;
	height: 0; 	
	z-index: -1;
}
.video-content {
	position: relative;
	color: #fff;
	padding: 50px;
	font-size: 20px;
}
.video-content:before {
	z-index: -1;
	content: '';
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;	
}
CSS

Теперь нужно пропорционально растянуть и отцентровать видео по родителю. Чаще всего видео имеет соотношение сторон 16:9, поэтому используем его для расчета новой ширины или высоты:

16 / 9 = 1.78
new_height = width / 1.78 или new_width = height * 1.78

JQuery:

function setVideoCenter() {
	var $box = $('.video-box');
	var height = $box.height();
	var width = $box.width();
	var new_height = width / 1.78;
	if (new_height > height) {
		$box.find('video').css({
			width: width, 
			height: new_height, 
			top: '-' + (new_height / 2 - height / 2) + 'px',
			left: '0',
		});	
	} else {
		var new_width = height * 1.78;
		$box.find('video').css({
			width: new_width, 
			height: height, 
			top: '0',
			left: '-' + (new_width / 2 - width / 2) + 'px'
		});
	}	
}

$(function(){
	setVideoCenter();
	$(window).resize(setVideoCenter);
});
JS

Результат:

У плеера YouTube более высокая скорость загрузки, но есть несколько минусов:

  • Autoplay не работает на мобильных.
  • Первые несколько секунд показываются название канала, «смотреть позже», «поделится» и логотип.
<div class="video-box">
	<iframe src="https://www.youtube.com/embed/VIDEO_ID?mode=opaque&wmode=transparent&autoplay=1&loop=1&controls=0&modestbranding=1&rel=0&autohide=1&showinfo=0&color=white&iv_load_policy=3&theme=light&wmode=transparent&mute=1&playlist=VIDEO_ID" frameborder="0" allow="autoplay"></iframe>

	<div class="video-content">
		Контент...
	 </div>
</div>
HTML

CSS:

.video-box {
	position: relative;
	overflow: hidden;
}
.video-box iframe {
	position: absolute;
	top: 0px;
	left: 0;
	width: 0;
	height: 0; 	
	z-index: -1;
}
.video-content {
	position: relative;
	color: #fff;
	padding: 50px;
	font-size: 20px;
}
.video-content:before {
	z-index: -1;
	content: '';
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;	
}
CSS

JQuery:

function setVideoCenter() {
	var $box = $('.video-box');
	var height = $box.height();
	var width = $box.width();
	var new_height = width / 1.78;
	if (new_height > height) {
		$box.find('iframe').css({
			width: width, 
			height: new_height, 
			top: '-' + (new_height / 2 - height / 2) + 'px',
			left: '0',
		});	
	} else {
		var new_width = height * 1.78;
		$box.find('iframe').css({
			width: new_width, 
			height: height, 
			top: '0',
			left: '-' + (new_width / 2 - width / 2) + 'px'
		});
	}	
}

$(function(){
	setVideoCenter();
	$(window).resize(setVideoCenter);
});
JS

Результат:

23.09.2019, обновлено 17.01.2021
8544

Комментарии

, чтобы добавить комментарий.

Другие публикации

Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
23568
+2
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
8565
+5
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
43856
+18
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
22067
+25
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
32285
+13
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
29899
+11