Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов.
Плагины позволяют подставить в бекграунд произвольного контейнера видео ролики с YouTube и Vimeo, в том числе и для body, т.е. как подложку для всего сайта.
Если вы имеете достаточно опыта работы с плагинами, то не стану вас задерживать, вот официальные доки:
Плагин для интеграции видео с Youtube
Плагин для интеграции видео с Vimeo
Алгоритм настройки и использования плагинов очень похож, потому дальнейшие пояснения буду вести на примере YTPlayer.
Источник: shra.ru
Как создать веб-сайт, используя видео с YouTube в качестве фона?
Как Поставить Обложку на Видео в Youtube 2023 на Телефоне. Как Установить Обложку на Видео в Ютубе
Большие видео на заднем плане веб-сайтов — довольно популярный тренд в веб-дизайне. Умело примененные видео могут сделать веб-сайт более драматичным и привлекательным для пользователей.
Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.
Существуют компании, как, например, Powerhouse или Adidas, которые используют видео в качестве заднего плана сайта, чтобы донести до пользователя определенное сообщение или историю о продукте или услуге.
Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.
В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!
Настройка
- Длительность видео должна составлять 15-30 секунд.
- Оно должно быть настроено на автовоспроизведение (autoplay).
- Громкость должна стоять на нуле.
- Убедитесь, что заголовок и прочий текст читабельны на фоне видео.
- Сообщение, которое несет в себе видео, должно быть ясным и четко сформулированным.
HTML
- Big-background — фоновое видео
- About-section — «о нас»
- Small-background-section — «поделиться»
//Big Background Content here //About Section Content here //Small Background Section Content here
Теперь необходимо наполнить каждую секцию содержимым. В секции big-background и small-background-section, поместите класс pattern, чтобы создать легкую текстуру на нашем видео. Также нужно добавить h1, h2, параграф и кнопку.
Как заменить задний фон на твое видео?)
Я использовал шрифт Font Awesome для социальных иконок, которые располагаются в секции small-background-section. Затем мы добавим шаблон для нашего видео, используя плагин jQuery.mb.YTPlayer. Поместите следующий код сразу же за .
- 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
Далее добавим стиль к 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
Настало время стилей секции 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
Для секции 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
Media queries
Для того, чтобы наш сайт был адаптивным, добавим немного media queries.
jQuery
Теперь включим наше YouTube видео. Вызовем класс player внутри кода jQuery. Поместите следующий код перед закрывающимся тегом body и внутрь тегов .
$(function()< $(«.player»).mb_YTPlayer(); >);
Запасной вариант
Фоновое видео с YouTube не будет воспроизводиться на мобильных устройствах и планшетах, так как правила YouTube этого не позволяют.
Однако, мы можем использовать jQuery для того, чтобы добавить фоновое изображение по умолчанию, в случае если браузер определит, что пользователь зашел на сайт с мобильного устройства.
Ручное решение
Чтобы определить, что пользователь зашел с мобильного устройства или планшета, мы можем спрятать элемент на определенном размере экрана. Например, мы хотим убрать видео-фон на экранах шириной 480px. Нужно просто добавить display: none к элементу player:
Что касается 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
Как сделать видео фоном сайта
Привет уважаемые читатели seoslim.ru! На данный момент сайты стали настолько разнообразны, что уже никого не удивишь уникальный и графическим дизайном.
Каждый из вебмастеров старается приложить максимум усилий, чтобы его страница выглядела необычно и привлекала внимание посетителя.
Одной из фишек придания динамичности сайту является фон. Согласитесь, что те ресурсы, у которых на заднем плане происходят какие-то действия заставляют нас задержаться там немного дольше. Поэтому крупные порталы и лендинг-страницы так активно используют этот метод.
Ради интереса зайдите на официальную страницу платежной системы WemMoney и посмотрите, как это выглядит на практике.
Если вы хотите улучшить поведенческие факторы сайта, то использование видео в качестве фона сайта точно немного уменьшит показатель отказов.
Кому интересна данная тема, предлагаю вместе со мной пройтись по источникам выбора видео и способах их установки в качестве заднего плана площадки.
Где брать видео для фона сайта
Первое, что надо сделать, это подобрать ролик, который будет выводиться в качестве background.
Могу отметить три способа поиска или создания видео:
Фриланс. Если вы привыкли все делегировать, тогда можно воспользоваться услугами фрилансеров и на любой из бирж, например, Kwork или Workzilla закажите необходимый видеомонтаж.
Видеостоки. В сети полно ресурсов, где можно бесплатно скачать видео фон на сайт, только не забудьте его потом сжать, чтобы не увеличивать скорость загрузки страницы.
Ниже представлен небольшой список нормальных видеостоков:
- Pixabay
- Coverr
- Mazwai
- PEXELSvideos
- Videvo
- Pond5
Из русскоязычных можно отметить Pixabay, жаль что из бесплатностей там ничего не осталось.
Поэтому качайте video с забугорных стоков, мне понравился Coverr.
Создание. Ну а если вы хотите, чтобы ваш проект был уникальных, тогда лучше сделать все самому, только для этого надо обладать подходящими навыками и программным обеспечением.
Установка видео в качестве фоновой картинки на сайт
С роликом мы определились, теперь подошел черед самого сложного установить ролик в виде заднего плана.
Здесь можно пойти двумя путями:
- Правка вручную HTML и CSS разметки.
- Использование специальных плагинов.
Первый вариант рассматривать не буду, так как у всех разные шаблоны, соответственно сложно будет подобрать один способ, который будет универсальным.
Поэтому давайте остановимся на модулях, которые для этого предназначены.
Самым популярным и бесплатным плагином является mb.YTPlayer for background videos, который кроме простоты использования позволяет подгружать в качестве фона видео с Ютуба.
Установить плагин можно прямо из административной панели WordPress. После активации переходим к настройкам, который будут доступны в специальном разделе «mb.ideas» — «YTPlayer».
Как видите настраивать тут особо нечего, зато точно не запутаетесь. ))
- The Youtube video url is — сюда вставляем ссылку на видео из YouTube.
- The page where to show the background video is — выбираем какая из страниц сайта будет отображать анимацию в качестве фона.
- Remember last video time position — отмечайте чекбокс если хотите, чтобы видео всегда продолжалось с того места, где был закончен просмотр.
- Time to wait before initialization — устанавливаем время после которого начнется загрузка видео (рекомендуется ставить 2 секунды).
Однако если купить лицензию, тогда настроек в разы становится больше, можно будет настраивать прозрачность, время запуска и остановки ролика, громкость, соотношение сторон и другие параметры.
На этом у меня все, интересно узнать в комментариях приходилось ли вам делать в качестве фона сайта видео и как это было реализовано.
Источник: seoslim.ru