Как сделать видео в качестве фона сайта на HTML5. (1/2).
Всем привет! В этой статье мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на 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.
На этом я заканчиваю первую часть. Спасибо за внимание!
-
Создано 02.10.2014 20:14:54
-
Михаил Русаков
Комментарии (4):
Можно ли выкладывать демку к статье?
Ответить
Здесь все очень просто, 2 копипаста и смотрите демку у себя. Если будет что-то очень сложное, то, конечно, будет демка.
Ответить
СПАСИБО!
Ответить
Да уж ...я на profipages два дня мучился с этим кодом, а оказалось, что там уже встроен функционал такой. Нужно было просто ввести ссылку на видео в определенное поле)))
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.