Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Стартап чат, чат для команд, виртуальный коворкинг. Связи решают все.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
36
Эбиа

Эбиа

www.ebia.ru

16
Enlite

Enlite

enlited.ru

15
likearea

likearea

smm.li

14
Amarket

Amarket

amarket.io

14
Relap

Relap

relap.io

12
RockinRobin

RockinRobin

www.rockinrobin.co

11
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Cookiezz

Cookiezz

cookiezz.com.ua

11
ПРОМКА24

ПРОМКА24

promka24.com

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Видео в background для сайтов. Примеры и 5 бесплатных ресурсов с видео

8 097 18 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Картинкой в бэкграунде сегодня никого не удивишь, гораздо эффектнее поставить короткое видео ! Обычно это ролик на 20-30 секунд с бесконечным повторением. Посмотрим, как это выглядит.

Сайт- презентация Axe effect. Короткий ролик в бэкграунде акцентирует внимание посетителя на продукте.

b_558938647a0fb.jpg

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

b_5589381988c36.jpg

Сайт кафе. На первой странице слайдер и первый слайд - видео слайд. Смотрится очень эффектно.

b_5589385a6ce7d.jpg

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

b_55893852e0824.jpg

Плагин можно взять здесь. В плагине куча настроек. Например:

  • mute, можно отключить звук
  • opacity, позволяет настроить прозрачность от 0 до 1
  • optimizeDisplay оптимизирует видео под размер окошка браузера
  • loop проигрывать ли видео бесконечно
  • startAt остановиться на такой то минуте
  • showYTLogo показывать лого

и множество других полезных настроек.

Так же может проигрывать список видео, применять css фильтры. В плеер можно встроить даже Google Analytics. Плеер доступен в виде плагина к WordPress.

Все это хорошо, но где же взять видео. А взять их можно на этих сайтах, причем совершено бесплатно !

  1. Coverr
  2. Fancyfootage
  3. Pexels
  4. Videvo
  5. Videezy

Несколько советов, как лучше использовать видео в бэкграунде.

  1. Видео должно быть 15-30 секунд.
  2. В режиме autoplay, то есть бесконеное проигрывание.
  3. Аудио лучше выключить.
  4. Обратите внимание на текст, текст не должен сливаться с картинкой из видео.
  5. Лучше использовать короткое сообщение или слоган с хорошей типографикой.

Лучше всего, когда видео рассказывает какую-то историю о вашем бизнесе. Пример с кафе выше очень удачно демонстрирует эту мысль. Сделать такое видео вы можете и сами, зеркалкой нынче никого не удивишь. Пользуйтесь и повышайте внимание и конверсию вашего сайта !

Обзор подготовлен Startr - чат на slack, онлайн питчи, презентации, startup дайждест, аналитика.

+6
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Strela.guru
Разработка и продвижение проектов
Дмитрий Девкалион
УХ ты. спасибо за крутые штуки!)
Ответить
Podryad4ik.ru
Портал квартир в новостройках от подрядчиков
Пётр Столыпин
http://investicii-v-nedvizhimost.ru

Или например наш лендинг. Сделали до того, как это стало трендом на Спарке)
Ответить
Startr.ru
Стартап чат, чат для команд, виртуальный коворкинг. Связи решают все.
Roman Yakovlev
А что вполне себе вариант, промо видео тоже можно в бэкграунд положить )
Ответить
Andrey Kim
Красиво или некрасиво, а смотрится кидаловом, особенно разное название сайта в шапке и адресной строке. Или почему смотрится?
Ответить
Skarui
веб-разработка и интернет-маркетинг
Михаил Петров
Думаю, все такие все равно картинку стоит оставить в фоне, но и видео тоже чтобы было. Просто с z-indexом поиграться. А то бывает когда интернет тормозной или браузер старый а видео не может загрузиться.
Ответить
Startr.ru
Стартап чат, чат для команд, виртуальный коворкинг. Связи решают все.
Roman Yakovlev
Да, использование картинки для мобильных вообще обязательно.
Ответить
Роман Максимов
http://murmansk-karawella.ru
Сняли видео с дрона, смонтировали его, нарисовали логотип компании и всё вместе разместили в шапке сайта. Качество видео пришлось сильно ужать в целях оптимизации.
PS Там ещё номера можно посмотреть в 360, а не фотографиями.
Ответить
Startr.ru
Стартап чат, чат для команд, виртуальный коворкинг. Связи решают все.
Roman Yakovlev
Отлично смотрится, а вот в Каравеллу не захотелось поехать ) коробка из кирпича совсем не вдохновляет ...
Ответить
Ilya Lesov
Ну вы опоздали с обзором где-то на пару лет. Сейчас, практически любой шаблон с Themeforest имеет видео в бэкграунде. А в примеры стоит добавить Paypal, где очень грамотно реализована подгрузка видео и его адаптация под различные разрешения.
Ответить
Startr.ru
Стартап чат, чат для команд, виртуальный коворкинг. Связи решают все.
Roman Yakovlev
Управляющий контрол старт/пауза конечно хорошо, но нужно ли это. Что касается обзора, основная фишка не новизна, а бесплатные ресурсы с видео под бэкграунд.
Ответить
Администрация
Спасибо за полезный материал! Анонсировали на ЦП:

http://vk.com/wall-33393308_347206
https://www.facebook.com/SMMrussia/posts/966579446700304
Ответить
Startr.ru
Стартап чат, чат для команд, виртуальный коворкинг. Связи решают все.
Roman Yakovlev
Крутяк, правда видео бы получше выбрали, HD например.
Ответить
Игорь
Пока тестируем. Проблемы были с долгой загрузкой. И пришлось музыку убрать. А видео менять можно.
Ответить
GreenRed brand studio
разработка логотипа за 99$
Панченко Андрей
опача! то что нужно для нового лэнда.
Ответить
Айзек
Курсы робототехники и информационных технологий
Анищенко Александр
Для своего сайта http://aizek-nt.ru/ я хочу сделать на главную секцию видеоприветствие длительностью ну минуты так 1:30-2:00. Мне лучше использовать видеобэкграунд или есть иные способы?
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать