Задний видео фон.

CabinetAdmin 09 авг 2023, 19:14 Сообщение

Ну как? Так же как и любой другой блок на задний фон.
Добавить видео в блок и добавить ему абсолютное позиционирование, ну что-то типа такого:

Код: Выделить всё

<div class="v-block">
	<video class="v-block-video" src="video.mp4" loop autoplay playsinline muted></video>
</div>

И стили ещё:

Код: Выделить всё

.v-block {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 0;
}
.v-block-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

html {
	position: relative;
}
#wrap {
	z-index: 1;
	position: relative;
}

romaamor 09 авг 2023, 20:47 Сообщение

Всё равно не пойму. Вот этот код куда вставлять ?

Код: Выделить всё

<div class="v-block">
	<video class="v-block-video" src="video.mp4" loop autoplay playsinline muted></video>
</div>

CabinetAdmin 11 авг 2023, 17:19 Сообщение

Ах, ну да, сразу после <div id="wrap">.

romaamor 11 авг 2023, 17:50 Сообщение

Чёт не получается. Поставил сразу после

Код: Выделить всё

<div id="wrap" class="wrap">

в хедере. Фоновую картинку убирал.

CabinetAdmin 11 авг 2023, 20:31 Сообщение

Не получается в каком плане? Стили может не подхватились? Кэш там, как всегда, нет?

romaamor 11 авг 2023, 20:46 Сообщение

Не отображается. И ссылки в шапке перестают работать. В navbar_header.

CabinetAdmin 13 авг 2023, 09:09 Сообщение

Прошу прощения

похоже что заработался и спёкся от жары, конечно же не после, а перед <div id="wrap">, в общем родительский элемент должен быть <body>.

romaamor 13 авг 2023, 18:07 Сообщение

Заработало. Но не понравилось. Всё какое то размытое, большое. Тормозит. Не так как на сайте с примера.

CabinetAdmin 13 авг 2023, 19:02 Сообщение

Ну это да, есть такое, в такие места видео нужно максимально лёгкое по весу и в тоже время в большом разрешении.

Задний видео фон.

romaamor

Похожие темы