HTML 5: Как разместить на сайте видео на фоне страницы (в бэкгрануде)

17.03.2021

Довольно эффектно смориться, если задний фон сайта не картина, а настоящие видео. Такое можно легко сделать на css и html 5.

У данного метода есть особенность есть особенность - видео может или автоматически запускаться или запускаться без звука. Т.е. autoplay работает только вместе с muted.

HTML:

 
<body>
  <!--autoplay loop muted controls-->
  <video autoplay muted class="bgvideo" id="bgvideo">
   <source src="VIDEO.mp4" type="video/mp4"></source>
  </video>
</body>

CSS:

 
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;
}

Категории: Web, HTML
Пометки: html video autoplay не работает
Яндекс.Метрика