| 16.04.2015
На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.
Если вы твердо убеждены, что хотите установить видео для фона на сайте, необходимо знать кое-какие нюансы:
Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока с идентификатором video-bg находится наш фон:
Для тега указаны следующие атрибуты:
- width – ширина области для воспроизведения ролика;
- height – высота области;
- autoplay – автоматическое воспроизведение видео;
- loop – циклическое повторение видео;
- poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно.
Далее у нас записано два тега , где указаны 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.
Большие видео на заднем плане веб-сайтов - довольно популярный тренд в веб-дизайне. Умело примененные видео могут сделать веб-сайт более драматичным и привлекательным для пользователей.
Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.
Существуют компании, как, например, Powerhouse или Adidas , которые используют видео в качестве заднего плана сайта, чтобы донести до пользователя определенное сообщение или историю о продукте или услуге.
Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.
В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!
Скачать исходники
Демо
Вам понадобятся:
//Big Background Content here //About Section Content here //Small Background Section Content here
Теперь необходимо наполнить каждую секцию содержимым. В секции big-background и small-background-section, поместите класс pattern, чтобы создать легкую текстуру на нашем видео. Также нужно добавить h1, h2, параграф и кнопку.
YOUTUBE ВИДЕО НА ЗАДНЕМ ПЛАНЕ Хочу научиться этому Ставьте любое видео с YouTube на фон сайта
Хотите знать, как добавить видео на задний план вашего сайта?
Это проще простого! С помощью jQuery MB.YTPlayer, плагина jQuery, вы можете вставлять любое видео с YouTube на фон сайта.
Вы с легкостью сможете превратить любое видео в HTML фон. Никаких задержек в загрузке страницы и нагрузки на сервера!
Я использовал шрифт Font Awesome для социальных иконок, которые располагаются в секции small-background-section . Затем мы добавим шаблон для нашего видео, используя плагин jQuery.mb.YTPlayer . Поместите следующий код сразу же за .
Вот, что мы использовали для настройки видео:
- class player – этот класс используется плагином mb.YTPlayer
- videoURL – ссылка на видео
- containment – селектор CSS, в котором нужно воспроизвести видео
- autoPlay – авто-воспроизведение видео
- mute – наличие звука
- startAt – время, с которого нужно начать воспроизведение видео
- opacity – прозрачность видео
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 { 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 и внутрь тегов .$(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 останется неизменным и видео будет воспроизводиться.
Приводим в порядок Видео - это превосходный способ донести сообщение аудитории. Оно может стать мощным инструментом вашего сайта с учетом правильного использования.Я уверен, что по мере развития и совершенствования веб-дизайна, появятся все больше и больше креативных идей применения видео в дизайне веб-сайта. Я надеюсь, вы научились кое-чему в этом туториале. Пишите в комментариях ваши мысли и замечания.
От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!
Аналитика продаж
Интеграция с вашей АТС
Интеграция с сайтом
Подключение специальных виджетов избавит Вас от необходимости вручную переносить лиды и контакты в систему! Создавайте специальные формы на Вашем сайте. После заполнения их клиентом контакт или сделка будут автоматически попадать в систему amoCRM.
Приложение для iPhone или Android
В приложениях amoCRM для iPhone и Android есть возможность просматривать список клиентов, потенциальные сделки, список задач и ленту событий.
Удобный рабочий стол
amoCRM сама автоматически выводит все самые важные графики, а если каких-то данных не хватает в базовой поставке, вы всегда можете добавить неограниченное количество своих панелей-виджетов.
Расширения и виджеты
Сделайте работу с amoCRM привычной и комфортной! Создавайте свои собственные email-рассылки всего за два клика. Интегрируйте amoCRM с телефонией и экономьте время Ваших специалистов. Храните Ваши файлы в удобном облачном хранилище Dropbox.
База данных клиентов, компаний и сделок
Здесь собрана вся информация по каждому клиенту, активным переговорам, текущим контрактам и будущим продажам. Более того, в программе предусмотрен «умный» поиск, теги и фильтр. В каждой сделке есть лента событий, в которой хранятся все примечания, файлы предложений, здесь же можно ставить новые задачи. Вся история взаимодействий с клиентами находится в одном месте.
amoCRM помогает следить за тем, чтобы по каждой сделке было запланировано действие, и напоминает, если задача была просрочена или ничего не запланировано. Заходите в сделку, оставляете примечание и добавляете задачу. Задача выполнена? Просто зачеркните ее. Они находятся в специальной вкладке интерфейса. Вы не забыли позвонить Сергею? Позвонили? Прямо здесь отмечаем, что задача выполнена.
Полная интеграция с Вашей почтой
Подключите неограниченное количество любых ящиков, и ваша переписка автоматически отобразится в amoCRM. Мы автоматически создадим новые сделки на каждое новое письмо от клиента. Мы даже отследим скорость обработки поступающих запросов.
Аналитика продаж
В amoCRM предусмотрены диаграммы распределения сделок по статусам, менеджерам или в другом удобном для вас разрезе. Кроме того, система строит прогнозы продаж, основываясь на ранее собранной статистике и текущем положении.
Интеграция с вашей АТС
AmoCRM станет Вашим незаменимым помощником в совершении и переадресации звонков. С его помощью вы сможете «помнить» имена всех Ваших клиентов. В программе также хранится вся статистика Ваших входящих и исходящих звонков. После установки связи с вашей АТС, в интерфейсе amoCRM появится специальная иконка в виде телефона. Один клик и номер автоматически набирается на телефонном аппарате менеджера. Звонить можно как из списков, так и из карточки контакта или сделки.
Как установить сайт на Рабочий стол монитора?
Вероятно, первое, от чего устаёт любой пользователь, так это смотреть на обои, которые установлены на Рабочий стол. Многие постоянно смотрят на установленную по умолчанию картинку годами, даже если система переустанавливалась не раз. Всем пользователям она быстро надоедает, и они занимаются поисками подходящих картинок для Рабочего стола. Некоторые пользователи предпочитают анимированные обои. Я вам предлагаю установить в качестве обоев главную страничку любимого сайта (впрочем, любую страничку, конечно). Сейчас, во времена безлимитного интернета это для некоторых порой очень и очень удобно, тем более когда компьютер или ноутбук постоянно подключён к сети. В любом случае, как вариант неплохо. Такой трюк появился в Windows XP. Увы, на ней он и закончился. Интерактивные столы ушли в небытие. Мне лично было очень интересно наблюдать за обновлением новостных сайтов в режиме он-лайн. Такая настройка на Рабочий стол пригодилась бы многим пользователям. Но, повторюсь, создатели новых версий Windows решили оставить Рабочий стол без возможности отражать интерактивную страницу. Честно говоря, очень и очень жаль. Лично мне такой возможности порой очень не хватает.
Но перейдём от слов к делу. Установим веб-страницу на Рабочий стол- Щёлкните правой кнопкой мышки по любому из свободного пространства на Рабочем столе
- На появившемся на Рабочем столе дополнительном меню выберите пункт Свойства .
- Давайте выберем вкладку Рабочий стол и нажмём Настройка рабочего стола…
- В меню Элементы Рабочего стола теперь выберем вкладку Веб и затем нажмите на кнопку Создать … Ну, или выбрать пункт Моя текущая домашняя страница. Фоном будет отображаться страница сайта, которая установлена домашней в браузере, установленном по умолчанию.
В появившемся окне просто введите заранее скопированный адрес любимого сайта из адресной строки браузера.
Закройте последовательно открытые диалоговые окна, соглашаясь с изменениями и нажимая кнопку ОК. Теперь вместо надоевшей картинки у вас страница понравившегося веб-сайта и, глядя на сайт на Рабочий стол, вы можете наблюдать за изменениями в сети в интерактивном режиме.