Всем привет!
Не знаю, обращали ли вы внимание на такой эффект, когда вместо фона на сайте воспроизводится видео. Такой эффект можно использовать для спортивных сайтов, для сайтов с тематикой кино или музыкальной группы, для авиа-компании или туристической фирмы и т.д.
Как сделать такой эффект?
Такой эффект можно сделать при помощи HTML5 и CSS.
Загрузите видеоролик с форматом «.avi» или «mp4»
Название видеоролика должно быть на латинице.
Теперь вставьте на HTML-страницу вот такой код:
<div class="fullscreen-bg"> <div class="overlay"> <h1>фонового видео на сайте <br>BlogGood.ru</h1> </div> <video loop muted autoplay class="fullscreen-bg_video"> <source src="Back_to_Future-1.avi" ENGINE=" video/mp4 "> </video> </div>
Строка №6 – название видеоролика
Далее добавим CSS стили, чтобы видеоролик был по центру экрана и стал фоновым.
.fullscreen-bg { overflow: hidden; z-index: -100; position: relative; height: 100%; width: 100%; padding-top:45%; } .fullscreen-bg_video { position: absolute; top: 0; left: 0; width: 100%; } .overlay { background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 4; } .overlay h1 { text-align:center; color:#fff; font-size: 70px; margin-top:17%; }
Чтобы на экранах мобильных устройств (меньше чем 768px) показывалась только картинка, допишите вот такой код:
@media (max-width: 768px) { .fullscreen-bg { background: url('../images/kаrtinka.jpg') center / cover no-repeat; } .fullscreen-bg_video { display: none; } .overlay h1 { text-align:center; color:#fff; font-size: 24px; } }
Строка №3 – это картинка, которая будет появляться в мобильных версиях.
Это все! Можете посмотреть результат в демонстрации.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329386 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274100 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 218704 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186297 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 176787
6 Ответов на комментарий - Видео как фон сайта. HTML5
Добавить комментарий
Метки: css, html, для сайта, эффекты для сайта
Спасибо Степан за статью! Она полезна тем, кто хочет установить фоновое видео, но не знает как это делается!
Да, видела такое. Спасибо за описание, добавлю в свою копилочку данных, вдруг когда-то потребуется.
Спасибо! Понадобилось;)
Не могли бы еще показать как сделать рекламный “живой” баннер?
Не пробовал еще такое!
Здравствуйте! Даже не поленился всё тут заполнить для того чтоб написать.У вас самый хороший сайт из всех подобных.тут всё подробно написано.и самое главное это всё можно посмотреть в примере.вот это именно понравилось.Так не везде можно посмотреть то что пишут и предлагают сделать. Спасибо за реально отличный сайт!
Здравствуйте! Спасибо, очень приятно!