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

Полноэкранное фоновое видео с текстом

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

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

Проверяя на адаптивность, то здесь можно увидеть на изображение, что если вверх сайта можно задейчтвовать, что основном можно наблюдать. Но также создать оригинальну. страницу, что видео пойдет за шапку, что оригинально смотрится. Ведь под ней размещается материал, где в своей основе идет в том же тематическом направление, на на видео-ролике.

Чтобы добавить полноэкранное фоновое видео, нужно всего два шага:

1. Создайте HTML-файл и определите разметку;
2. Создайте файл CSS и определите стиль;

Также проверено на адаптивность, где все корректно выводит.

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

HTML

Код

<header>
  <video class="kuluscben-background" autoplay muted loop>
  <source src="http://zornet.ru/CSS-ZORNET/blurred-street.mp4" type="video/mp4" />

  <source src="http://zornet.ru/CSS-ZORNET/blurred-street.webm" type="video/webm" />
  </video>
<div class="bepunesem-karoudsand">
  <h1>ZorNet.Ru — сайт для вебмастера <br>Стилистика & дизайн</h1>
  </div>
</header>
<main>

  <h2>Название статьй</h2>
<p>Здесь идет материал по тематике.</p>
</main>

CSS

Код

:root {
  /* Базовый размер шрифта */
  font-size: 10px;
/* Полная переменная области сетки */
  --fullGrid: 1 / 1 / -1 / -1;
}

body {
  font-family: "Montserrat", Arial, sans-serif;
  background-color: #fcfcfc;
}

header {
  /* Create grid spanning viewport width & height */
  display: grid;
  grid-template-rows: 100vh;
  overflow: hidden;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.5);
}

.kuluscben-background {
  /* Охватить всю сетку */
  grid-area: var(--fullGrid);
/* Увеличьте размер видео до полного экрана, сохраняя соотношение сторон */
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  /* Показать видео под оверлеем */
  z-index: -1;
}

.kuluscben-background::-webkit-media-controls {
  display: none !important;
}

.bepunesem-karoudsand {
  /* Охватить всю сетку */
  grid-area: var(--fullGrid);
  /* Центр контента */
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
  /* Полупрозрачный фон */
  background-color: rgba(12, 12, 12, 0.55);
}

h1 {
  font-size: calc(1.8em + 2.5vw);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #f7f6f6;
  text-shadow: 0.05em 0.05em 0.05em rgba(12, 12, 12, 0.4);
}

main {
  padding: 5em 2em;
  max-width: 94em;
  margin: 0 auto;
}

h2 {
  font-size: calc(3em + 0.2vw);
  font-weight: 600;
  text-align: center;
  margin: 1.2em 0;
  color: #0a0a0a;
}

p {
  font-size: calc(2em + 0.2vw);
  font-weight: 400;
  line-height: 2;
  color: #313030;
}

::-moz-selection {
  background-color: rgba(14, 14, 14, 0.75);
  color: #f9f9fd;
}

::selection {
  background-color: rgba(14, 14, 14, 0.75);
  color: #f9f9fd;
}

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

Где для автоматического воспроизведения видео при загрузке страницы, отключение звука используется для отключения звука видео, а цикл используется для воспроизведения.

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

27 Ноября 2019 Загрузок: 5 Просмотров: 1224 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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