Всем привет! В этом материале мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на HTML5 .
Всем привет! В этом материале мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на HTML5.
Итак, как всегда, начнем со структуры.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 видео в качестве заднего фона</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video autoplay loop muted class="bgvideo" id="bgvideo">
<source src="video.mp4" type="video/mp4"></source>
</video>
</body>
</html>
Думаю, тут все ясно. Запускаем видео сразу при загрузке страницы, зацикливаем его, чтобы оно никогда не останавливалось, и отключаем звук.
Перейдем к стилям
body {
background: url('video.png');
background-size: cover;
}
.bgvideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -9999;
}
Тут тоже нет ничего сверхестественного. Для видео мы задаем ширину и высоту по 100%, делаем выравнивание видео по правому нижнему краю и задаем свойство z-index отрицательным, чтобы текст и другие элементы могли отображаться поверх видео.
Если, вдруг, видео не будет отображаться, то мы отобразим картинку, которую мы задали для тега body.
На этом я заканчиваю первую часть. Спасибо за внимание!
