BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Видео как фон сайта. HTML5

Видео как фон сайта. HTML5

2015-10-13 / Вр:22:09 / просмотров: 5209

 

Видео как фон сайта. HTML5

Всем привет!
Не знаю, обращали ли вы внимание на такой эффект, когда вместо фона на сайте воспроизводится видео.  Такой эффект  можно использовать для спортивных сайтов, для сайтов с тематикой кино или музыкальной группы, для авиа-компании или туристической фирмы и т.д.
Как сделать такой эффект?
Такой эффект можно сделать при помощи 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 – это картинка, которая будет появляться в мобильных версиях.
Это все! Можете посмотреть результат в демонстрации.

[смотреть демонстрацию]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

6 Ответов на комментарий - Видео как фон сайта. HTML5

  1. Тамара Полякова

    Спасибо Степан за статью! Она полезна тем, кто хочет установить фоновое видео, но не знает как это делается!

  2. Людмила Лао

    Да, видела такое. Спасибо за описание, добавлю в свою копилочку данных, вдруг когда-то потребуется. :idea:

  3. Егор

    Спасибо! Понадобилось;)
    Не могли бы еще показать как сделать рекламный “живой” баннер?

  4. Степан => автор блога

    Не пробовал еще такое!

  5. Zapica

    Здравствуйте! Даже не поленился всё тут заполнить для того чтоб написать.У вас самый хороший сайт из всех подобных.тут всё подробно написано.и самое главное это всё можно посмотреть в примере.вот это именно понравилось.Так не везде можно посмотреть то что пишут и предлагают сделать. Спасибо за реально отличный сайт!

  6. Степан => автор блога

    Здравствуйте! Спасибо, очень приятно!

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 809
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716