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

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

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

Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся - и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и 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. Дмитрий Давыдов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      Здорово, на стороннем хостинге видео храните? А насчет фона, то просто нужно обернуть блок с видео в какой-нибудь 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. Дмитрий Давыдов

      На мобильном и не будет видео, в этом случае на фон можно поставить картинку нужную. И я считаю это даже хорошо, потому как мобильный интернет гораздо медленнее, и многие не дождутся загрузки сайта. А выровнять можно при помощи 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. Дмитрий Давыдов

      Да, ты очень много лишнего кода пишешь. Скинь стили, которые для картинки или блока с картинкой идут, только не просто вставляй в комментарий, а добавь пожалуйста так: [ 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. Дмитрий Давыдов

      Смотри, во-первых, обрати внимание, что ты вставляешь видео в одном и том же формате. У тебя же типы прописаны, 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. Дмитрий Давыдов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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. Дмитрий Давыдов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности