Главная » Файлы » Скрипты плагины и дополнения » Разное |
Устанавливаем видео для фона сайта
За идею у нас взята картинка глубины, для тех случаев, когда устройством попросту не поддерживается такая функция проигрывания, если все же браузер сможет такое отобразить, то тут подхватит действия заранее подготовленное видео с соответствующим форматом. И так, давайте приступим. Шаг 1. HTML У нас будет класс, в котором будет содержаться параметры видео, мы установим значения автопроигрыванния, также добавляем несколько вариантов видео-формата, для отображения на разных устройствах: Код </pre> <div class="is_overlay"><video width="300" height="150" autoplay="autoplay" loop="loop" poster="/videos/bck.jpg"> <source src="/videos/WD0221.mp4.mp4" type="video/mp4"> <source src="/videos/WD0221.webmsd.webm" type="video/webm"> </video></div> <pre> Также мы добавили подготовленное ранее нами изображение, о котором мы писали немного выше. Шаг 2. CSS Теперь приступим к стилям,их у нас не так уже и много, нам необходимо отобразить общие параметры наложения и небольшого свечения для нашего видео-фона: Код .box,.page { position:fixed; top:0; left:0; display: block; width: 100%; height: 100%; overflow: hidden; z-index:999; background:rgba(15, 102, 99, 0.5); color:white; } .is_overlay{ display: block; width: 100%; height: 110%; } .is_overlay video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(/videos/bck.jpg) no-repeat; background-size: cover; } На этом всё! Готово! | |
Демо Просмотров: 1533
| 12.07.2014, 00:38 |
Просмотров: 1533 | Загрузок: 0 | |
Рекомендую к прочтению
Всего комментариев: 0 | |
Disqus comments
comments powered by DisqusHTML | |
BB-Code | |
Ссылка |