Полноэкранный видео-фон для сайта HTML5

Karina | 16.04.2015

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

Демо Загрузить архив RAR (6.3 MB)

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

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

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

1. HTML

Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока <div> с идентификатором video-bg находится наш фон:

<div>
    <video preload="auto" autoplay="autoplay"
    loop="loop" poster="bg/daisy-stock-poster.jpg">
        <source src="bg/daisy-stock-h364-video.mp4" type="video/mp4"></source>
        <source src="bg/daisy-stock-webm-video.webm" type="video/webm"></source>
    </video>
</div>

Для тега

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

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

2. CSS

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

#video-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    background: url(bg/daisy-stock-poster.jpg) no-repeat #94a233;
    background-size: cover;
}

#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; 
}

 @supports (object-fit: cover) {
     #video-bg > video {
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

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

Также в коде есть директива

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

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

Делаем видео в качестве фона сайта с помощью HTML

В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (video background). Видео в качестве фона страницы можно сделать только с помощью HTML5. Для этого мы:

• Используем тег video на HTML-странице;
• С помощью CSS-стилей растянем видео на весь экран и используем в качестве основного фона.

Создаем видеоплеер с помощью HTML

О том, как сделать видеоплеер у себя на сайте с помощью HTML5 мы уже говорили в статье Проигрыватель видео HTML5. В той же статье мы обсуждали вопрос кроссбраузерности, вспомним основную идею:

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

Поэтому, создадим видео для фона сайта в двух форматах: H.264 и WebM. Этого будет достаточно, чтобы охватить основной ряд современных браузеров (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer).

<div>
 <video loop="loop" autoplay="autoplay" preload="auto">
   <source src="nubex.mp4"></source>
   <source src="nubex.webm" type="video/webm"></source>
 </video>
</div>

Благодаря атрибуту autoplay видео будет проигрываться сразу после загрузки страницы, когда решит браузер (поскольку атрибут preload стоит на значении auto).

Настраиваем стили с помощью CSS

Рассмотрим теперь CSS-код для видео.

Полный код страницы с установленным видео в качестве фона сайта:

<html>
 <head>
   <title>Видео в качестве фона сайта - Нубекс</title>
  <style>
	.overlay {width: 100%; height:100%; display:block;}
	#nubexDiv {
		top: 0; bottom: 0; left: 0; right: 0;
		position: fixed;
		overflow: hidden;
	}
	#nubexVideo {
		top: 0; left: 0;
		position: absolute;
		width: auto; height: auto;
		min-width: 100%; 
		min-height: 100%; 
	}
  </style>
 </head>
 <body>
	<div>
 	 <video loop="loop" autoplay="autoplay" preload="auto">
   		<source src="nubex.
  mp4"></source>
   		<source src="nubex.webm" type="video/webm"></source>
 	 </video>
	</div>
 </body>
</html>

Здесь мы, по-сути, добавляем блок с видео с помощью HTML, и с помощью CSS растягиваем его на весь экран.

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

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

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

Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся — и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и 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_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

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

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

10 рекомендаций по использованию фонового видео на сайте

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

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

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

Так как нам избежать ошибок и сделать все правильно? Легко, просто следуйте этим 10 советам.

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

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

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

Вам стоит использовать видео 720p с низкой частотой кадров (24-25 кадров в секунду) и протестировать несколько разных битрейтов от 750k до 1250k. Также есть несколько хаков, которые помогут скрыть низкое качество видео, но о них чуть позже.

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

Если вас не радует качество вашего видео, или же у видео, устраивающего вас качества, есть проблемы с плавностью, вам стоит попробовать добавить слой-наложение к видео, что поможет замаскировать его качество. Это легко делается путем добавления абсолютно спозиционированного div сразу после видео или с использованием псевдо-элемента ::after в контейнере видео.

Вам надо применить к этому элементу свойство CSS pointer-events: none;, чтобы он не препятствовал управлению проигрыванием видео.

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

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

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

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

Всегда ограничивайте длину вашего видео в рамках 30–40 секунд, а лучше еще более короткий момент, бесшовно закольцованный и выглядящий как длинное видео, но размером не больше 1–2 мегабайт. Немного рекламы: вы можете найти несколько неплохих закольцованных видео на BG Stock, этот видеосток я создал специально для использования видео в качестве фона на сайтах (впрочем, хватает и других видеостоков).

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

Ключевое слово в сочетании “фоновое видео” — “фоновое”. Видео играет вспомогательную роль по отношению к контенту сайта и мы должны обеспечить, чтобы оно не перетягивало внимание на себя. Фоновые видео должны быть ненавязчивыми и плавными, чтобы не отвлекать пользователей от того, для чего они пришли на сайт. А, значит, надо избегать быстрого или чрезмерного панорамирования, трясущейся/нестабилизированной съемки и внезапного обрыва видео.

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

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

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

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

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

И есть менее известное свойство object-fit, позволяющее проделывать тот же трюк с элементами DOM, что является отличным способом обеспечить заполнение нашим видео контейнера. К сожалению, поддержка в браузерах этого свойства пока недостаточна (привет, IE!), поэтому приходиться использовать полифилл или JavaScript для достижения такого поведения.

Самый простой вариант: jQuery плагин jQuery Background Video (написанный автором этой статьи — Энгусом Расселом), который берет все эти заботы на себя, а также делает несколько других полезных вещей. Это не единственный плагин jQuery для фонового видео.

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

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

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

Как вы это сделаете зависит от вас — вы можете спрятать видео на маленьких экранах с помощью медиа-запроса или удалив видео для всех устройств iOS/Android, после проверки пользовательского агента с JavaScript. Плагин jQuery Background Video делает это по умолчанию.

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

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

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

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

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

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

Мы можем легко добавить кнопку паузы с помощью JavaScript — а в jQuery Background Video эта кнопка добавляется по умолчанию и вам надо лишь определиться с ее размещением и стилями.

Предусмотрите затухание

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

Мы можем сделать это, добавив изображение в качестве фона для элемента, содержащего <video> и задав видео прозрачность 0 по умолчанию (1 при начале воспроизведения), а также добавив CSS-переход свойства прозрачности. Это тоже есть в плагине jQuery Background Video.

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

Полностью адаптируемый видео бэкграунд. Включая примеры с JS и CSS (Full Background)

Видео бекграунд – полностью адаптивный

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

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

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

Видео бекграунд основной пример (полностью адаптируется и ведет себя как свойство background-position:cover в CSS):

Блок для видео по умолчанию

Взять <video> элемент и сделать его перекрывающим область просмотра так же просто, как с любым элементом HTML, например, с фиксированной позицией:

#myvid {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

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

16: 9 источник видео в квадратном <video> элементе

Если вы привыкли к background-size свойству в CSS, вы знаете, что оно имеет значение «cover», которое дает именно тот эффект, которого мы пытаемся достичь здесь. Если бы мы могли использовать то же самое для изображений и видео контента при реализации задачи!

Ну, мы можем это сделать при помощи, object-fit! Увы, есть подвох.

Использование подгонки объекта

В браузерах, которые поддерживают object-fit свойство CSS, мы могли бы легко это исправить:

#myvid {
  
  object-fit: cover;
}

Эта object-fit функция была разработана для всех визуальных элементов мультимедиа, включая изображения и видео. Это позволяет сообщать браузерам, как они должны помещать один прямоугольник (источник мультимедиа) в другой прямоугольник (элемент мультимедиа). В частности, он имеет cover и contain значения, которые работают так же, как аналогичные значения background-size. Также есть object-position свойство, похожее на background-position другое, за исключением того, что по умолчанию все центрировано ( object-position: 50% 50%).

Итак, object-fit делает все , что мы хотим, но … он поддерживается только в последних версиях Chrome (см. Таблицу поддержки «Могу ли я использовать» ). Небольшая заметка о поддержке прошлого и будущего:

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

Как работает видеоцентрирование? Возможны две ситуации: видео может быть переполнено по вертикали, или переполнено по горизонтали (и поиск решения на то и другое, это просто пустая трата).

Картинка может помочь:

Проблемы при масштабировании – Серый фон для видео и красные черточки для окна просмотра

Если соотношение сторон окна просмотра больше, чем соотношение сторон видео, видео будет переполнено сверху и снизу (первый пример). Если соотношение сторон окна просмотра меньше, видео будет переполнено слева и справа.

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

#myvid {
  position: fixed;
  top: 0;
  left: 0;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    width: 100%;
    height: auto; 
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: auto; 
    height: 100%;
  }
}

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

Центрирующий трюк

Мы могли бы попытаться отцентрировать видео, используя отрицательные top (или margin-top) или left (или margin-left) значения, но получить правильное количество пикселей для смещения видео не так просто. Я на самом деле пытался использовать calc() и единицы просмотра, это работало в Firefox и терпело неудачу в Chrome и Safari, и в целом это выглядело действительно загадочно. Короче не хорошее решение!

Итак, как мы можем центрировать блок с видео, который шире или выше, чем область просмотра, если мы не знаем его точных размеров? Легко! Мы делаем контейнер с большим размером, который больше, чем видео, и больше, чем область просмотра.

Вот грубая идея на картинке:

Пунктирный контур по-прежнему является нашим окном просмотра, светлый прямоугольник – нашим видео, а темная область – нашим контейнером с большим размером. Затем мы можем использовать любую технику центрирования CSS по нашему выбору (скажем, Flexbox) для центрирования видео внутри контейнера.

Но угадайте, что работает как контейнер, который автоматически центрирует видео? Поэтому мы можем пропустить создание блока и использование техник центрирования CSS! Теперь нам просто нужно сделать наш элемент видео слишком высоким или слишком широким и позволить браузеру обрабатывать центрирование автоматически и по умолчанию (по сути блок

#myvid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    height: 300%; top: -100%;
    
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: 300%; left: -100%;
    
  }
}

Это будет хорошо работать. Но я бы также порекомендовал использовать контейнер

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

#SDStudio_VIDEO_BACKGROUND {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
#SDStudio_VIDEO_BACKGROUND > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  #SDStudio_VIDEO_BACKGROUND > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #SDStudio_VIDEO_BACKGROUND > video { width: 300%; left: -100%; }
}

@supports (object-fit: cover) {
  #SDStudio_VIDEO_BACKGROUND > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

И … Вот и все! Возможно, вы захотите посмотреть страницу примера и изменить размер окна вашего браузера во время воспроизведения видео.

Пример который будет предоставлен в конце данного пункта, это сырой пример с применением всего что я описал Выше, на основе которого создан видео бекгрунд (видео фон) моего основного сайта http://sdstudio.top/. С той разницей что идентификатор #SDStudio_VIDEO_BACKGROUND был применен к секции созданной при помощи конструктора страниц ELEMENTOR. Но для того что бы описать каким именно образом осуществить применение видео бэкграунда в ELEMENTOR’E я считаю правильным написать отдельный пост,и уже не сегодня…. Как не как третий час ночи :).

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

ПС. Отдельное спасибо автору данного поста: https://fvsch.com/video-background/

Источник записи:

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

Полноэкранный видео фон для сайта HTML5

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

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

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

В этом примере применяется видеоролик, у которого разрешение 1920×1080, а полное продолжительность установлено в 15 секунд, с хорошим весом в 3 МБ. Здесь нужно подчеркнуть, чем больше по времени и качественное видео, тем будет больше весить, а это понижает скорость запускание видео. Здесь внутри блока div с идентификатором video-bg находится заданный фон.

Код

<div>
  <video autoplay=»autoplay» loop=»loop» preload=»auto» poster=»http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/svetodsa.jpg»>
  <source src=»bg/daisy-stock-h364-video.mp4″ type=»video/mp4″>
  <source src=»bg/daisy-stock-webm-video.webm» type=»video/webm»>
  </video>

width – Отвечает за ширину области при воспроизведения видео;
height – Идет на высоту области;
preload – Связана с функцией загрузки видеоролика, что производится со страницей;
autoplay – Отвечает за автоматическое воспроизведение ролика;
loop – Это идет циклическое повторение ролика;
poster – Картинка или изображение, что отображается вместо видео, пока не запустилось видео;

2. CSS

Код

#videophone_formatugas > video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;  
  min-height: 100%;
  width: auto;
  height: auto;  
}

  @supports (object-fit: cover) {
  #videophone_formatugas > video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
  }

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

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

Демонстрация

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

Интересно, на что вы смотрите?

Готов поспорить, ваше внимание автоматически настраивается на фон видео, верно? Его практически невозможно игнорировать, так как это движется .

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

Нас легко отвлекает на все, что перемещает — точно так же, как эта собака, которая игнорирует все в своем мире, чтобы преследовать эту надоедливую белочку!

“ Хорошо, вы заставили меня посмотреть ваше глупое видео, какое это имеет отношение к дизайну моего веб-сайта? ”

Какой отличный вопрос, и я рад, что вы задали.

Видеофон на вашем веб-сайте при правильном использовании также может помочь вам привлечь внимание посетителей вашего веб-сайта!

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

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

Многие эксперты по конверсии веб-сайтов и обычные люди видят, что их посетители остаются на их веб-сайтах дольше и с большей вероятностью подпишутся или подпишутся на их предложениях продуктов / услуг.

138% улучшение конверсии при переключении на фоновое видео на домашней странице.

Источник: FoodBloggerPro

Признаюсь, улучшение на 138% кажется невероятным, и его сложно достичь через день.

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

Однако даже улучшение вовлеченности и конверсии на 10-20% не является необоснованным. даже для начинающих владельцев веб-сайтов без профессиональной помощи — , если вы правильно используете видео фон на своей домашней странице!

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

Подумайте, что увеличение числа подписчиков на 20% может сделать для вашего бизнеса? Это может означать больше продаж и / или более высокую узнаваемость бренда!

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

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

Как и все в жизни, есть правильный и неправильный способ делать что-либо.

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

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

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

1. Как правильно использовать видео фон?
2. Где найти видео для вашего сайта?
3. Как добавить видео фон на свой сайт?

Приступим….

Как использовать фоновое видео — правильный путь

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

Если вы так думаете, тогда удачи, потому что вам это понадобится.

Мы в WBE не верим в удачу.

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

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

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

Давайте рассмотрим несколько примеров:

Пример №1: компании, услуги, организации

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

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

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

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

Grain & Mortar — дизайнерское агентство. Этот пример интересен, потому что он показывает, что вам не всегда нужно иметь видео фон на всю страницу, чтобы получить аналогичные преимущества.Они отображают только видео в разделе заголовка страницы, занимающем не более половины площади экрана.

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

Пример № 2: Физические или цифровые продукты

Видео фоны также очень хорошо работают, если вы продаете товары.

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

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

По сути, вы уже успокаиваете их еще до того, как они прочитают сигнальное слово на вашем сайте!

  видео {
  объект подходит: крышка;
  ширина: 100ввт;
  высота: 100vh;
  положение: фиксированное;
  верх: 0;
  слева: 0;
}  

  <заголовок>
  

    Проводить исследования
    
 Монтана 
  
  

  .viewport-header {
  положение: относительное;
  высота: 100vh;
  выравнивание текста: центр;
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}