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

 

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

Шаг 1. HTML

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

Также мы добавили подготовленное ранее нами изображение, о котором мы писали немного выше.

Установка видео для фона сайта с помощью HTML5

Шаг 2. CSS

Теперь приступим к стилям,их у нас не так уже и много, нам необходимо отобразить общие параметры наложения и небольшого свечения для нашего видео-фона:

Вот и все. Готово!

Читайте также: