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

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

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

Итак примеры:

eagleadventuretours.de

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

webuildrail.com

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

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_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

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

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

61 комментарий

  • Inkognito

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

    Ответить
  • Антон

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

    Ответить
  • Павел

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

    Ответить
  • Радмир

    Здравствуйте! Как сделать так? __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=

    Ответить
  • Влад

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

    Ответить
  • dimadv7

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

    Ответить
  • Владимир

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

    Ответить
  • Владимир

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

    Ответить
  • Владимир

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

    Ответить
  • dimadv7

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

    Ответить
  • Jasmin

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

    Ответить

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

 

Подписывайтесь на обновления, чтобы ничего не пропустить.