Как сделать видео в качестве фона сайта

Как сделать видео в качестве фона сайта

Здравствуйте! В этой статье мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на HTML5. Тут все очень просто нужно создать тег <video> и с помощью стилей делаем его фоном как отдельного элемента так и всего <body>. Но давайте обо всем по порядку.

как сделать видео в качестве фона для сайта

 


Итак, как всегда, начнем со структуры.

 <!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.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Читайте также  Стилизация абзацев

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: