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

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

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

Итак примеры:

eagleadventuretours.de

webuildrail.com

daarnhouwer.com

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

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

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

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

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

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

smartlanding.biz

HTML

Главной основой такого фона, является тег video, который появился в HTML5. Его можно расположить перед закрывающим тегом body.

Обратите внимание на атрибуты тега video:

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

loop — начинает повторное воспроизведение видео после его окончания.

<video id="video_bg" autoplay="autoplay" loop="loop">
 	<source src="video/background.mp4" type="video/mp4"></source>
 	<source src="video/background.webm" type="video/webm"></source>
 </video>
   

  
 

И также обратите внимание на формат видео, если вы хотите добиться воспроизведения видеофона в большинстве браузеров, то ваш ролик должен быть как минимум в двух форматах в MP4 и WebM.

Важно: при конвертации видео в формат MP4, обязательно выберите видео кодек H.264, иначе ваше видео не будет воспроизводиться в браузере IE.

CSS

Чтобы наше видео стало именно фоном, то для него необходимо задать ряд CSS свойств.

body { 	/* Задаем фон для нашей страницы в виде обычного изображения.  Это нужно на случай, есть браузер не смог воспроизвести видео из-за того,  что он не поддерживает тег video. */ 	background: fixed url(images/video_bg.jpg) no-repeat; 	background-size: cover; } #video_bg { 	/* Делаем так, чтобы видеофон занимал фиксированное положение. */ 	position: fixed; 	top: 0; 	left: 0; 	/* Располагаем наш фон под всем содержимым на странице.  Для этого используем отрицательный z-index. */ 	z-index: -1000; 	/* Растягиваем видео так, чтобы не было видно черных полос и 	чтобы независимо от разрешения экрана видеофон занимал все рабочее пространство. */ 	min-width: 100%; 	min-height: 100%; 	width: auto; 	height: auto; }   

 

Центрирование видеофона

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

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

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

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

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

@media (min-aspect-ratio: 16/9) { 	#video_bg { 		height: 300%; 		top: -100%; 	} } @media (max-aspect-ratio: 16/9) { 	#video_bg { 		width: 300%; 		left: -100%; 	} } @supports (object-fit: cover) { 	#video_bg { 		top: 0; 		left: 0; 		width: 100%; 		height: 100%; 		object-fit: cover; 	} }   

 

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

webcareer.ru

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

1 HTML структура

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

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

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

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

2 CSS стили

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

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

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

На этом всё!

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

Рекомендую следующие видеостоки:

• Coverr.co
• Mazwai.com
• PEXELSvideos
• Videvo.net

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

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

Вывод

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

www.sitehere.ru

1. Форматы видео

Как известно, браузеры разделились на 2 лагеря — те, которые поддерживают H.264, и те, которые выступают за открытые форматы вроде OGG/Theora и WebM. Соответственно, нужно хотябы 2 версии видео. В итоге я сделал видео в H.264 и видео в WebM. 

H.264 поддерживают на данный момент:

WebM поддерживают:

Что интересно, Firefox поддерживает H.264, но не под Mac OS X. В общем, 2 версии видео, обе указываем как src — и охватили все современные браузеры.

2. HTML и CSS

Код видео:

 

 <div id="trailer" class="is_overlay">
	<video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
		<source src="book.mp4"></source>
		<source src="book.webm" type="video/webm"></source>
	</video>
</div>

И CSS:

.is_overlay{ display: block; width: 100%; height: 100%; }
#trailer {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}
#trailer > video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Собственно, этим кодом всё и сказано — div #trailer растягиваем на весь экран, внутри него наше видео, у него аттрибут autoplay, значит оно стартует сразу, как браузер решит, что уже можно начать играть, т.к. стоит preload="auto".

Получаем такую картинку:

Видим чёрные полосы по краям. Можно ещё для #trailer > video поменять CSS, чтобы их не было:

min-width: 100%; 
min-height: 100%;
width: auto; height: auto;   

 

Тогда мы получим видео на всю ширину:

Всё хорошо… Пока мы не изменим размер окна. Внезапно:

Тут нам на помощь приходят CSS Media Queries для управления пропорциями. Убираем добавленный на предыдущем шаге CSS-код и добавляем:

 @media (min-aspect-ratio: 16/9) {
     #trailer > video { height: 300%; top: -100%; }
 }
 @media (max-aspect-ratio: 16/9) {
     #trailer > video { width: 300%; left: -100%; }
 }
 /* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */
 @supports (object-fit: cover) {
     #trailer > video {
         top: 0; left: 0;
         width: 100%; height: 100%;
         object-fit: cover;
     }
 }  

 

 

Это позволяет нам при разных размерах размерах окна/экрана центровать видео.

Ну вот, красота. Теперь главную часть, текст, увидят все.

arm1.ru

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

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

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

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

<div id="nubexDiv" class="overlay">   <video id="nubexVideo" width="100%" height="auto" 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 id="nubexDiv" class="overlay">   	 <video id="nubexVideo" width="100%" height="auto" 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 растягиваем его на весь экран.

nubex.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

spark.ru

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

Это «просто тренд»?

Мне не кажется, что видео это тенденция, а вот видео на весь экран на домашней странице с белым текстом поверх него – вот это тренд. Ни то, чтобы это было плохо. Вместо слова тренд можно произносить «быть в моде», а люди склонны доверять модным направлениям.

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

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

Сочетается ли фоновое видео с моим брендом, планами и будущим видением сайта?

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

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

Видео со временем будет все более обыденным

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

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

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

Всегда ли нужен автозапуск видео?

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

Без звука

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

Производительность

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

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

Может, стоит загружать видео после загрузки страницы? Воспользоваться техникой Mustard cut? Или может, просто показать хороший постер вместо видео? А может, можно сделать вот так…

Вы знаете еще какие-нибудь трюки? Встроить код напрямую в HTML? Экстремальное сжатие файла, или может, стриминг видео? Ограничить цветовую гамму до черно-белой? Наложить статичный шаблон (точки/линии), чтобы спрятать низкое качество необычным способом? Размытие?

Бюджет

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

Нужны ли сторонние сервисы?

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

Будете ли вы измерять степень успеха?

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

webformyself.com

Karina | 16.04.2015

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

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

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

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

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

1. HTML

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

  <div id="video-bg">   <video width="100%" height="auto" preload="auto" autoplay="autoplay"   loop="loop" poster="bg/daisy-stock-poster.jpg">   <source src="bg/daisy-stock-h264-video.mp4" type="video/mp4"></source>   <source src="bg/daisy-stock-webm-video.webm" type="video/webm"></source>   </video>  </div>  

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

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

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

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.

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

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

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

idg.net.ua