10 советов как улучшить фоновое видео для сайта


Содержание материала:

Два способа сделать видеофон для сайта

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

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

Пожалуй, одним из самых ярких примеров использования видео заставки в одном из блоков главной страницы, является сайт клининговой компании Eagleclean (eagleclean.co.uk). Оригинальное видео способно создать атмосферу доверия к компании и воздействует на визуальную память потенциального клиента.

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

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

Видеофон с YouTube.

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

Мы можем вставить видео с помощью iframe-кода, но чтобы применить различные настройки воспроизведения воспользуемся jquery плагином YoutubeBackground. Это обертка для Youtube API — он отлично подходит для полноэкранных фоновых видео или обычных видеороликов.

Данный пример видеофона можно использовать в заголовке сайта или в любом другом блоке страницы. Если немного изменить CSS, то видеофоном можно полностью замостить всю страницу.

Создайте файл video-background.js и скопируйте код с вкладки JS из этого блока:

Загрузите файл на хостинг в папку JS. Если это сайт WordPress, подключите скрипт к вашей теме. Для этого скопируйте этот код в functions.php.

Если это HTML сайт, добавьте в футер этот код:

В этом участке скрипта замените ID видео на свой. ID — это конец ссылки видео на YouTube (https://youtu.be/X_LrrqVrLe4)

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

Видеофон для сайта HTML5.

В этом примере мы уже не используем скрипты, а только HTML и CSS. И чтобы видео заставки могли воспроизводиться во всех браузерах, необходимо сконвертировать их в трех форматах: mp4, webm и ogv. Параметр loop=«loop» — позволяет видео проигрываться по кругу, autoplay=«autoplay» — автоматическое проигрывание, muted=«» — со звуком или без.

Смотреть на Pen Video Background Header CSS by Natali Mambetova (@nalitana) on CodePen.black

Если у вас сайт Worpress, добавляйте HTML-код в виджет или на любую страницу через визуальный редактор.

Где брать шаблоны для создания видеороликов?

Моя небольшая подборка сайтов с качественными видео материалами для создания промороликов и видеофонов.

StartBlogUp

Блоггинг для старт-апов и креативных предпринимателей

5 советов, как создать фон для съёмки видео и прямых эфиров

На каком фоне делать прямые эфиры и снимать видео?

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

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

В советские времена на стену вешали ковёр и стол накрывали клеёнкой, а теперь, здрасьте-пожалуйста, клеёнку вешают за спину и это круто. Ыыыы… Это дёшево, некрасиво и сколько ни размещай на клеёнке свой логотип, она совершенно не передаёт вашего бренда.

Я оформляла свой фон интуитивно, а недавно наткнулась на хорошие рекомендации от Лурии Петруччи, эксперта в прямых эфирах. Вот её пять советов по тому, как оформить фон для ваших видео, будь то отдельная студия или небольшой уголок у вас дома. Я дополнила советы Лурии своими комментариями.

Если вам больше по душе видео — смотрите запись моего прямого эфира, где я рассказала о том, как создать фон для видео. Чтобы быть в курсе моих прямых эфиров, подписывайтесь на страничку в Фейсбуке и на Ютьюб канал, куда я выкладываю записи прямых эфиров.

1. Выделяйтесь в новостной ленте (4:30)

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

Лурия Петруччи, эксперт в прямых эфирах и одна из ведущик канала Live Streaming Pros.

2. Добавьте свою индивидуальность (5:50)

Что вас отличает от других? Какие предметы будут рассказывать о вас интересную историю? Лурия любит красный цвет, поэтому она использует декор с красным цветом. Ещё у неё есть постер с суперженщиной и фото какого-то селебрити с его автографом. Её партнёр Дэвид ведёт канал Geeks Life на фоне роботов.

Екатерина Оаро, участница Студии, писательница и преподаватель писательского мастерства, поставила за собой печатную машинку, книги и оформила фон как уютный писательский уголок.

3. Отделите себя от фона (10:20)

Важно, чтобы ваше изображение не смешивалось с изображением фона. Если фон будет очень плоским, то и картинка будет плоской (привет, клеёнка!). Отделить себя от фона можно с помощью правильного освещения, глубины резкости у камеры или глубины самого фона. Технически это уже сложнее, чем просто оформить фон, так как завязано на технику.

Я недавно перешла со встроенной в макбук вебкамеры на отдельную вебкамеру (у меня Logitech C920).

4. Вам не нужно много места (13:35)

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

5. Вам не нужно много денег (17:39)

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

Я долгое время снимала видео на фоне стены с пробковой доской из ИКЕА и открытками с мотивационными надписями и магнитным календарём. Календарь моя сестра привезла 15 лет назад из Штатов, он ей уже надоел, никуда не вписывался и она несла его выкинуть на помойку. Я забрала и пристроила для своего фона.

Ну и бонусный совет…(23:28)

Cтарайтесь не сильно запариваться о фоне и дайте себе время формировать его постепенно. Не давайте неидеальному фону помешать вам снимать видео.

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

А вы переживаете о том, какой фон у вас в видео, прямых эфирах или даже селфи-сториз? Или пофиг?

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

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

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

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

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

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

Топ-пост этого месяца:  Из PSD в HTML, создание дизайна вебсайта шаг за шагом.

eagleadventuretours.de

webuildrail.com

daarnhouwer.com

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

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

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

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


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

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

UX-мысли о фоновых видео

Перевод статьи “UX Thoughts on Using Video as a Background” о понимании принципов использования фонового видео на сайтах.

Фоновое видео — предмет холивара среди дизайнеров. С одной стороны, оно ненавязчиво играет и привлекает внимание пользователей. С другой стороны, во имя эстетики страдает юзабилити. Это напоминает времена, когда домашние странички кишели вырвиглазными гифками и эпилептическим флешем.

Преимущества фонового видео:

1. Визуальная привлекательность

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

2. Передача товаров и услуг в комплексе

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

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

Более того,комплексные продукты, которые нуждаются в дополнительном объяснении, также могут использовать видео на фоне.

Имей в виду, что посетитель предпочтет информативное видео информативному тексту. Короткое зацикленное видео или панорамная съемка — две вещи, которые легко презентуют продукт.

3. Видео улучшает SEO

Чем больше просмотров видео, тем выше релевантность выдачи в поисковиках, особенно если видео достаточно годное, чтобы его шарить.

Добавленное описание с правильно подобранными ключевыми словами также способствует продвижению в поисковиках и лучшему восприятию видео.

Недостатки фонового видео:

1. Больше времени на загрузку

Когда страница не загружается мгновенно, посетители с нее уходят. Ученые говорят, что люди концентрируются на чем-то хуже, чем золотые рыбки.

Видео всегда загружаются медленнее по сравнению с картинками. Так оптимизируй видео для разгона страницы.

2. Нет адаптации под мобилки

Мобильные браузеры в iOS и Android не проигрывают видео автоматически. Это ограничение на уровне операционки. Даже если установить триггер, чтобы видео проигрывалось, когда юзер тапает в определенной области, это все еще не круто. Юзеры нелестно отзываются о неинтуитивном дизайне. А многие до сих пор сидят на лимитных тарифах.

3. Слишком много элементов на странице

Когда страница заполнена до фолда, на фоне играет видео, и где-то разбросан едва различимый текст, у юзера возникнет информационный кризис.

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

Хорошее, годное видео

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

1. Совместимо с брендом

Видео — способ донести до потребителя сообщение бренда и его личность. Тематика видео должна поддерживать то, что предлагает бренд. Цветовая палитра и тон видео должны гармонировать с темой сайта и личностью бренда.

2. Исполнено круто

Создание видео — само по себе затратный ресурс. Если ролик будет сделан плохо, он улетит в помойку. Вот на что стоит обратить внимание:

  • высокое качество: независимо от длины и размера, видео должно быть всегда хорошего качества. У клиентов не останется выбора, кроме как посмотреть видео после перехода на сайт, так сделай же, чтобы оно того стоило;
  • сжатие: буферизация заставляет думать, что сайт медленно грузится. Вполне хватит 720p видео с битрейтом где-то между 750 и 1250 кбит/с;
  • оверлей решит проблему слишком пережатого видео и слишком тяжелого, которое с трудом загружается без прерываний. Оверлей замажет недостатки видео при правильном подборе оттенка;
  • убедись, что правый клик по-прежнему доступен.

3. Работает только фоном

Фон — это не фокальная точка сайта. Не отвлекай пользователей:

  • используй плавные переходы, которые не отвлекают взгляд, избегай быстрого панорамирования или шаткой съемки;
  • задай тексту на видео правильный контраст или тень, чтобы он лучше читался;
  • самый верный путь убрать клиента навсегда — автопроигрывание звука. Так убери его вовсе или замьють хотя бы.

4. Короткое с ограниченным повтором

Это не полнометражное кино. Длинные клипы означают, что скачивать клиенту придется больше, а время загрузки увеличится — те самые две вещи, которые ненавидят больше всего.

Ограничь длину видео до 10–15 секунд. Ладно, до 30–40 секунд. Идеальный размер — до 6 Мб.

Ролик не должен повторяться бесконечно. Это съедает ресурсы процессора и замедляет загрузку сайта. Если все же охота использовать длинное видео — убери повтор и сделай так, чтобы оно игралось лишь раз.

5. Учитывай переходы с мобилок

56% трафика идет с мобилок. Даже несмотря на то, что мобильные браузеры не способны проигрывать видео, желание таких юзеров надо удовлетворить. Решения для мобилок пока нет — поэтому заменяйте видео на мобильных устройствах на картинку.

Вывод

Фоновое видео — не для всех. Будь уверен, что ты поступаешь правильно. Проводи сплит-тесты до того, как заменить весь сайт — выдумывай альтернативные страницы, рекламируй, смотри как реагируют. Вы сэкономили 10 минут.

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

Наверняка многие из вас задумывались о том, как добавить динамичности своему сайту, но не могли внести какие-либо глобальные изменения из-за того, что это сложно. В этой статье мы расскажем вам как сделать видео фоном сайта за 10 минут.

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

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

Сделать фоном видео очень просто. Для этого необходимо:

Вставить код в html:

Вставить код в CSS:

Отключаем видео и заменяем его картинкой для мобильных устройств.

Выбрать и подготовить видео

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

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

Также необходимо учитывать, что для кроссбраузерности следует добавлять видео в нескольких форматах, а именно .mp4 и .webm

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

Как добавить видео фоном в шаблон Moguta CMS

Куда вставлять файл видео, HTML-код и CSS-стили в шаблоне Moguta:

4 простых шага как добавить фоновое видео на ваш WordPress сайт


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

Сейчас видео, которые воспроизводятся на фоне — одна из самых популярных тенденций в мире веб-дизайна. Браузеры могут воспроизводить фоновое видео, используя либо HTML5 тег video >, либо формат H.264 . Этот процесс запускается автоматически, независимо от других. Вы можете управлять им и контролировать его, как и любой другой элемент страницы. Видео фон поможет вам сделать тот сайт, который наверняка запомнится посетителям и эффектно выделится из общей массы.

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

Шаг 1. Выберите ваш источник для видео

Вы можете использовать ваши собственные видео, выбирать видео из YouTube и Vimeo или использовать другие видео-сайты. Большинство интегрированных видеоплееров могут использовать любой из этих методов.

Ниже представлено несколько ресурсов, где бы вы могли найти подходящее стоковое видео:

Dissolve

На Dissolve вы найдете более 600,000 стоковых видео в 24 различных категориях, которые вы можете использовать на своем сайте. Они включают в себя как премиум, так и бесплатные видеоролики. Dissolve даже поможет вам найти необходимое видео на основе монтажного списка, сценария или концепции. Цены начинаются от $50 за клип.

iStock

iStock от Getty Images предоставляет возможность выбрать HD-видео и стоковые видео из 21 категории. Все видео не требуют дальнейших выплат за авторское право, вы можете приобрести их в отдельности или оформить подписку. Цены начинаются от $60.

ShutterStock

На ShutterStock вы найдете почти 3 миллиона видео (также не требуют дальнейших выплат за авторское право) в 28 категориях. Вы можете купить их по отдельности или набором. Цены начинаются с $19.

Шаг 2. Конвертируйте видео до нужного формата и размера

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

Шаг 3. Выберите видеоплеер

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

HTML5, CSS и JavaScript

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

Топ-пост этого месяца:  Выпуск №8. Свойства таблиц стилей (css).

Разметка

Сначала создайте контейнер для JavaScript:

Код включает в себя два изображения: первое — для заполнения (первый кадр из видео) и второе — альтернативное изображение.

Скрипты

Этот код для теста браузера:

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

CSS

Вы можете оформлять разметку с помощью CSS. Используя CSS, вы сможете установить размер контейнера с помощью тегов img > или video >. Пропорции при этом сохраняются.

Плагины

Другой вариант — использовать плагины. Ниже представлен небольшой обзор нескольких плагинов, которые помогут вам в данной ситуации.

Image&Video FullScreen Background ($17)

Это премиум плагин, который предоставляет функцию слайдера с фоновым изображением, фоновое видео, мультимедийную галерею и дает возможность выводить это все в полноэкранном формате. Он совместим с мобильными устройствами (без автозапуска).

Плагин поставляется с двумя скинами и двумя стилями, возможностью анимированного текста, двумя переходами, позволяет вставлять ссылки в каждый слайд и размещать текстуру поверх изображений. Отлично работает с YouTube и Vimeo. Благодаря ему вы сможете самостоятельно настроить более 40 параметров.

Стандартная лицензия стоит $17, предназначена для одного клиента и для некоммерческих проектов. Расширенная лицензия стоит $85, предназначена для одного клиента и может использоваться для коммерческих проектов.

Easy Video Background WP ($14)

Это премиум плагин, который работает со всеми браузерами, включая Internet Explorer 7 и 8. Он будет автоматически выбирать наиболее оптимальный формат файла для отображения. Плагин использует HTML5 и автоматически переходит к Flash, если HTML5 не поддерживается, и наоборот. На мобильных устройствах он будет выводить изображения.

Размещает видео на страницах и постах, используя шорткоды. С помощью плагина, вы сможете полностью контролировать размер видео, выбирать абсолютное и фиксированное позиционирование, и к тому же, не нужно будет заботиться о соотношение сторон. Есть такие функции, как воспроизведение, пауза, отключение звука и т.д.

Стандартная лицензия стоит $14, предназначена для одного клиента и для некоммерческих проектов. Расширенная лицензия стоит $70, также предназначена для одного клиента и может использоваться для коммерческих проектов.

Video Player & FullScreen Video Bgd ($16)

Это премиум плагин, который воспроизводит видео как с автономных хостингов, так и с Vimeo или YouTube. Плагин будет выводить их в полноэкранном режиме или с фиксированной шириной. Вы также можете поместить текстуру поверх видео. Совместим с мобильными устройствами (без автозапуска). Имеет более 30 параметров, которые можно настроить без особых усилий.

Стандартная лицензия стоит $16, предназначена для одного клиента и для некоммерческих проектов. Расширенная лицензия стоит $80, предназначена для одного клиента и может использоваться для коммерческих проектов.

mb.YTPlayer for background videos (free)

Данный плагин может использовать любое видео с YouTube в качестве вашего фонового видео. Он использует YouTube iframe API и выводит видео с помощью тега HTML5 VIDEO.

Плагин очень прост в использовании. Вы передаете ему URL-адрес видео, выбираете страницу, на которой оно будет отображаться, настраиваете параметры прозрачности и качества, убираете рекламу (если вы владелец видео), указываете начало и конец, устанавливаете музыку, настраиваете цикл и т.д. Он добавляет видео на страницы и посты с помощью шорткода, позволяет вам добавлять изображение для мобильных устройств.

bgvideo (free)

Этот плеер будет также размещать шорткод на вашей странице или посте. Он будет воспроизводить MP4, WebM, или OGG видео с URL-адреса, который вы вводите. Вы можете настраивать высоту, ширину, фиксированное положение, автозапуск, цикл и параметры звука. Для настройки bgvideo потребуется сделать несколько дополнительных действий, о которых вы уже успели прочитать в нашей статье.

Шаг 4. Настройте ваше видео

На самом деле, настроить ваше видео очень легко.

Теперь, когда у вас есть видео подходящего типа и размера, ваш видеоплеер настроен и готов к работе, настало время загружать видео и подключать плеер к нему. Если вы разберетесь с URL-адресом видео в плагине, то все остальные настройки будут еще проще. Вам нужно будет принять несколько окончательных решений для работы видео:

  • Авто-воспроизведение. Это самая популярная настройка. Видео должно автоматически запускаться после того, как загрузились все остальные элементы.
  • Цикл. Стоит ли делать цикл с видео и воспроизводить его постоянно? Если ответ положительный, то внимательно устанавливайте начальную и конечную точку, чтобы переход смотрелся естественным и плавными. Процесс повторения не должен обращать на себя много внимания.
  • Аудио. Мы не рекомендуем автоматически воспроизводить аудио. Позвольте пользователям самостоятельно, при желании, включать звук. Аудиофайлы требует значительных дополнительных ресурсов и сильно нагружают браузер. К тому же, вы не можете быть уверены в музыкальных предпочтениях ваших посетителей.
  • Демо изображение. Если браузер не совместим с плеером, то он должен выводить альтернативное изображение. Это поможет вам избежать того, что сайт будет выглядеть «поломанным» и пустым.

Заключение

Фоновые видео помогут вашему сайту выгодно выделиться и привлечь внимание читателей. Добавить данную функцию на ваш сайт совсем не сложно и не требует много действий, но при правильно выбранном видео и проигрывателе вы сможете превратить сайт из просто хорошего в удивительный!

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

Источник: wpmudev.org

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Видео в качестве фона для сайта на HTML5+CSS

На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.

Рекомендации

Если вы твердо убеждены, что хотите установить видео для фона на сайте, необходимо знать кое-какие нюансы:

  1. Во-первых, нужно обязательно помнить о том, что видеоролик имеет довольно большой вес. Это может негативно сказаться на скорости загрузки страницы, особенно если у пользователя медленный интернет. Поэтому выбирайте не слишком продолжительные по времени видеоролики. В случае, когда требуется использовать довольно длинное видео, будьте готовы либо к работе над уменьшением его веса, либо к тому, что придется жертвовать частью аудитории.
  2. Во-вторых, избегайте автовоспроизведения звука из видео. Используйте либо ролики без аудио, либо добавьте возможность пользователю самому включить звук, если ему это понадобится. Автоматическое воспроизведение звука при открытии сайта считается очень дурным тоном.
  3. В-третьих, нужно позаботиться о кроссбраузерности и корректном отображении и воспроизведении видео на всех устройствах, а также предоставить альтернативу видео (для тех случаев, если оно не воспроизведется). Ниже в нашем примере мы покажем, как это сделать.
  4. И в-четвертых, стоит хорошо подумать, уместен ли видеофон на том сайте, где вы захотели его установить, поскольку очень легко переступить грань между оригинальностью и бесполезностью данной затеи. Видео ни в коем случае не должно отвлекать пользователя от его главной цели, по причине которой он пришел на сайт. Устанавливая видео-фон под текстовым содержимым, не забудьте проверить, насколько читабельным стал текст. Например, он может слиться с фоном в определенный момент проигрывания видеоролика (белый текст на белом фоне, черный на черном и т. п.).


1. HTML

Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока

Для тега указаны следующие атрибуты:

  • width – ширина области для воспроизведения ролика;
  • height – высота области;
  • preload – загрузка видео вместе со страницей;
  • autoplay – автоматическое воспроизведение видео;
  • loop – циклическое повторение видео;
  • poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно.

Далее у нас записано два тега , где указаны URL-адреса видео в разных форматах – MP4 и WEBM. Зачем подключать ролик в нескольких форматах? Дело в том, что не все браузеры поддерживают один-единственный формат видео. Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл хотя бы в этих двух форматах. А атрибут type с соответствующими значениями помогает браузеру быстрее определиться с выбором.

2. CSS

Наша таблица стилей для фона выглядит следующим образом:

Как видно из кода, фон установлен на всю страницу, а в качестве запасного фона задано изображение (кадр из этого же видео). В самом крайнем случае будет задействован цвет фона #94a233 .

Также в коде есть директива @supports , которая проверяет, поддерживает ли браузер свойство object-fit . Если да, то фон принимает значение cover и пропорционально отображается при разных размерах экрана.

Согласно данным с сайта caniuse.com, на сегодняшний день свойство object-fit поддерживается всеми браузерами, кроме Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android Browser 4.1-4.4.

Вот и всё. Надеемся, данный урок принес вас пользу. Если у вас есть другие интересные и простые способы установки видео в качестве фона для сайта и вы хотите поделиться ими, пишите в комментариях!

Фоновое видео на сайте

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

  • увеличивается скорость интернет соединения;
  • совершенствуются видеокодеки;
  • расширяется браузерная поддержка HTML5 видео.

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

  • страница сайта может медленно загружаться;
  • пользователь будет постоянно отвлекаться от главного контента, размещенного на сайте;
  • на сайте будет слишком много движения и панорамирования, что только будет создавать негативно впечатление у гостя, оказавшегося на странице вашего сайта.

Что нужно делать, чтобы негативных последствий не возникло? Мы поделимся с вами некоторыми инструкциями, которые помогут вам настроить свой сайт таким образом, чтобы на нем качественно воспроизводилось фоновое видео, и сам сайт при этом нормально работал:

Сжимайте видео, насколько это возможно

Сожмите размер видеофайла максимально до оптимального битрейда. Если вы зашли на сайт, а фоновое видео на нем работает некорректно (спотыкается, например), то вы отвлекаетесь от него, создается впечатление, что весь сайт тормозит в работе, хотя главный его контент прогрузился полностью. Такое происходит, если вы, стремясь использовать высококачественное видео в разрешении 1080p, не учитываете, что от этого ухудшиться скорость загрузки видео, а стриминг будет постоянно прерываться. Лучше использовать видео 720p и несколько хаков для скрытия низкого качество медиаконтента.

Используйте наложение для скрытия артефактов

Чтобы скрыть дефекты видео, используйте слой-наложение, которое поможет вам замаскировать плохое качество. Просто добавьте спозиционированное div и псевдо-элемент ::after в контейнере видео. Примените к этому элементу свойство CSS pointer-events: none;. Это позволит вам дальше свободно управлять этим видео без ограничений. Можно сделать полупрозрачное наложение или в том цвете, в котором написан ваш сайт. Прежде, чем его установить окончательно, просмотрите, как оно будет смотреться, с помощью демо-версии.

Ограничивайте общий размер и длину видео

Измените размер и длительность видео (эти параметры лучше ограничить). Если вы это сделаете, что воспроизведение видео будет плавным, не возникнет пауз при просмотре сайт. Учтите, что посетители вашего сайта не стремятся просмотреть фоновое видео, которое вы используете. Пусть оно длится максимум 30 секунд и весит только 2 Мб. Такие видео можно присмотреть на видеостоках.

Топ-пост этого месяца:  Алгоритм Penguin переживает последнее обновление

Избегайте чрезмерного движения

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

Обеспечьте достаточный контраст для текста на переднем плане

Текст на переднем плане сайта должен контрастировать по отношению к фоновому видео. Это важно, потому что можно сделать текст нечитаемым, если подобрать неправильный цвет или подобрать неподходящее наложение.

Обеспечьте заполнение фоном всего контейнера

Весь контейнер должен быть заполнен фоном. Вы, наверняка, знакомы с таким понятием, как background-size. Это свойство, благодаря которому можно сделать так, чтобы фоновое пространство было заполнено полностью, и при этом отображалось качественно. Есть также такое понятие, как object-fit. Благодаря этому свойству вы можете заполнять все фоновое пространство посредством видео. Так как это свойство пока работает с перебоями, лучше использовать полифилл или JavaScript, чтобы устанавливать фоновое видео.

Адаптируйте для разных устройств

Сделайте так, чтобы ваше фоновое видео было адаптировано под любые устройства, особенно под мобильные телефоны. Дело в том, что iOS отключает автовоспроизведение фонового видео, превращая его в мизерную иконку. Только после нажатия на эту иконку, можно просмотреть фоновое видео на мобильном устройстве. Поэтому продумывайте запасной вариант дизайна, в котором на фоне будет не видео, а обычное изображение, которое на телефоне будет смотреться гораздо лучше, чем видео.

Не зацикливайте видео навсегда

Не стоит устанавливать одно фоновое видео навсегда, поэтому уберите такой атрибут, когда будете вставлять видео, как loop. Если вы этого не сделаете, тогда браузер будет воспроизводить фоновое видео до тех пор, пока вы не закроете вкладку, а все это отразится на производительности всей страницы сайта в целом. Лучше вместо любого плана атрибутов написать код JavaScript. Он будет останавливать воспроизведение фонового видео по таймеру, который вы прикрепите к сайту. Он будет срабатывать в тот момент, когда пользователь нажмет на правую кнопку мышки.

Добавьте кнопку паузы

Обязательно установите на фоновое видео кнопку «пауза». Посетители, которые зайдут на ваш сайт, и захотят сразу же отключить фоновое видео, должны иметь такую возможность, нажав на паузу. Если такой возможности вы для них не предусмотрите, то они просто покинут ваш сайт и не станут углубляться в суть предложения, которое вы делаете на своей странице. Кнопка «пауза» добавляется благодаря JavaScript. Если же вы будете использовать jQuery Background Video, то эта кнопка появиться автоматически. Вам нужно будет только подобрать для нее интересный дизайн.

Сделайте так, чтобы ваше фоновое видео могло затухать, чтобы у посетителя не создавалось впечатления, что вы ему что-то хотите навязать. Чтобы его ничего не отвлекало, попробуйте добавить в ваше видео эффект затухания при паузе видео, особенно в том случае, если изображение имеет более высокое качество, чем видео. Это можно сделать в плагине jQuery Background Video таким образом:

    добавить изображение в качестве фона для элемента, содержащего

Делаем видео фоном сайта — как за 2 шага сделать видео фоном сайта

Фон для сайта бывает различных видов: текстуры, сплошной цвет, изображение и т.д. Но фоном также еще может быть и видео! Не просто статическое изображение, а «25 изображений в секунду». Понятно то, что не любое видео подойдет для этого, но об этом мы поговорим дальше в статье. Также рассмотрим сам процесс установки, то есть как сделать видео фоном сайта с технической стороны.

Рекомендую к прочтению следующую статью на тему лендингов, где я подробно рассказал о самых популярных способах создания лендинга:

Живая демонстрация того, как на фоне сайта располагается видео:

Посмотреть примерСкачать

Скриншот с примером:

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

1 HTML структура

Определимся со структурой. Мы будем использовать теги HTML5 для вставки видео:

Пару слов по коду:

  • Строки: со 2 по 4 — блок затемнения, который содержит заголовок.
  • Строки: с 5 по 8 — часть с видео.

Оба дочерних блока будут находится в абсолютном позиционировании и в блоке с классом «overlay» мы можем располагать всю информацию, которая обычно находится в первом экране любого лендинга.

2 CSS стили

Осталось правильно задать стили, чтобы видео оказалось именно на фоне первого блока:

Здесь я привел стили только для первого блока на странице. В исходниках Вы можете найти стили полностью для всего демо.

Но так как интернет на мобильных устройствах по скорости уступает настольных компьютерам, то для ширины экрана менее 786px мы не будем показывать видео, а покажем лишь изображение:

Где взять красивые видео для фона сайта?

Рекомендую следующие видеостоки (список обновлен в октябре 2020):

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

Также добавьте данную статью в закладки «CTRL+D», чтобы видеостоки были всегда под рукой.


Вывод

Установка в 2 шага. Вам лишь нужно скопировать HTML и CSS в нужное место. Но правильно подобранное видео смотрится очень красиво.

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

Успехов!

Еще материалы по этой теме

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

47 комментариев к записи

За ссылки на фоны спасибочки ��

Большое спасибо за урок.

Хотелось бы еще знать как можно избежать появления черного экрана вместо видео при обновлении страницы. Пытался поставить фоновое изображение, как в постере, но это не помогло.

Черного экрана можно избежать вставив изображение либо с помощью атрибута «poster«, либо с помощью фонового изображения для блока, в котором находится видео через CSS.

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

Не помогает поставить poster и через css также не вышло)

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

Плохо, что не получается.

На слове вордпресс уже мог и закончить))))

а паддинг для чего не пойму в основном блоке !

Так как блок в абсолютном позиционировании необходимо обязательно задать высоту блока, иначе Вы его не увидите.

как сделать по стилю видео само в окне меньше а то оно у меня показывает как то верхний край, окно 840х377

пол видео не видно…

Добрый день, Роман!

Видео находится в блоке с классом fullscreen-bg, изменяя его размер, вы будете изменять размер видео.

Доброе время суток!

Такой вопрос… Как сделать что бы в начале не видно было плаера… а постоянно видео повторяющие!

А то видно когда заходишь на сайт в шапке видео плаер грузит видео.

Добрый день, Роман!

Необходимо сделать фоновое изображение, которое будет показываться до того момента, когда видео еще не прогрузилось. Путь до изображения задается в атрибуте «poster» в html.

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

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

Вы используете плагин FullPage.js. Активному слайду он добавляет класс «active», поэтому вам необходимо сделать проверку, когда данный класс будет добавлен слайду, где должно находится видео, то с помощью jQuery (можете воспользоваться функцией .html() , или просто написать на JS ), добавить в нужное место код видео.

В этом случае оно заработает.

ни слова не понял)), можете дать код и сказать куда его скопировать?)))

Если бы она была.. Эта волшебная кнопка, которая сразу делает как надо)

В вашем случае лучше они раз разобраться как это работает и сделать это. Потому что в дальнейшем сложно будет сделать что-то сложнее простого слайдера.

Здесь все достаточно просто. Вам лишь необходимо по этапам сделать то, о чем я написал. Но так как вы ничего не сделали, то помочь вам тяжело. ��

Вы единственный из учителей интернета кто смог более менее доходчиво рассказать что и как, пожалуй задержусь на вашем сайте)) остальные просто молчали а кто и вовсе сказал не знаю в чем дело, ну значит надо учить jQuery или JS да, что бы оно заработало

Лучше всего обратите внимание на jQuery. Документацию с основами вы быстро освоите. А как освоите, поймете о чем я написал. Здесь ничего сложного нет. Если будут вопросы — пишите �� !

Юрий, здравствуйте! Хотел поставить пару кнопок на видео, но ссылки почему-то не кликабельны. Подскажите, пожалуйста, в чем причина и как исправить. Ссылки все верные.

Добрый день, Михаил!

Не могу понять, что это «пару кнопок на видео»? Объясните подробнее как вы все разместили на странице.

Юрий, у меня на сайте после встраивания конфликт с оверлеем, как сделать чтобы не конфликтовало?

Чтобы не конфликтовало, необходимо вам изучить данную статью — z-index.

Видео запускается без звука почему-то… Как сделать со звуком?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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