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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree