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


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

От автора: моя статья о том, как с помощью CSS поставить в качестве фона на страницу полноэкранное HTML5 видео оказалась одной из самых популярных на сайте The New Code. Однако в этом методе есть значительный недостаток – пользователям приходится размещать ролики на своих ресурсах или искать сервисы для этого.

В качестве альтернативы можно использовать YouTube видео как фон для сайта, но на протяжении долгого времени я думал, что ролики данного сервиса нельзя толком контролировать: дело не только в том, что iframe плохо контролируется и стилизуется, но и другие решения типа tubular работают на JavaScript. Очень часто подключен какой-либо фреймворк типа JQuery, помогающий браузеру правильно позиционировать и проигрывать видео, повторно вычислять размер видео после изменения размера окна браузера. Я не считал и не считаю такие подходы элегантными и эффективными.


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

Разметка

Наш способ является производным от метода Florent Verschelde для полноэкранного видео на странице в качестве фона:

В разметке для видео есть два div, внутри которых iframe. Этот код идет первым на странице. Если вы хотите пройти валидацию HTML страницы, замените знаки & в адресе на &. Далее идет еще один DIV со всем контентом страницы:

Необходимо слегка объяснить URL в iframe. Начинается он так же, как и стандартный код для вставки, но имеет ряд дополнений: https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&start=0

В порядке использования идут параметры:

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

Стили для разметки:

Данный код растягивает видео на всю страницу, эквивалент background-size: cover для iframe. А pointer-events: none делает так, чтобы при правом клике мыши не показывалось контекстное меню YouTube. Осталось немного дополнить CSS медиа запросами для соотношения сторон:


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

Условия YouTube

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

Но мы не нарушаем права и можем противопоставить этому несколько аргументов:

Но как всегда решение использовать данный код и ответственность зависит от вас.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

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

webformyself.com

Настройка

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

  • Длительность видео должна составлять 15-30 секунд.
  • Оно должно быть настроено на автовоспроизведение (autoplay).
  • Громкость должна стоять на нуле.
  • Убедитесь, что заголовок и прочий текст читабельны на фоне видео.
  • Сообщение, которое несет в себе видео, должно быть ясным и четко сформулированным.

HTML

Наш шаблон будет состоять из трех секций:

  • Big-background — фоновое видео
  • About-section — «о нас»
  • Small-background-section — «поделиться»
<section class="big-background">  //Big Background Content here </section>  <div class="wrapper"> <section class="about-section">  //About Section Content here </section> <section class="small-background-section">  //Small Background Section Content here </section>  </div> 

Теперь необходимо наполнить каждую секцию содержимым. В секции big-background и small-background-section, поместите класс pattern, чтобы создать легкую текстуру на нашем видео. Также нужно добавить h1, h2, параграф и кнопку.

 <section class="big-background">  <a id="bgndVideo" class="player" data-property="{videoURL:'http://www.youtube.com/watch?v=PKGjG_ZhF-A',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>   <div class="pattern"></div>   <div class="big-background-container">  <h1 class="big-background-title">YOUTUBE</h1>  <div class="divider"></div>  <h1 id="colorize">ВИ.  

а задний план вашего сайта? <br/>Это проще простого! С помощью jQuery MB.YTPlayer, плагина jQuery, вы можете вставлять любое видео с YouTube на фон сайта.<br/> Вы с легкостью сможете превратить любое видео в HTML фон. Никаких задержек в загрузке страницы и нагрузки на сервера!</p> <a href="https://github.com/pupunzi/jquery.mb.YTPlayer" target="_blank" class="about-section-btn">Скачать плагин сейчас</a> </div> </section> <section class="small-background-section"> <div class="pattern"></div> <div class="small-background-container"> <h2 class="small-background-title"><span>Мы с социальных сетях</span></h2> <ul class="socials"> <li><a href="https://www.facebook.com/designmodo" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></li> <li><a href="https://twitter.com/Designmodo" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></li> <li><a href="https://plus.google.com/+Designmodo" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></li> </ul> </div> </section>

Я использовал шрифт Font Awesome для социальных иконок, которые располагаются в секции small-background-section. Затем мы добавим шаблон для нашего видео, используя плагин jQuery.mb.YTPlayer. Поместите следующий код сразу же за <section class=«big-background»>.

<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=0WhoCe_2jpc’, containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a> 

Вот, что мы использовали для настройки видео:

  • class player – этот класс используется плагином mb.YTPlayer
  • videoURL – ссылка на видео
  • containment – селектор CSS, в котором нужно воспроизвести видео
  • autoPlay – авто-воспроизведение видео
  • mute – наличие звука
  • startAt – время, с которого нужно начать воспроизведение видео
  • opacity – прозрачность видео

CSS

Добавим стили к нашему сайту. Прежде всего определим внешний вид html, body, тегов параграфов и маркированного списка.

html {  height:100% }  body {  font:15px/23px 'Raleway',sans-serif;  margin:0;  padding:0;  height:100%;  width:100%;  -webkit-font-smoothing:antialiased;  -webkit-text-size-adjust:100% }  p {  font-size:20px;  line-height:140%;  text-align:center }  ul li {  display:inline-block;  list-style:none;  padding-right: 10px; } 

Далее добавим стиль к wrapper, pattern, divider и colorize.

.wrapper {  z-index:600;  position:relative }  .pattern {  background-image:url(../images/pattern.png);  background-repeat: repeat;  background-attachment:scroll;  width:100%;  height:100%;  position:absolute;  top:0;  left:0 }  .divider {  background-image:url(../images/divider.png);  display:block;  width:300px;  height:35px;  margin:10px auto }  #colorize {  color:#f1c40f;  font-family:'Lato',sans-serif;  font-size:40px } 

Настало время стилей секции big-background. Установим z-index на 550 и параметр overflow на hidden. Это необходимо для того, чтобы контент YouTube (субтитры, аннотации) не отображались на нашем сайте. Остальные стили нужны для заголовков, кнопок и изображения по умолчанию (об этом чуть позже).

 

.big-background { z-index:550; text-align:center; height:100%; min-height:100%; position:relative; overflow:hidden } .big-background .big-background-container { width:830px; max-width:100%; display:inline-block; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .big-background-title { font-family:'Raleway',sans-serif; font-size:78px; color:#fff; font-weight:300; text-transform:uppercase; text-align:center; margin-bottom:22px; padding-top:20px; display:inline-block; background-attachment:scroll; background-repeat:repeat-x; background-position:top center } a.big-background-btn { font-family:'Lato',sans-serif; font-size:13px; text-transform:uppercase; text-decoration:none; color:#fff; background:transparent; border:2px solid #fff; padding:10px 14px; cursor:pointer; letter-spacing:2px; text-align:center; display:inline-block; -webkit-transition:.4s background ease; -moz-transition:.4s background ease; -o-transition:.4s background ease; transition:.4s background ease; } .big-background-btn:hover { color:#fff; background:rgba(255,255,255,0.20) } .big-background-default-image { background:url(../images/sunset.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover; width:100%; height:100%; z-index:0; backface-visibility:hidden }

Теперь перейдем к секции about-section. Настроим параметр background-color на white и padding на 60px сверху и снизу и 20px слева и справа.

.about-section {  font-family:'Lato',sans-serif;  color:#7f8c8d;  background:#fff;  padding:60px 20px }  .about-section-container {  text-align:center;  padding-bottom:50px }  .about-section-title {  font-family:'Raleway',sans-serif;  font-size:40px;  background:#fff;  color:#3d566e;  padding:0 35px;  margin-bottom:22px;  background-attachment:scroll;  background-repeat:repeat-x;  background-position:center center;  text-transform:uppercase }  a.about-section-btn {  font-family:'Lato',sans-serif;  font-size:13px;  text-transform:uppercase;  text-decoration:none;  color:#34495e;  background:transparent;  border:2px solid #34495e;  padding:10px 14px;  cursor:pointer;  letter-spacing:2px;  text-align:center;  display:inline-block;  -webkit-transition:.4s background ease;  -moz-transition:.4s background ease;  -o-transition:.4s background ease;  transition:.4s background ease; }  .about-section-btn:hover {  color:#fff;  background: #34495e; } 

Для секции small-background-section, которая также служит подвалом, мы назначим ширину 100% и параметр overflow на hidden. Мы также добавим немного padding сверху и снизу для того, чтобы было видно наше видео. И наконец добавим стили для кнопок социальных сетей.

 

.small-background-section { font-family:'Raleway',sans-serif; padding:100px 0; position:relative; width:100%; overflow:hidden } .small-background-container { position:relative; text-align:center } .small-background-title { font-size:40px; color:#f1c40f; font-weight:300; z-index:10; display:inline-block; text-transform:uppercase; margin-bottom:20px; margin-top: 20px; position:relative; background-attachment:scroll; background-repeat:repeat-x; background-position:top center } .socials a { color:#fff } .socials a:hover { color:#bdc3c7 }

Media queries

Для того, чтобы наш сайт был адаптивным, добавим немного media queries.

@media screen and (max-width: 768px) { .about-section-title {  line-height:1 } }  @media screen and (max-width: 480px) { .big-background-title {  font-size:58px }  .small-background-title {  line-height:1 }  /*.player{ display: none;} -> If you want to remove the video bg on a specific viewport w/o plugin*/ }  @media screen and (max-width: 360px) { .big-background-title,#colorize {  line-height:1 } }  @media screen and (max-width: 320px) { .small-background-title {  font-size:30px } } 

jQuery

Теперь включим наше YouTube видео. Вызовем класс player внутри кода jQuery. Поместите следующий код перед закрывающимся тегом body и внутрь тегов <script> </script>.

 $(function(){  $(".player").mb_YTPlayer();  });   

Запасной вариант

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

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

Ручное решение

Чтобы определить, что пользователь зашел с мобильного устройства или планшета, мы можем спрятать элемент на определенном размере экрана. Например, мы хотим убрать видео-фон на экранах шириной 480px. Нужно просто добавить display: none к элементу player:

@media screen and (max-width: 480px) { .player{ display: none; } } 

Что касается jQuery, здесь мы установим переменную is_mobile с параметром false. Затем убедимся, что класс player обладает параметрм display: none. Если это так, то добавим класс big-background-default-image к секциям big-background и small-background-section для использования фонового изображения по умолчанию. В обратном случае ничего не изменится.

(function($) {  $(document).ready(function() {  var is_mobile = false;   if( $('.player').css('display')=='none') {  is_mobile = true;  }  if (is_mobile == true) {  //Conditional script here  $('.big-background, .small-background-section').addClass('big-background-default-image');  }else{  $(".player").mb_YTPlayer();  }  });  })(jQuery); 

Решение с помощью плагина jQuery

Другой способ установки изображения по умолчанию осуществляется с помощью jQuery плагина device.js (http://matthewhudson.me/projects/device.js/). Это упростит процесс описания условий под различные размеры экранов мобильных устройств. Используя этот плагин, мы можем просто прописать следующий код:

(function($) {  $(document).ready(function() {  //Device.js will check if it is Tablet or Mobile - http://matthewhudson.me/projects/device.js/  if (!device.tablet() && !device.mobile()) {  $(".player").mb_YTPlayer();  } else {  //jQuery will add the default background to the preferred class  $('.big-background, .small-background-section').addClass(  'big-background-default-image');  }  });  })(jQuery); 

Здесь я использовал методы device.mobile() и device.tablet() для проверки устройства, с которого зашел пользователь. Если условие выполняется, что добавляется класс big-background-default-image к секции big-background и small-background-section. В противном случае класс player останется неизменным и видео будет воспроизводиться.

Приводим в порядок

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

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

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

habr.com

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

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

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

Создаем видеоплеер с помощью 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

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

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

 

 

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

 

Шаг 1. HTML

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

<div class="is_overlay"><video width="300" height="150" autoplay="autoplay" loop="loop" poster="/videos/bck.jpg">  <source src="/videos/WD0221.mp4.mp4" type="video/mp4">  <source src="/videos/WD0221.webmsd.webm" type="video/webm">  </video></div>

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

 

Шаг 2. CSS

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

  .box,.page {  position:fixed;  top:0;  left:0;  display: block;  width: 100%;  height: 100%;  overflow: hidden;  z-index:999;  background:rgba(15, 102, 99, 0.5);  color:white;  }  .is_overlay{  display: block;  width: 100%;  height: 110%;  }  .is_overlay video {  position: fixed; right: 0; bottom: 0;  min-width: 100%; min-height: 100%;  width: auto; height: auto; z-index: -100;  background: url(/videos/bck.jpg) no-repeat;  background-size: cover;  }

Вот и все. Готово!

s-sd.ru

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

b_558938647a0fb.jpg

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

b_5589381988c36.jpg

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

b_5589385a6ce7d.jpg

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

b_55893852e0824.jpg

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

  • 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


You May Also Like

About the Author: admind

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

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

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