Как сделать видеофон для лендинг пейдж

Как поставить видео на фон

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

Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся - и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и css код раздуть до безобразных размеров, а можно грамотно оптимизировать и сократить вес в 2-3 раза. (Кстати, об оптимизации css кода можно почитать в этой статье)

Итак пример:

daarnhouwer.com

как сделать видео фон

Как видите, эффект очень интересный, но при условии что страничка быстро грузится. Если нет, то овчинка не стоит выделки и лучше обойтись просто картинкой в высоком разрешении, чем заставлять пользователя ждать так долго.

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

Как сделать видео фоном сайта?

Разбираясь в вопросе ,как добиться эффекта с видеофоном, в свое время, я обнаружил несколько способов. Одни из них проще, другие сложнее, некоторые требуют javascript, а другие нет. Сегодня я расскажу вам о том, как добиться подобного эффекта без всяких там скриптов. Приступим...

Сразу прошу извинить за качество видео. Оно 720p, так что большие мониторы - вам привет! Прошу камнями не кидать, это только в качестве примера, а вы все равно будете подбирать под те разрешения, на которые ориентирован проект.

Итак, помните статью, в которой мы говорили про то, как вставить видео на сайт при помощи тегов html5? Сегодня знания от туда нам пригодятся. А в этой статье я не буду подробно описывать каждую строчку.

HTML разметка

Сразу после тега </body> вставьте фоновое видео на сайт следующим образом. Если хотите подробнее разобраться, читайте статью, о которой я упоминал выше.

<video autoplay loop>
 <source src="video/video2.mp4" type="video/mp4">
 <source src="video/video1.webm" type="video/webm">
 <source src="video/video3.ogv" type="video/ogg"/>
</video>
 
<p>Smartlanding</p>

CSS разметка

Для того, чтобы видео занимало всю ширину экрана и фон был неизменным на всем сайте - добавьте следующие стили:

video{
   position:fixed;
   z-index:-1;
   min-width:100%;
   min-height:100%;
   overflow:hidden;
}

p{
 font-family: 'courgette';
 color:#fff;
 font-size: 80px;
 text-align: center;
 padding-top: 20%;
 text-shadow: 0 1px 1px #000a33;
}

Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute. Буду искать еще способы подключения видео в качестве фона, так как не люблю я это абсолютное позиционирование. Даже текст подвинул padding_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

Если вам известны другие способы реализации подобного эффекта, то пишите в комментариях - обсудим.

Скачать исходник

63 комментария

  1. Влад

    Без звука лучше

    1. Сергей

      video autoplay loop muted вот без звука

    2. Антон

      сам юзаю для разработки беззвучные и сразу сжатые. Капец как помогает этот сайт __http://ru.rowpost.com/all-movies . Хоть один бесплатный нашел

  2. Сергей

    Привет. Подскажи пожалуйста, в чем может быть причина не отображения видеофона в експлорере? Во всех остальных браузерах все нормально. Сайт: ufx.com.ua.
    Спасибо!

    1. dimadv7

      Привет, для эксплорера нужен H.264

    2. Сергей

      Спасибо, как оказалось, не весь MP4 в H.264.
      Спасибо за как всегда дельный совет.

    3. dimadv7

      Да не за что, это достаточно не очевидная информация :) Ну как всегда, эксплорер со своими "заморочками")

  3. Алексей

    Спасибо за статью. Занимаюсь созданием видео уже довольно давно marketingu.ru, и всегда хотел сделать интересный эффект на сайте. Буду пробовать.

  4. Алексей

    Спасибо за статью.
    А этим способом можно вставить видео на страницу, которая сделана в lpgenerator?

    1. dimadv7

      Не пробовал это сделать на лпгенератое. Да и доступ к хостингу они же не дают вроде. Если только на стороннем все хранить. Попробуй. И расскажешь потом

  5. Алексей

    Все получилось! Спасибо.
    Вопрос - а на видео "положить" темный фон прозрачный.

    1. dimadv7

      Здорово, на стороннем хостинге видео храните? А насчет фона, то просто нужно обернуть блок с видео в какой-нибудь div и залить черным с прозрачностью, например .5 (rgba(0,0,0, .5)), где .5 - значение от 0.1 до 1 (проценты 10. 20.. 50..100) Попробуйте!)

  6. Алексей

    Да, на стороннем.
    Я с html и CSS вообще чайник.

    Если делаю так:

    ...

    и CSS так:

    video
    {
    position:fixed;
    z-index:-1;
    min-width:100%;
    min-height:100%;
    overflow:hidden;
    }
    div
    {
    opacity: 0.8;
    background: #000000;
    }

    то все тексты в LPgenerator уходят под этот div, то есть под черный фон.

    Если делаю так: (без div), то у меня пленка на видео - серая какая-то, а не черная.

  7. Алексей

    Проблему решил. Добавил фон. Вылезла другая. Если зайти через мобильный, то выравнивание идет по правому краю... Естественно видео нет (вместо него картинка.

    1. dimadv7

      На мобильном и не будет видео, в этом случае на фон можно поставить картинку нужную. И я считаю это даже хорошо, потому как мобильный интернет гораздо медленнее, и многие не дождутся загрузки сайта. А выровнять можно при помощи margin: 0 auto; если я правильно тебя понял.

  8. Алексей

    Да, на мобильном и не нужно видео. Согласен.

    Я имею ввиду другое про отображение на телефоне.
    Если я захожу с мобильного, то:
    постер (картинка) вставляется совсем криво. Выравнивание у неё идет по левому краю. Хотя сама она большая по размерам (2000 ширина). В итоге на мобильном вся эта ширина и отображается справа. Криво очень. А если картинку удаляю, то вместо неё огромный черный экран (видео не подгрузившееся).

    Если поможешь буду премного благодарен. Как я понял, надо вставить код какой-то, чтобы выравнивание по центру (или чтобы под экран подстраивалось) было.
    Но какой я не знаю(

    Вот тег видео:

    Вот CSS:

    .video
    {
    containment:'body';
    position:absolute;
    z-index:-1;
    min-width:100%;
    min-height:100%;
    overflow:hidden;
    margin: 0 auto;
    }
    .pattern
    {
    background-image:url(http://media.lpgenerator.ru/images/11616/pattern.png#size_2x2);
    background-repeat: repeat;
    background-attachment:scroll;
    min-width:100%;
    min-height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color: rgba(0, 0, 0, 0.4);
    }

    p.s. Я чайник-чайник совсем =)

    1. dimadv7

      Да, ты очень много лишнего кода пишешь. Скинь стили, которые для картинки или блока с картинкой идут, только не просто вставляй в комментарий, а добавь пожалуйста так: [ css ] стили [ /css ], только в скобках без пробела

  9. Алексей

    1. Стиля для картинки у меня нет, т к она в теге video идет - poster.
    Почему я так сделал? Нашел на сайте каком-то. Как стили для poster описать, я не знаю.
    .poster {} - так не пробовал, т к не понимаю, так можно ли его описать. Это же не класс и не id.

    2. Забыл тег video описать.

    В общем вот тег видео, который в вставляю:

    А CSS я до этого полный прислал. Вставляю в head с помощью "вставить скрипт" в LPgenerator.

    <style>
    h1 {
     text-shadow: 0 1px 1px #000a33;
    }
    .video
    {
    containment:'body';
    position:absolute;
    z-index:-1;
    min-width:100%;
    min-height:100%;
    overflow:hidden;
    margin: 0 auto;
    }
    .pattern 
    {
        background-image:url(http://media.lpgenerator.ru/images/11616/pattern.png#size_2x2);
        background-repeat: repeat;
        background-attachment:scroll;
         min-width:100%;
       min-height:100%;
        position:absolute;
        top:0;
        left:0;
     background-color: rgba(0, 0, 0, 0.4);
    }
    </style>
    

    Надеюсь так вставил, как надо.

  10. Алексей

    Так, вижу тег видео не вставился просто так.

    <div class="pattern">
    <div id="video_2">
    <video class="video"  autoplay="true" muted loop="loop" poster="http://media.lpgenerator.ru/images/11616/sunset.jpg"  >
    <source src="видео.webm" type='video/mp4'>
    <source src="видео.webm" type='video/webm'>
    <source src="видео.webm" type='video/ogg'>
    </video>
    </div>
    </div> 
    
    1. dimadv7

      Смотри, во-первых, обрати внимание, что ты вставляешь видео в одном и том же формате. У тебя же типы прописаны, mp4, ogg вот и сконвертируй во все форматы и положи несколько, а то не во всех браузерах увидишь видео. Pattrrn у тебя в качестве темного фона поверх видео используется? Если да, сделай так:

        background:url(http://media.lpgenerator.ru/images/11616/pattern.png#size_2x2) repeat;
      

      А лучше просто цвет прозрачный дай:

      background: rgba(0, 0, 0, 0.4);
      

      Больше ничего писать не нужно.
      А для того, чтобы твоя большая картинка вставилась по центру давай еще не через poster зададим, а фоном. Смотри:

      .video{
      position:absolute;
      z-index:-1;
      min-width:100%;
      min-height:100%;
      overflow:hidden;
      background: url(http://media.lpgenerator.ru/images/11616/sunset.jpg) center center;
      }
      

      а постер вообще пока убери. Попробуй и отпиши)

  11. Алексей

    1. Да, я знаю, что форматы разные. Но пока криво получается, я решил с видео не заморачиваться.
    2. Да, паттерн поверх видео. И черный цвет, кстати, тоже. Смотрится очень хорошо это.
    3. Вставил видео. Все равно не вышло. В этом случае картинка почему-то множится + пропадает за черным фоном видео, которое не загрузилось.

    1. dimadv7

      С 3 пунктом - не понял. Кинь ссылку. У тебя много лишнего кода написано. Даже есть, такой, который взаимно исключает себя или наличие другого кода.

  12. Алексей

    3. Тут я имею ввиду, что вставил твой код, но не помогло.

    1. dimadv7

      так, давай сначала, я уже запутался, в чем он тебе не помогает? Что ты хочешь сделать. У тебя там столько понаписано, причем с ошибками...

  13. Алексей

    Смотри) Я хочу добавить видеофон на эту страницу.
    Польщуюсь LPgeneratorom, то есть на нем это и делаю.

    Сам фон я вставил, все ок. НО если зайти с мобильного телефона, то страница выглядит криво. Вот я и хочу узнать, можно ли в CSS дописать что-нибудь, чтобы страница либо адаптировалась под мобильник, либо хотя бы, чтобы фотка по центру была (и весь контент).

    1. dimadv7

      Удали все лишнее, лишние стили дивы. И начни заново.

      Для блочных элементов центрирование по горизонтали можно осуществить при помощи margin: 0 auto; Где первое значение это внешний отступ по вертикали а второе по горизонтали. Когда ставим auto блочный элемент, у которого заданна ширина становиться по середине родительского блока в горизонтальной плоскости. По этому принципу делай сайт и все будет в центре.

  14. Алексей

    Эх. В том то и дело, что код, который я описал - мой код. Остальное все добавляет LPgenerator.
    Я нашел пример страницы на LPgenerator с видео. С мобильного все ок - она подстраивается.
    event.mimidomik.ru/
    Но как хз.

    1. Егор

      Как-то хреново вставляется код, в общем в консоли смотрите, что и как

    2. dimadv7

      Что конкретно не так? Давай попробуем разобраться:)

    3. Егор

      Да скопировал вставил сюда код, а он просто исчез =)
      У меня проблема с данным скриптом, на iphone 5 почему-то запускается отдельно видео, если нажать на любой элемент расположенным над видео.

    4. dimadv7

      Ну, как бы скрипта тут вообще нет, как такового, поэтому не понял причем тут консоль?

  15. Дмитрий

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

  16. Анна

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

  17. Евгений

    _http://minimoovie.ru/libs/background/
    Если кому надо, можете использовать библиотеку для вставки видео фона, правда на мобильных версиях не работает. Там есть возможность даже несколько видео сделать и переходы.

  18. Антон

    На profipages нужно только ссылку на видео в нужное окошко вставить и готово)

  19. Олег

    А если просто конвертнуть нужный отрезок видео в .gif и залить его в качестве фона?

    1. dimadv7

      Не знаю. Не пробовал :)

  20. Zapica

    Работает только на index .html файле надо так прописать. Только тогда корректно начинает работать))) Я это так просто скачал попробовал. Там кто то в комментариях писал что без звука лучше.это правда)) Своё видео надо будет без звука писать или удалять звук через редактор. Короче то что скачал тут удаляю. Народу не понравится то что сайт с таким видеом ихний трафик сжигает))) Не у всех вить интернет без лимитный ))) А так за всё это +5 ставлю мною попробовано и проверенно РАБОТАЕТ!

  21. MasterDel

    Дизайнеры действительно вовсю используют развернутые на весь экран видеоролики, в попытках сделать действительно классный сайт. Однако в этом материале вы узнаете не только о видео, но и о полноэкранных картинках в качестве фона. Это тоже модное веяние и используется оно тоже нередко. Так что же лучше?

  22. andrgame.net

    Загруите их в любое место на Вашем хостинге на котором расположен Ваш сайт. Это можно сделать с помощью FTP

  23. Doston

    Не могу сделать как у третий ссылки, там после видео начинается About Daarnhouwer & Co. как так сделать с белым фоном?

  24. Tatiana

    Спасибо за урок. Все работает.
    Я вставила код на шаблон вордпресс.
    Только, а как сделать так что бы видео выводилось только на главной и все? Я вставила код в шаблон вордпресс.

  25. metallistus

    Спасибо, все понятно. Только в Chrome не воспроизводит. А в остальных браузерах норм. Все сделал как показано. Кто-нибудь сталкивался?

    1. dimadv7

      И в хроме тоже работает, как и в остальных браузерах.

  26. игорь

    как сделать, что бы в код добавить ссылку с ютуба, а не загружать видео

  27. Федор

    Здорово. Сделал на Юкозе. Однако вверху какая то широкая белая полоса. как убрать?

    Рискну поставить ссылку. если нельзя, то модератор уберет.
    __http://ex-hort.ru/index/0-41

    1. dimadv7

      Не увидел белой полосы на сайте...

  28. Елена

    Если так сделать - все работает, НО.... валидатор выдает ощибку
    Element source not allowed as child of element video in this context. (Suppressing further errors from this subtree.

  29. Сергей

    Напиши так и звука не будет

  30. Владик

    Одно странно при просмотре через браузер смарт ТВ, видео дико тормозит. Хотя то же видео с ютуба показывает на ура...

    1. dimadv7

      При верстке под браузеры smart TV будет еще много сюрпризов))) придется освоить хитрости и костыли 2010 - 11 годов))

  31. Inkognito

    Народ, а как мне добавить в слайдер видео с автоплеем и цикличностью?

  32. Павел

    Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute. - не работает

  33. Радмир

    Здравствуйте! Как сделать так? __https://www.youtube.com/embed/J3QMWfsYbPA?autoplay=1&loop=1&enablejsapi=1&&playerapiid=featuredytplayer&controls=0&modestbranding=1&rel=0&showinfo=0&color=white&iv_load_policy=3&theme=light&wmode=transparent&origin=

  34. Влад

    Привет, а скажи пожалуйста, как можно сделать несколько видео фоном когда одно переходит в другое?

    1. dimadv7

      Привет, без понятия, кроме как в любом редакторе, объединить в одно.

  35. Владимир

    Здравствуйте!
    У меня такая проблема: что бы я ни делал, как бы не добавлял видео на сайт, текст, который я хочу чтобы был над видео помещается либо выше видео, либо под ним, но не в режиме наложения как у Вас.
    Перепилил уже шапку и стили как мог, но ничего не выходит. Можете подсказать в чем проблема?

  36. Владимир

    Вся проблема в том, что чтобы я не прописывал в стилях, они ни как не меняют саму шапку. Могу в стилях вообще ничего не менять, видео в шапке есть, но текст не накладывается. Видео идет как отдельный блок.

  37. Владимир

    Решил полностью очистить файл css... и ничего не изменилось! Сайт как был, так и есть. Ничего не развалилось...

    1. dimadv7

      Владимир, ответил на почту

  38. Jasmin

    Владимир, зет индекс задавайте видео - чтоб оно ушло под весь остальной контент. как в этом примере зет индекс с отрицательным значением .

  39. essyss

    добавила видео, все ок, но почему-то на моем компе долго грузит. это проблема интернета или можно как-то оптимизировать скорость загрузки?)

    1. Дмитрий Давыдов

      essyss, попробуйте оптимизировать само видио. Уменьшить битрейд, например, сделать более короткое. Еще, можно попробовать добавить атрубут preload, добавить картику (обложку) на 1 секунду с первым кадром, так будет немного времени, чтобы подкгрузить часть видео.

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