Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

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

Тема в разделе "Вопросы- ответы", создана пользователем europa1988, 1 окт 2016.

01.10.16 в 23:29
02.10.16 в 09:37
9
2.396
0
  1. TopicStarter Overlay
    europa1988

    europa1988 Бывалый

    Регистрация:
    24 фев 2016
    Сообщения:
    613
    Лучших ответов:
    2
    Рейтинги:
    +113 / 11 / -0
    Всем привет!
    Не знаю, обращали ли вы внимание на такой эффект, когда вместо фона на сайте воспроизводится видео. Такой эффект можно использовать для спортивных сайтов, для сайтов с тематикой кино или музыкальной группы, для авиа-компании или туристической фирмы и т.д.
    Как сделать такой эффект?
    Такой эффект можно сделать при помощи 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
     
  2. kinouser

    PRO Users

    Регистрация:
    12 ноя 2015
    Сообщения:
    949
    Лучших ответов:
    0
    Рейтинги:
    +230 / 23 / -0
    @europa1988, хорошая подсказка,куда и что,добавь ещё и ссылку к видео,чтобы перекидывало в новость.
     
  3. aeneas

    Забанен

    Регистрация:
    12 мар 2016
    Сообщения:
    11.489
    Лучших ответов:
    10
    Рейтинги:
    +4.043 / 208 / -0
    была бы это реклама какая, а если просто так то зачем это надо ? страница ж весить будет немеряно
     
  4. TopicStarter Overlay
    europa1988

    europa1988 Бывалый

    Регистрация:
    24 фев 2016
    Сообщения:
    613
    Лучших ответов:
    2
    Рейтинги:
    +113 / 11 / -0
    Это у знатоков спрашивайте, например в рип шаблоне alfa-torrent есть такой вывод, но только там не видео, а картинка вот на скрине видно
    upload_2016-10-2_9-15-10.png

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

    Команда форума VIP Кинотрафик v2

    Регистрация:
    15 июн 2015
    Сообщения:
    358
    Лучших ответов:
    0
    Рейтинги:
    +170 / 0 / -0
    Информация интересная, но это все для лендингов больше подходит. Киносайтам вообще нахрен не сдалось)
     
  6. TopicStarter Overlay
    europa1988

    europa1988 Бывалый

    Регистрация:
    24 фев 2016
    Сообщения:
    613
    Лучших ответов:
    2
    Рейтинги:
    +113 / 11 / -0
    я хочу попробовать поставить, мне кажется наоборот прикольно будет, вот например в Одноклассниках загружаешь видео, и там это видео пока ты его не запустил как бы слайдами работает, можно так же у себя на сайте трейлер какой нибудь новинки воткнуть, будет прикольно, хотя думаю что не на всех шаблонах будет норм смотреться
     
  7. Smile

    Команда форума VIP Кинотрафик v2

    Регистрация:
    15 июн 2015
    Сообщения:
    358
    Лучших ответов:
    0
    Рейтинги:
    +170 / 0 / -0
    покажешь потом пример, гляну, может реально прикольная фича будет)
     
  8. shevket007

    shevket007 Местный

    Регистрация:
    13 фев 2016
    Сообщения:
    1.612
    Лучших ответов:
    0
    Рейтинги:
    +515 / 3 / -0
    Это все конечно хорошо, но нагрузка колоссальная
     
  9. TopicStarter Overlay
    europa1988

    europa1988 Бывалый

    Регистрация:
    24 фев 2016
    Сообщения:
    613
    Лучших ответов:
    2
    Рейтинги:
    +113 / 11 / -0
    ок, может свою демку сделаю)))
     
  10. TopicStarter Overlay
    europa1988

    europa1988 Бывалый

    Регистрация:
    24 фев 2016
    Сообщения:
    613
    Лучших ответов:
    2
    Рейтинги:
    +113 / 11 / -0
    может кто раньше сделает, кидайте ссыль если кто сделает
     
Яндекс.Метрика