ZorNet.Ru — сайт для вебмастера » HTML и CSS » Видео в качестве фона для сайта на CSS

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

Создание полноэкранное видео фона стало в сети популярным, так как по вверх его размещают информацию на темно прозрачном фоне при помощи CSS. Что давайте рассмотрим один простой и довольно красивый вариант, где изначально запускаем ссылку под видео, которое послужит фоновым заслоном, а по центру выведем описание, и сделаем его на цветовой прозрачности формата, это может быть любая гамма цвета, главное, чтоб прозрачность соответствовала корректности видимости знаков.

Фоновые видеоролики, которые воспроизводятся автоматически при загрузке веб-страницы, стали в наши дни довольно популярной тенденцией. Считается что видео хорошего качества, которое воспроизводится автоматически, повышает заинтересованность пользователей или клиентов.

Здесь в стилистике CSS нужно поставить первый кадр фонового изображение, так как при открытии страницы видео не стразу может у некоторых запустится, здесь зависит от интернета соединение. Также здесь можно сделать на одном снимке, что изначально прописывание в CSS, и нам только останется убрать ссылку на видео, где аналогичная функция остается, только на том фоне, который вы решите установить.

Ведь нужно все так выстроить, чтоб все очень красиво смотрелось, но, а главное, это могли все корректно прочесть. Где уже аналогичное создание полноэкранное видео фона уже размещали на сайте, только в том случай немного по другому установка совершается.

Так выглядит при смени кадров на видео ролике.

Приступаем к установке:

HTML

Код

<div>
  <h1>ZorNet - портал для вебмастера</h1>
  <p>Первое описание</p>
  <p>Второе описание</p>
  <p>Третье описание</p>
  <p>Четвертое описание</p>
  <p>Пятое краткое описание</p>
  <p>Шестой заголовок</p>
  <p>Седьмое описание</p>
  <p>Восьмое описание</p>
</div>

<video autoplay loop poster="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/img.jpg">
  <source src="https://www.nxworld.net/example/css-fullscreen-background-video/movie.mp4" type="video/mp4">
</video>

CSS

Код

body {
  margin: 0;
  padding: 0;
  background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/img.jpg) center center fixed no-repeat;
}
video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}
div {
  width: 48%;
  margin: 2em auto;
  padding: 1em 2em;
  background-color: rgba(2, 2, 2, 0.5);
  color: #fdfdfd;
  text-align: center;
  border: 2px solid rgba(81, 82, 84, 0.65);
  border-radius: 3px;
}
p {
  display: inline-block;
  line-height: 1.5;
  text-align: left;
}

Фоновое видео - это современный способ представить свой веб-сайт перед вашим пользователем, когда пользователь просматривает ваш веб-сайт, и видео воспроизводится на заднем плане вашего веб-сайта, не нарушая его содержимого, что делает ваш веб-сайт очень современным и уникальным.

Делается это больше для того, что в одной статье вы написали статью и в ней подчеркнули ключевое слово, где поставили ссылку на вновь созданную страницу, которая кардинально отличается от стандартной.

Этим вы подчеркиваете оригинальность своего интернет сайта, но и безусловно на такой ресурсе будет приятно находится, где все красиво и качественно оформлено, что безусловно окажется не заметным.

Демонстрация

27 Апреля 2019 Просмотров: 1395 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0