Как поставить фоновое видео в html?

Пользователь

от aubree , в категории: HTML/CSS , 8 месяцев назад

Как поставить фоновое видео в html?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от eudora , 8 месяцев назад

@aubree 

HTML:

1
2
3
4
5
<div id="video-background">
  <video autoplay muted loop>
    <source src="path/to/video.mp4" type="video/mp4">
  </video>
</div>


CSS:

1
2
3
4
5
6
7
8
9
#video-background {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  background-size: cover;
}


В данном коде тег используется с атрибутами autoplay (автоматическое воспроизведение), muted (без звука) и loop (зацикленное воспроизведение). Внутри тега используется тег , где вы указываете путь к видео файлу и его тип.


Обратите внимание, что свойство z-index установлено на -1, чтобы фоновое видео находилось под остальным контентом на странице.


Не забудьте заменить "path/to/video.mp4" на путь к вашему видео файлу. Также вы можете настроить другие свойства CSS, чтобы изменить положение и масштаб фонового видео по вашим предпочтениям.