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

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

От автора: после появления моей статьи о полноэкранном HTML5 видео фоне в комментариях посыпались вопросы, как сделать фоновое видео для сайта, а именно «полноэкранного видео при прокрутке страницы»: видео, которое находится на заднем плане, но поверх которого появляется какой-либо контент.

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

Основы в HTML5 видео во время прокрутки страницы

Разметка почти такая же, как в моем примере фонового видео, только HTML5 видео размещается не в корне страницы (т.е. сразу после тега body), а именно там, где оно необходимо. Для нашего примера сделаем видео внутри тега <main>:

<main>
  <header>
    <video autoplay loop>
      <source src="forest-fire.webm">
      <source src="forest-fire.mp4">
    </video>
  </header>

Используемое видео должно удовлетворять основным требованиям для фоновых видео роликов, которые я описал в предыдущей статье. Стили для видео такие же, как и для полноэкранных адаптивных изображений:

main { 
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}
main > header video {
  width: 100%;
  height: auto;
}

Если хотите увеличить максимальную ширину видео, просто измените свойство max-width. В нашем случае сверху видео отображается заголовок, который зазывает пользователей прочитать статью. Заголовок и ссылка идут сразу за тегом video внутри header:

<h1>A world Aflame</h1>
   <a href="#maincontent">▼</a>
</header>

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

main > header { 
  position: relative;
}

CSS для H1 и ссылок:

font-size: 4rem;
  text-transform: uppercase;
  mix-blend-mode: overlay;
}
main > header a {
  display: block;
  text-decoration: none;
  font-size: 2rem;
  color: #fff;
  opacity: .5;
  position: absolute;
  bottom: 1.5rem;
  width: 100%;
  text-align: center;
  transition: .3s;
  animation: downwardprompt 2s 1s;
}
main > header a:hover {
  opacity: 1;
}

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

@keyframes downwardprompt {
  to { 
    transform: translateY(2rem);
    opacity: 0;
    }
}

Вот и все! Существует множество вариаций данного метода, но основной код CSS почти всегда один и тот же. С помощью него и достигается этот эффект.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree