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

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

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

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

Итак пример:

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

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

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

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

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

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

Видео фон для сайта: плагины для WordPress

Привет, уважаемые читатели!

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

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

Содержание:

• Видео для сайта: бесплатно и за деньги
• Плагины WordPress для работы с фоновым видео
• Видеоролик в качестве фона: особенности использования

Источники видео и особенности выбора

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

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

1. Подобрать бесплатное видео в одном из общедоступных онлайн-хранилищ.  В интернет-пространстве достаточно много интересных вещей, предлагаемых бесплатно. Подходящие бесплатные видео для фона сайта, разрешенные для свободного использования легко можно найти на таких сайтах как Pixabay, Videvo, Pond5, Mazwai. Этот список онлайн-ресурсов с подборками коротких качественных видеороликов далеко не полон. В сети существует немало сайтов-библиотек с коллекциями изображений и видеофайлов, не столь крупных, как названные. Бесплатные видеофоны для сайта в HD-качестве и подборки футажей с текстурами, визуальными эффектами, природой, людьми и различными сюжетами только и ждут, чтобы быть использованными по назначению. Все, что необходимо сделать, это определиться с собственными предпочтениями, выбрать подходящий ресурс и скачать видео фон для сайта бесплатно.
2. Создать видеоролик самостоятельно. Такой вариант может стать хорошим решением в случаях, когда есть большое количество отснятого видеоматериала у клиента, заказавшего создание коммерческого сайта. Подходит он и для ресурсов с авторским фото и видеоконтентом — например, для блога туристической тематики, автор которого решает создать красивую посадочную страницу с предложением услуг гида по какому-либо маршруту или городу. Смонтировать несложный футаж самостоятельно нетрудно и из качественного ролика с лицензией, разрешающей свободное использование видео — в этом случае возможности применения самостоятельно созданных фонов становятся гораздо шире.
3. Заказать видеомонтаж. Сделать это можно как в оффлайн-студии, занимающейся изготовлением рекламных видеоматериалов, так и у фрилансеров на специализированных биржах, таких как KWORK. Несколько секунд видео для фона на лендинг или многостраничный сайт не потребуют больших финансовых затрат. Понимание того, какое именно видео требуется для решения конкретной задачи, и продуманное техническое задание помогут получить результат, близкий к желаемому. Заказ видеосюжета у профессионалов, занимающихся его созданием не один год — возможно, лучший из рассмотренных вариантов, а при создании коммерческого сайта достаточно узкой тематики (например, производственной) — единственный.
    

Видео на фон сайта: плагины

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

Video Background

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

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

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

В платной версии плагина, которую можно приобрести за 19 долларов, имеются расширенные настройки: возможность использовать видео ютуб в виде фона на сайте, выставлять для него точное время начала и завершения, а также добавлять кнопки «Пауза/Воспроизведение» для видеоплеера и «Включить/Выключить» для аудио.

mb.YTPlayer for background videos

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

Добавив в поле ввода «The Youtube video url is» адрес видеоролика, расположенного на канале YouTube, и выбрав категории страниц, на которых будет отображаться видео в качестве фона (например, только на главной или на всех страницах), сохраняем настройки и любуемся результатом.

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

Дополнительные настройки, такие как установка качества видео, соотношение сторон, степень прозрачности, цикличность воспроизведения, установка времени начала и завершения воспроизведения, наличие звука и элементов управления плеера, доступны лишь в mb.ytplayer Plus — расширенной версии плагина стоимостью 12 евро.

Плагин mb.vimeoPlayer for background videos того же автора, подобный рассмотренному и позволяющий использовать для фона видео с видеохостинга Vimeo, также можно найти в репозитории. Настройки плагина аналогичны.

Плагины независимых разработчиков

Те, кому не хватает возможностей, предоставляемых бесплатными плагинами из репозитория, могут воспользоваться услугами торговой площадки CodeCanyon, предлагающей плагины WordPress от независимых разработчиков для загрузки видео в фон сайта, обладающие большим количеством опций. Здесь же можно найти и аддоны для Visual Composer. Вот несколько наиболее известных премиум-плагинов:

• Easy Video Background (HTML5)
• Easy Video Player WordPress Plugin
• Simple BG — Easy Video Background
• Full Width Background Gallery with Youtube Video
• Video Player & FullScreen Video Background
• Parallax & Video Backgrounds for Visual Composer

Нюансы использования видео в качестве фона

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

• Следует подумать, насколько уместен видеофон для сайта, на котором предполагается его разместить. Грань между оригинальностью решения и его бесполезностью в каждом конкретном случае приходится проводить индивидуально. Не нужно забывать о том, что никакие изыски дизайна не должны отвлекать посетителя от цели посещения сайта. Напротив, все его элементы, в том числе, и видео на заднем фоне сайта, должны способствовать улучшению взаимодействия посетителя и интернет-ресурса.
• Автовоспроизведение звука в фоновом видеоролике — не лучший из возможных вариантов. Подобный подход зачастую способен отпугнуть посетителя и заставить его поскорее закрыть «шумный» сайт. Хорошим тоном считается использование беззвучных фоновых видеозаставок либо предоставление пользователю возможности включать звук самостоятельно.
• Установленный на странице видеофон должен гармонично сочетаться с ее текстовым содержимым. Если текст страницы сливается с фоном (плохо читается) в какой-то из моментов проигрывания ролика, о его «правильном» воздействии на читателя не может быть и речи.
• Видео, используемое на странице, не должно сильно замедлять ее загрузку. Видеоконтент, в сравнении с прочими, составляющими сайт элементами, обладает наибольшим весом. Поэтому, чтобы не потерять часть аудитории, в качестве фона желательно подбирать ролики, не слишком продолжительные по времени.
• Готовое решение всегда необходимо проверять на предмет кроссбраузерности, корректного и плавного воспроизведения видео в фоне сайта на всех типах устройств. В случае невозможности воспроизведения видео посетителю должен предоставляться альтернативный вариант фона – например, в виде статического изображения.

Заключение

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

Бесплатные видеофоны, видеоролики без лицензионных отчислений

Захватывающие бесплатные фоновые видеоролики для веб-сайтов

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

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

Часто задаваемые вопросы о фоновом видео веб-сайта:

Советы по использованию стокового видео для фонового изображения или баннеров веб-сайта:

Вероятно, текст, кнопки или какой-либо контент поверх видеофона.

Убедитесь, что вы не сбиваете зрителя с толку и не затрудняете разборчивость контента, следуя нескольким советам:

• Цвет вашего контента должен контрастировать с видео
• Накладывать на видео более темные или светлые тона, чтобы текст был разборчивым
• Используйте видео без звука и не добавляйте звук
• Скройте элементы управления видео для создания бесшовного фона
• Используйте короткие клипы, которые зацикливаются — по возможности старайтесь использовать бесшовный цикл

Как добавить ощущение вашего бренда эти видео:

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

Каков рекомендуемый размер фонового видеофайла веб-сайта?

Если вы загружаете видео непосредственно на свой веб-сайт, убедитесь, что размер файла не превышает 6 МБ.

• Разрешение: Видео 720p (1280×720) с низкой частотой кадров 24 или 25 кадров в секунду или MP4 (h364).

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

Разумно выбирать видео ограниченной длины, так как размеры видеофайлов могут быть довольно большими и замедлять время загрузки вашего сайта. Рекомендуется использовать короткое 10-15-секундное видео или часть видео и превратить его в цикл видео, чтобы создать иллюзию более длинного видео.

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

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

  <цикл управления видео>
  
  
  
 

Если вы размещаете видео на YouTube или Vimeo и т. д., используйте следующий код:

Могу ли я скачать фоновое видео веб-сайта бесплатно?

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

Фоновые видео для вашей домашней страницы

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

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

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

Примеры фонового видео

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

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

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

ProjectSkin

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

ThemePunch

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

HtO Surf Shop

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

Obakki Foundation

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

Кусачий

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

Фоновое видео Что нужно и чего нельзя делать

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

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

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

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

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

5. Не используйте фоновое видео со звуком. Просто не надо. Автовоспроизведение видео со звуком — отличный способ заставить пользователей немедленно закрыть окно. Если в вашем видео есть звук, убедитесь, что он отключен по умолчанию.

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

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

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

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

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

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

Для получения более подробных инструкций по настройке фонового видео с помощью HTML5 ознакомьтесь с этой статьей. Обратите внимание, что конструкторы веб-сайтов, такие как Wix, Squarespace, Shopify и альтернативы Shopify, также упрощают добавление видеофонов. И если вы используете WordPress, есть плагины и темы, которые также упрощают этот процесс.

Создание фонового видео

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

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

Видеоматериалы о природе

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

Ночное небо стоковое видео

Некоторые другие хорошие источники бесплатных видеоматериалов включают такие сайты, как Pexels, Coverr, который специализируется на видеороликах для домашних страниц, и Videvo, который предлагает более 3000 бесплатных видеоматериалов в формате HD.