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

[europa1988]

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

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

Далее добавим 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;
}
}

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

 

[kinouser]

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

 

[aeneas]

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

 

[europa1988]

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

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

страница ж весить будет немеряно

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

 

[Smile]

Информация интересная, но это все для лендингов больше подходит. Киносайтам вообще нахрен не сдалось)

 

[europa1988]

Информация интересная, но это все для лендингов больше подходит. Киносайтам вообще нахрен не сдалось)

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

 

[Smile]

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

покажешь потом пример, гляну, может реально прикольная фича будет)

 

[shevket007]

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

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

 

[europa1988]

покажешь потом пример, гляну, может реально прикольная фича будет)

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

 

[europa1988]

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

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