Видео как (background) фон сайта. html5

Всем привет!
Не знаю, обращали ли вы внимание на такой эффект, когда вместо фона на сайте воспроизводится видео. Такой эффект можно использовать для спортивных сайтов, для сайтов с тематикой кино или музыкальной группы, для авиа-компании или туристической фирмы и т.д.
Как сделать такой эффект?
Такой эффект можно сделать при помощи HTML5 и CSS.

Загрузите видеоролик с форматом «.avi» или «mp4»
Название видеоролика должно быть на латинице.

Теперь вставьте на HTML-страницу вот такой код:

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" type=" video/mp4 ">
</video>
</div>

source src="Back_to_Future-1.avi" type=" video/mp4 " – название видеоролика

Далее добавим CSS стили, чтобы видеоролик был по центру экрана и стал фоновым.

HTML:

.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) показывалась только картинка, допишите вот такой код:

HTML:

@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;
}
}

background: url('../images/kаrtinka.jpg') – это картинка, которая будет появляться в мобильных версиях.
Это все! Можете посмотреть результат в демонстрации.
http://bloggood.ru/wp-content/lessons/html/fon-video/video-background-html5.html

взято отсюда - http://bloggood.ru/effekty-dlya-sajta-2/video-kak-fon-sajta-html5.html

 

@europa1988, хорошая подсказка,куда и что,добавь ещё и ссылку к видео,чтобы перекидывало в новость.

 

была бы это реклама какая, а если просто так то зачем это надо ? страница ж весить будет немеряно

 

Это у знатоков спрашивайте, например в рип шаблоне alfa-torrent есть такой вывод, но только там не видео, а картинка вот на скрине видно

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

 

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

 

Это все конечно хорошо, но нагрузка колоссальная

 

ок, может свою демку сделаю)))

 

может кто раньше сделает, кидайте ссыль если кто сделает