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

23.09.2019

17948

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

HTML5 video

Воспроизведение локального видео-файла с помощью элемента <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);
});

Результат:

Видео с YouTube

У плеера 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);
});