Как сделать видео фоном сайта: Как сделать видео 🎥 фоном сайта + 12 бесплатных видеостоков – Как сделать видео фоном сайта

Содержание

Как правильно использовать фоновое видео: 24 сайта в пример

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

Вот сейчас, куда вы смотрите?

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

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

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

Эксперты по конверсии и сайто-владельцы отмечают факт: видеоинформация повышает интерес к офферу и лояльность потребителей (больше регистраций, подписок на услуги / сервисы). Из исследования FoodBloggerPro:

С использованием видео в качестве фона на главной странице, целевая посадочная конверсия возросла на 138%

Надо признать, увеличение конверта на 138% – исключительно удачный тест, проводимый мастерами оптимизации. На улучшения в 10% – 20%, вполне можно рассчитывать без помощи профессионалов. Это не гипотетический сценарий влияния на продажи. В видеомаркетинге работают правильные подходы (как и во всем маркетинге). Даже новации способны навредить дизайну и сайту в целом. Далее рассмотрены выигрыши / трудности / особенности видео-решений в бэкграунде.

Как использовать видео для фона сайта – правильные подходы

Часть 1: Когда применять видео-фон на сайте?

Видео в фоне наиболее эффективно, если:

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

Пример #1: Бизнес, Сервисы, Учреждения

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

Поставщик медицинских услуг на главной размещает промо-видео, поясняющее доменный нейминг (Premise Health – предпосылка к укреплению здоровья).

на сайт

В первом экране посетителю показывают занятия йогой / спортом и разговоры с доктором. Так, промо-сайт повышает доверие к оздоровительной программе холдинга


Видео максимально воздействует на целевую аудиторию. Это смелое решение – выше линии сгиба не каждый сможет, оправдано заменить тексты видеоконтентом:

на сайт

Посетителю показывают процесс разработки дизайнов для клиентов: взаимодействие команды, совещания по выработке стратегии…


De Republica – австралийская digital студия с видео-продакшн услугами:

на сайт

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


Пример #2: Реальные, либо цифровые продукты

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

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

на сайт

Видеобэкграунд отлично презентует софт Fit Radio – наглядно показано как полезное сочетается с приятным (пример с физической продукцией dontabak.ru)


В полноэкранном формате имеет смысл демонстрировать достоинства решений для сферы спорта, туризма (curadmir.com, alabama.travel).


Пример #3: Позитивный опыт (мероприятия, туры, гостеприимство)

Фоновое видео способно передать: приключенческий дух / ощущение приятного оживления / общего порыва. Почему бы не использовать видео организаторам праздников, приемов, в тур. / гостиничном бизнесе с B&B (размещение + кейтеринг) и сферах деятельности, где присутствует пункт назначения.

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

на сайт

Интро задает сюжетную линию – низкий полет над красивыми пейзажами с эпизодами отдыха / единения с природой. Напоминает «Алису в стране чудес». Выберите тип отдыха и заряжайтесь видео-позитивом далее…


Пример #4: Разнообразные заведения (рестораны, гостиницы, музеи, магазины)
Vandal это ресторан в Нью-Йорке:

на сайт

Шикарный интерьер в видеобэкграунде соблазняет посетить заведение


Хотя это лишь видеобэкграунд шаблона от Wix, само видео сделано очень качественно:

на сайт

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


Пример #5: Видео-сторителлинг (покажите краткую историю, заставляющую улыбнуться)

Задача сторителлинга в видео: заинтересовать историей с «живыми» героями, вызвав симпатию у целевой аудитории. Зажигательная история с эпатажным героем нашего времени, вот что берет за душу и запоминается. «Расскажите» веселую / трогательную / не лишенную обаяния историю (прием, применяют крупные бренды).

Креативно-рекламное агентство специализируется на создании визуального контента:

на сайт

Видеосторителлинг в интро на главной: «удачно проведенный день» с запоминающимся персонажем


Это лишь малая часть потенциала видео в качестве фона сайта. Еще применение:

  • СПА салоны – можно создать атмосферу роскоши, безмятежности и релаксации сняв клип с лицами счастливых клиентов в эпизодах
  • Отели / B&B / сдача внаем на каникулы и отпуска – покажите апартаменты для отдыха со всеми удобствами, близлежащие сервис-услуги, делая акцент на воодушевлении и страсти к приключениям
  • Бизнес / Продукция – можно усилить бренд, выразив в видео-фоне сущность продукта. Реализуя спорт-товары, показать процесс занятий с ними – это вдохновит желающих так проводить время / получить подобные результаты. Продолжите список сами…
  • Landing page (лэндинг пейдж) – фоновое видео будет способствовать получению мотивированного трафика на страницу захвата

Важно: не выбирайте видео-бэкграунд, лишь по критериям красоты видеофрагментов. Он должен быть релевантным сайту и бизнесу в целом. Конечно, приятное видео сделает сайт для кого-то интереснее. Правильно же подобранное (для вашей сферы / бизнес-продукта) – станет мощным маркетинговым и брендинг инструментом. Теперь можно посмотреть на свой сайт, представив как воплотить фоновое видео, чтобы вывести дизайн и брендинг на новый уровень.


Часть 2: Когда НЕ следует использовать видео-бэкграунд на своем сайте?                


Даже интересная видео-презентация, где все по делу, может оказаться ошибочным решением. Когда требуется сфокусировать внимание на очень специфичном, слишком «агрессивное» видео в фоне будет перетягивать на себя внимание. Вот почему лучше не использовать фоновое видео на сайте с комплексом услуг или продуктов, нуждающихся в пояснении для их восприятия аудиторией. Как и любой инструмент маркетинга, видео-бэкграунд должен служить лучшему опыту пользователя (UX). А UX-дизайн предполагает последовательное, согласованное и не терпит противоречий.

Проведите UX-анализ сайта и своего бизнеса и не преследуйте цель, не улучшающую опыт пользователей.


Часть 3: Пять золотых правил для фоновых видео

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


Правило #1: Используйте видео фоны с определенной целью

Нацеленное на достижение результата видео-решение, должно укрепить бренд или идею сайта. Например, бухгалтеру не стоит демонстрировать пейзажи швейцарских Альп. При всей красоте, они не имеют отношения ни к нему, ни к финансовой отрасли. Неуместная картина сбивает с толку – что тут предлагают: «Походное снаряжение?», а может «Спец. программу отпуска в Швейцарии?».

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

Отечественный пример продающего фонового видео – главная страница сайта ресторана:

на сайт

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


Развлекательная  компания оформила главную в стиле материального дизайна с несколькими видео в фоне:

на сайт

Подмигивающий логотип, сменяющиеся по секциям видеобэкграунды тонированные разными цветами и полупрозрачный контентный блок с забавными рисунками / CTA-элементами


Правило #2: Возможности видеоискусства велики, но не позволяйте фону затмить все

Фоновая видеопрезентация бизнеса не должна ухудшить заметность контента поверх, что будет признаком плохого UI/UX. Позаботьтесь о необходимом контрасте, читабельности призывов и различимости навигационных элементов.

Как достичь нужного эффекта?


Вариант первый: подобрать контрастный цвет для контента

Убедитесь в достаточной контрастности текста / кнопок / иконок. Белый логотип и типографика заметней на темном видео, при светлом бэкграунде контрастный цвет не позволит контенту сливаться с фоном.

Контурные элементы дают отличный контраст (пример buddhatobuddha.com).

Вариант второй: осветлить или затемнить видеоматериал 

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

Пример затемнения — union.co

Пример осветления — cobblehilldigital.com

 

 

 

 

 


Вариант третий: цветокоррекция с тонированием в контрастные цвета  

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

на сайт


Вариант четвертый: наложение текстуры на оригинальное видео и др. эффекты

Наложение эффектов практикуется в видеорекламе. Можно применить их для оформления фонового видео на сайте. Инструменты видеомонтажа и обработки видео тут.

Сайт российской студии производства фильмов:

на сайт

Для фоновых изображений и видео применяется наложение сетчатой текстуры. Похожий пример: drygital.com


Правило #3: Создайте короткий закольцованный ролик (бесконечное видео)

Главная забота использующего видео-форматы — скорость открытия веб-страницы. Но посетитель и не ожидает увидеть «кинокартину». Видео для фона сайта правильнее будет сделать привлекательным сниппетом, «выдержкой» из вашего видеоматериала. Вывод один: чтобы не понизили в ранжировании, уменьшать вес видеофайла. Зациклите видео, создав иллюзию непрерывного показа своего тематичного клипа.

В идеале, длительность фонового ролика 5-10 сек., при размере в 6MB и менее… как у Bukwild:

на сайт

Быстрая загрузка страниц сайта с видео-фонами разной длительности (до 20-30 сек.)


Вариант с черно-белым видеобэкграундом:

на сайт

Градации серого цвета уменьшили вес видеофайла для фона главной страницы


Видеомонтажные сервисы и программы-видеоредакторы помогут с творческой обработкой вашего материала

Создать микс, закольцевать видеоролик можно по разумным ценам и бесплатно: fiverr.com, coub.com, movavi.ru.


Правило #4: Уберите звук 

Автозапуск видео со звуком при загрузке относят к особо раздражающим факторам. Удалите звук из видеозаписи на Fiverr.com. Или приглушите. Хуже всего звучание взрывного характера, как у брендингового агентства gooqx.com (включение музыки с задержкой, прокрутка плавно отключает звучание  выглядит как поощрение просмотра портфолио). Обычно озвучка вообще неуместна, если только это не специфичный проект как bushrenz.com (тут спасает опция – выключить).

на сайт

Полная версия видеоролика озвучена, но запускается по желанию пользователя


Правило #5: Воспроизводите видео фоном (без управления)

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

Вопрос решается парой кнопок, переключающих на другой видеоформат:

на сайт

В создании клипа использовалась ускоренная / замедленная съемка


Еще пример с крутыми видеороликами на страницах видео-сайта:

на сайт

Медиаконтент доминирует на всех страницах. Контрастная контурная кнопка на главной с эффектной Hover заливкой (запускает ролик с управлением и звуком)


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

Сначала у вас проблема: где взять видеоматериал для сайта? См. правило #1, чтобы выбранное видео, информировало (кратко о ваших ценностях) / побуждало воспользоваться уникальным предложением / укрепляло бренд.

Лучше всего индивидуальные решения. В наше время даже iPhone позволяет справиться с задачей. Помните, что видео не обязательно должно быть идеальным? Особенно, созданное под затемнение / осветление или тонирование цветом. Еще варианты:

  1. Заказать у фрилансеров
  2. Стоковые видеоролики различной тематики (платные и бесплатные). Они вполне подходят для создания на сайте специфичной атмосферы

Часто платное и бесплатное стоковое видео различается лишь по техническому качеству и возможностям выбора (полезны оба источника):

  • VideoHive: доступные цены: от $5 до $35. Хорошие шансы найти то, что нужно
  • Free Video Sources: Ресурсы с бесплатными видео: 25 сайтов-источников видеоконтента для сайта бесплатно. Отличный вариант для старта

Несколько красивых примеров видео на фоне


Сайт студии производства видеоматериалов эффектным клипом захватывает внимание посетителей:

на сайт

В стиле моушн: пример креативной видеосъемки и наложения эффектов


Разработчик медиа-контента Tongal производит рекламные ролики и видео для брендов:

на сайт

Видеопиар & яркий Flat. Использована видеография с наложением кратких промо-заголовков из текстового слайдшоу. Смелое сочетание сочных цветов – такие пары цветовых комбинаций подбирались скоморохам. Мультяшные шрифты очень кстати


Продающий сайт (мультибренд) на главной применяет фонового видео с видеографией:

на сайт

Утонченный, элегантно оформленный HTML5 сайт с необычной навигацией, интерактивом и прекрасными видео-бэкграундами


Креативный сайт цифрового агентства из Бельгии применяет плоское видео в фоне:

на сайт

Для сайта и ранее использовался плоский стиль, но после редизайна клиентов решили привлечь главным экраном с привлекательным продающим Flat видео


В завершение


Во всей массе медиа-информации (да и всего контента) главенствует видео – показывая свою эффективность в самых различных нишах интернет рынка. Результаты успешных видео-маркетинговых стратегий впечатляют! Эмоциональный видеоролик – это также отличный способ поразить клиентов. Поскольку реакция разных людей на различный видеоконтент отличается, необходимо тестировать. Проверьте на своей аудитории несколько вариантов и такой тоже: фоновое видео Vs. обычное изображение для бэкграунда сайта. Но при правильных подходах, от воспроизводимого в фоне видео можно получить немало преимуществ перед конкурентами.

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

Видео фон для сайта на WordPress с помощью плагиновПривет, уважаемые читатели!

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

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

Содержание:

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

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

Бесплатное видео в фон сайта

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

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

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

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

Video Background

Background Video: WordPress плагин

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

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

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

Плагин Video Background: расширенные настройки

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

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

mb.YTPlayer for background videos

Youtube видео фон на сайт: плагин WordPress

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

Видеофон на сайт: плагин mb.YTPlayer for background videos

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

применение видео в качестве фонов

$(function() {

// определение IE

function iedetect(v) {

 

    var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');

return r.test(navigator.userAgent);

}

 

// Для мобильных экранов просто покажите изображение под названием 'poster.jpg'. Мобильные

// экраны не поддерживают автопроигрывание видео, или для IE.

if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {

(adjSize = function() { // Создайте функцию с названием adjSize

$width = $(window).width(); // Ширина экрана

$height = $(window).height(); // Высота экрана

// Соответственно масштабируйте изображение

$('#container').css({

'background-image' : 'url(poster.jpg)',

'background-size' : 'cover',

'width' : $width+'px',

'height' : $height+'px'

});

// Скройте видео

$('video').hide();

})(); // Немедленно запустите

// Запустите также масштабирование

$(window).resize(adjSize);

}

else {

 

// Подождите, пока загрузятся метаданные видео

$('#container video').on('loadedmetadata', function() {

var $width, $height, // Ширина и высота экрана

$vidwidth = this.videoWidth, // Ширина видео (настоящая)

$vidheight = this.videoHeight, // Высота видео (настоящая)

$aspectRatio = $vidwidth / $vidheight; // Соотношение высоты и ширины видео

(adjSize = function() { // Создайте функцию с названием adjSize

$width = $(window).width(); // Ширина экрана

$height = $(window).height(); // Высота экрана

$boxRatio = $width / $height; // Соотношение экрана

$adjRatio = $aspectRatio / $boxRatio; // Соотношение видео, разделенное на размер экрана

// Установите контейнер на ширину и высоту экрана

$('#container').css({'width' : $width+'px', 'height' : $height+'px'});

if($boxRatio < $aspectRatio) { // Если соотношение экрана меньше соотношения размеров...

// Установите ширину видео на размер экрана, умноженный на $adjRatio

$vid = $('#container video').css({'width' : $width*$adjRatio+'px'});

} else {

// Еще раз установите видео на ширину экрана/контейнера

$vid = $('#container video').css({'width' : $width+'px'});

}

})(); // Немедленно запустите функцию

// Запустите функцию также при изменении размера окна.

$(window).resize(adjSize);

});

}

});

Бесплатные видеофоны для сайта | MnogoBlog

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

1. “pixabay.com/en/videos/suspension-bridge-traffic-street-6408/”

Скачать видеофон можно – здесь.

2. “videos.pexels.com/videos/beach-aerial-footage-taken-by-a-drone-854218”

3. “pixabay.com/en/videos/chairlift-drive-mountains-landscape-11237/”

Скачать видеофон можно – здесь.

4. “pixabay.com/en/videos/cruise-ship-cruises-harbour-ship-3713/”

Скачать видеофон можно – здесь.

5. “pixabay.com/en/videos/shopping-pedestrian-time-lapse-city-2121/”

6. “pixabay.com/en/videos/mercedes-glk-car-test-offroad-suv-1406/”

7. “pixabay.com/en/videos/ferris-wheel-fair-night-2122/”

8. “pixabay.com/en/videos/conference-room-furniture-modern-1191/”

9. “pixabay.com/en/videos/fish-small-aquarium-small-fish-16166/”

Скачать видеофон можно – здесь.

10. “pixabay.com/en/videos/aircraft-start-take-off-airbus-3473/”

11. “pixabay.com/en/videos/escalator-stairs-modern-staircase-3611/”

12. “pixabay.com/en/videos/run-marathon-zurich-race-sport-15748/”

13. “pixabay.com/en/videos/racing-bike-sports-bike-race-7251/”

14. “pixabay.com/en/videos/mykonos-aerial-view-sea-ocean-1282/”

15. “pixabay.com/en/videos/science-fiction-overhead-display-6421/”

16. “pixabay.com/en/videos/laptop-keyboard-typing-writing-3145/”

17. “pixabay.com/en/videos/time-lapse-cologne-dom-rhine-river-8820/”

18. “videos.pexels.com/videos/people-on-a-meeting-852264”

19. “pixabay.com/en/videos/rays-stingray-fish-underwater-16165/”

Скачать видеофон можно – здесь.

 

20. “pixabay.com/en/videos/montreal-cityscape-aerial-view-city-3149/”

21. “pixabay.com/en/videos/k2-himalaya-gloves-crampons-1408/”

22. “pixabay.com/en/videos/fireworks-sparkles-night-694/”

23. “pixabay.com/en/videos/fair-year-market-folk-festival-3834/”

24. “videezy.com/random-objects/15229-stop-motion-pinwheels-on-blue-background”

25. “pixabay.com/en/videos/aflame-alight-background-banner-4933/”

26. “videezy.com/random-objects/13947-stop-motion-of-paper-boat-in-4k”

На этом всё, красивых Вам сайтов!

20 сайтов с видео на фоне

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

 

 


marqana.com 


pocketsquaredesign.net 


cofamedia.com 


ayty.com.br 


hublot.com 


maecia.com 


dreamandreach.bose.com 


rustvalleydesign.co 


manuelamisani.com


pixate.com 


thisistheplace.tv


thechedi-andermatt.com 


haveanicedayonline.nl 


5dingen.org 


drygital.com 


demodern.com 


theventure.com


nuvola-verde.com


spacejunk.com 

Автор подборки — Дежурка

Смотрите также:

  • Потрясающие пейзажи в веб-дизайне
  • Красота природы в веб-дизайне
  • Космический веб-дизайн

Видео с ютуба в качестве фона сайта

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

Спонсор данного материала habib который внёс 100р за данный скрипт за что ему отдельное СПАСИБО!

Вобщем больше мне сказать о данном материале нечего я думаю всё и так понятно давайте приступим к установке

Установка

Качаем архив и загружаем в папку js его содержимое
затем добавим на нужной страницы перед /head скрипт ниже

Код


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>


Это библиотека jquery и если она у вас подключена то пропустите этот шаг

Теперь подключим сами скрипты на той же странице перед закрывающим тегом /body

Код


<script type="text/javascript" charset="utf-8" src="/js/jquery.tubular.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/index.js"></script>

Теперь нам нужно весь контент в области body заключить в тег div с: для этого мы вставим после тега body следующий код

Код


<div>


а перед тегом /body вставим закрывающий тег нашего дива

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

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

вставляем их вместо тех что в скрипте и сохраняем естественно если вы редактировали скрипт не через ФМ то вам нужно перезолить скрипт с новыми данными на свой сайт

P.s. если есть у кого то желание отблагодарить как сделал это habib данные моих кошельков есть в профиле

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *