Видео на фон на сайте: Как сделать видео 🎥 фоном сайта + 12 бесплатных видеостоков
Содержание
Делаем видео в качестве фона сайта с помощью HTML
Серёжа СыроежкинКопирайтер
В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (video background). Видео в качестве фона страницы можно сделать только с помощью HTML5. Для этого мы:
Используем тег video на HTML-странице;
С помощью CSS-стилей растянем видео на весь экран и используем в качестве основного фона.
Создаем видеоплеер с помощью HTML
О том, как сделать видеоплеер у себя на сайте с помощью HTML5 мы уже говорили в статье Проигрыватель видео HTML5. В той же статье мы обсуждали вопрос кроссбраузерности, вспомним основную идею:
Не все браузеры воспроизводят какой-то конкретный видео-формат, поэтому нужно использовать несколько видео-кодеков. Браузер клиента автоматически определит поддерживаемый формат из предложенных и воспроизведет нужное видео.
Поэтому, создадим видео для фона сайта в двух форматах: H.264 и WebM. Этого будет достаточно, чтобы охватить основной ряд современных браузеров (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer). Полученное видео рекомендуется обернуть в тег div для последующего позиционирования. Получим следующий код HTML:
Благодаря атрибуту autoplay видео будет проигрываться сразу после загрузки страницы, когда решит браузер (поскольку атрибут preload стоит на значении auto).
Настраиваем стили с помощью CSS
Рассмотрим теперь CSS-код для видео.
Полный код страницы с установленным видео в качестве фона сайта:
Здесь мы, по-сути, добавляем блок с видео с помощью HTML, и с помощью CSS растягиваем его на весь экран.
Смотрите также:
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.
Также имеет смысл добавлять затухание при паузе видео, особенно если замещающее изображение более высокого качества, чем видео.
Как сделать видео фоном сайта
Всем привет. Сегодня хотел бы вам рассказать о таком интересном эффекте, как видеофон для сайта. Кому-то покажется это полной ерундой, но на некоторых проектах это действительно неплохо сочетается с общим дизайном. Конечно, у этого эффекта много как плюсов, так и минусов и все зависит от задач, но то, что видеофон на сайте позволит выделиться среди конкурентов — факт.
Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся — и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и css код раздуть до безобразных размеров, а можно грамотно оптимизировать и сократить вес в 2-3 раза. (Кстати, об оптимизации css кода можно почитать в этой статье)
Итак пример:
Как видите, эффект очень интересный, но при условии что страничка быстро грузится. Если нет, то овчинка не стоит выделки и лучше обойтись просто картинкой в высоком разрешении, чем заставлять пользователя ждать так долго.
Кроме того, проанализируйте свой трафик, и если окажется, что много пользователей с мобильных устройств, то тем более не стоит использовать видеофон, так как мобильный интернет, пока еще, не настолько быстр. Казалось бы, очевидные вещи повторяешь много раз, но все равно находятся такие, кто этого не понимает.
Как сделать видео фоном сайта?
Разбираясь в вопросе ,как добиться эффекта с видеофоном, в свое время, я обнаружил несколько способов. Одни из них проще, другие сложнее, некоторые требуют javascript, а другие нет. Сегодня я расскажу вам о том, как добиться подобного эффекта без всяких там скриптов. Приступим…
Сразу прошу извинить за качество видео. Оно 720p, так что большие мониторы — вам привет! Прошу камнями не кидать, это только в качестве примера, а вы все равно будете подбирать под те разрешения, на которые ориентирован проект.
Итак, помните статью, в которой мы говорили про то, как вставить видео на сайт при помощи тегов html5? Сегодня знания от туда нам пригодятся. А в этой статье я не буду подробно описывать каждую строчку.
HTML разметка
Сразу после тега </body> вставьте фоновое видео на сайт следующим образом. Если хотите подробнее разобраться, читайте статью, о которой я упоминал выше.
Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute. Буду искать еще способы подключения видео в качестве фона, так как не люблю я это абсолютное позиционирование. Даже текст подвинул padding_ом. Но страничка грузится намного быстрее чем те, которые были в примере.
Если вам известны другие способы реализации подобного эффекта, то пишите в комментариях — обсудим.
Скачать исходник
Полноэкранный видео фон для сайта HTML5
Как можно заметить, что полноэкранный фон становится популярным веб разработке, где задействовано изображение на весь экран при помощи CSS3. Который на прямую выставлен виде использованного фона, где имеется оригинальный визуальный эффект. Но главное, что все представленное можно использовать в качестве видео фона на сайте или отдельной тематической страницы.
Отлично поставленный видео фон изначально своим видом заставит обратить на себя внимание, а это плюс, так как гость или пользователь может заинтересоваться тем, что будет написано, и это возможно тот материал, который он искал. И не нужно забывать за проведенное время или как говорят длительность нахождение на сайте, где такой трюк безусловно сыграем в плюс, и есть большая вероятность, что большему взаимодействию с другим контентом, который находится на портале.
Снять эффект видеофона довольно просто, фактически это может быть сделано только при использовании CSS. Ведь свойство фона CSS и фона изображения принимают только цвета, градиенты, растровые изображения и SVG в качестве значений.
Видео в качестве фона для сайта
1. HTML
В этом примере применяется видеоролик, у которого разрешение 1920×1080, а полное продолжительность установлено в 15 секунд, с хорошим весом в 3 МБ. Здесь нужно подчеркнуть, чем больше по времени и качественное видео, тем будет больше весить, а это понижает скорость запускание видео. Здесь внутри блока div с идентификатором video-bg находится заданный фон.
width – Отвечает за ширину области при воспроизведения видео; height – Идет на высоту области; preload – Связана с функцией загрузки видеоролика, что производится со страницей; autoplay – Отвечает за автоматическое воспроизведение ролика; loop – Это идет циклическое повторение ролика; poster – Картинка или изображение, что отображается вместо видео, пока не запустилось видео;
Мы создаем простой элемент видео HTML5 с атрибутами, где нужно разместить их внутри элемента контейнера. Картинки или снимки, которые используются в атрибуте плаката, будет автоматически заменено самым первым кадром, что производит видео при загрузке. Поэтому рекомендуется использовать самый первый кадр на видеоролике для изображения плаката.
Обратите внимание на пустое пространство сверху и снизу экрана, которое можно исправить, где расширив область просмотра нашего видео до размера, превышающего область просмотра нашего браузера. Также сделаем его выше или шире в зависимости от соотношения сторон окна и просмотра браузера с помощью медиа запросов.
В самом коде вы можете заметить директиву @supports, что изначально производит проверку, в плане поддержки браузера со свойством object-fit. Если да, то фон автоматически изменяет значение cover для пропорционально отображение, что происходит при самых разных размерах экрана.
Демонстрация
Адаптивное видео для фона блока
Подключаем библиотеку jQuery и плагин jquery.vide.js и просто добавляем атрибут data-vide-bg=»path/video» к нужному блоку.
Где: path — папка с файлами video.jpg, video.mp4, video.ogv и video.webm
Пример:
<div data-vide-bg=»/demo/vide/video»>
<div>
Адаптивное видео для фона
</div>
</div>
<div data-vide-bg=»/demo/vide/video»>
<div>
Адаптивное видео для фона
</div>
</div>
Адаптивное видео для фона
Также можно использовать атрибут data-vide-options для настроек видео. По умолчанию они выглядят так:
volume: 1
громкость (от 0 до 1)
playbackRate: 1
скорость видео (медленнее быстрее)
muted: true
отключение звука (true, false)
loop: true
повтор (true, false)
autoplay: true
автопроизведение (true, false)
position: ‘50% 50%’
позиционирование видео, также как background-position для CSS
posterType: ‘detect’
Тип постера («detect» — автоматически; «none» — без постера; «jpg», «png», «gif»,… — точное расширение.
resizing: true
масштабирование видео под размеры блока (true, false)
bgColor: ‘transparent’
цвет для фона блока с видео
className: ‘ ‘
класс для блока с видео
Пример:
<div data-vide-bg=»/demo/vide/video» data-vide-options=»playbackRate: 0.1, position: ‘0 100%'»>
<div>
Адаптивное видео для фона
</div>
</div>
Видео в background для сайтов. Примеры и 5 бесплатных ресурсов с видео
Сайт- презентация Axe effect. Короткий ролик в бэкграунде акцентирует внимание посетителя на продукте.
Можно подобрать ненавязчивую музыку под видео или наоброт, веселую и задорную, как действие на видео. Например, сайт о модных вещах. Если добавляете звук на сайт, обязательно приделывайте контрол, который музыку отключает и кладите его на видное место, не всегда звук бывает уместен.
Сайт кафе. На первой странице слайдер и первый слайд — видео слайд. Смотрится очень эффектно.
Этот пример необычен тем, что видео подгружается с Youtube. Сделано это с помощью jQuery плагина, который вы запросто можете использовать на своем сайте.
Плагин можно взять здесь. В плагине куча настроек. Например:
mute, можно отключить звук
opacity, позволяет настроить прозрачность от 0 до 1
optimizeDisplay оптимизирует видео под размер окошка браузера
loop проигрывать ли видео бесконечно
startAt остановиться на такой то минуте
showYTLogo показывать лого
и множество других полезных настроек.
Так же может проигрывать список видео, применять css фильтры. В плеер можно встроить даже Google Analytics. Плеер доступен в виде плагина к WordPress.
Все это хорошо, но где же взять видео. А взять их можно на этих сайтах, причем совершено бесплатно !
Coverr
Fancyfootage
Pexels
Videvo
Videezy
Несколько советов, как лучше использовать видео в бэкграунде.
Видео должно быть 15-30 секунд.
В режиме autoplay, то есть бесконеное проигрывание.
Аудио лучше выключить.
Обратите внимание на текст, текст не должен сливаться с картинкой из видео.
Лучше использовать короткое сообщение или слоган с хорошей типографикой.
Лучше всего, когда видео рассказывает какую-то историю о вашем бизнесе. Пример с кафе выше очень удачно демонстрирует эту мысль. Сделать такое видео вы можете и сами, зеркалкой нынче никого не удивишь. Пользуйтесь и повышайте внимание и конверсию вашего сайта !
Доброе утро, дорогие друзья подписчики или будущие подписчики :)) Очень нужно было недавно сделать видео background на одном сайте, и проигрывать видео именно с YouTube. Нашел несколько плагинов, но остановился на решении, основанном на плеере jQuery YTPlayer. Работает во всех браузерах, не сильно тормозит, достаточно простой в установке.
То, что вы можете увидеть в «Демо» и, соответственно, скачать можно назвать почти «Landing Page» с паралаксовым видео бэкграундом. Потому что данный скрипт имеет аж 3 блока:
Видео на все разрешение экрана с красивой надписью и кнопкой по середине
Текстовое приветствие опять же с кнопкой
И низ сайта с какой-то фразой и тремя иконками социальных сетей.
Но это, конечно же, не одностраничный сайт. Это плагин, который наглядно показывает как работает скрипт YTPlayer. Видео всегда остается фиксированным, так что при прокрутке оно остается на месте. Также видео имеет чуть заметный эффект приближения. Видео действительно немного увеличивается с течением времени. Продолжительность видео никак не влияет на подгрузку.
Установка видео с YouTube на background сайта:
Все, что помечено «не обязательно» — не обязательно (Капитан Очевидность 🙂 )
1. Скачиваем с моего сайта архив
2. Заливаем все файлы и папки из архива в корень сайта
5а. Если Вам нужно все то, что есть в «демо», то код будет такой: (не обязательно)
<section>
<a data-property="{videoURL:'http://www.youtube.com/watch?v=8WDccXyPxWk',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>
<div></div>
<div>
<h2>YOUTUBE</h2>
<div></div>
<h2>VIDEO BACKGROUND</h2>
<a href="http://bayguzin.ru">от bayguzin.ru</a>
</div>
</section>
<div>
<section>
<div>
<h3>USE A COOL YOUTUBE VIDEO BACKGROUND</h3>
<p>Wondering how you might add a video background on your site? <br/>It's so easy! Introducing jQuery MB.YTPlayer, a jQuery plugin that enables you to display Youtube videos on your webpages. <br/>It's so awesome that it can transform your Youtube video into an HTML background at ease! No slow server loading time!</p>
<a href="http://bayguzin.ru" target="_blank">Check it here</a>
</div>
</section>
<section>
<div></div>
<div>
<h3><span>Find us on social media</span></h3>
<ul>
<li><a href="" target="_blank"><i></i></a></li>
<li><a href="" target="_blank"><i></i></a></li>
<li><a href="" target="_blank"><i></i></a></li>
</ul>
</div>
</section>
</div>
Скрипт подключен, теперь на фоне вашего сайта стоит видео с YouTube. Причем без звука, не пугая пользователя. Надеюсь, скрипт пригодится. Всего хорошего.
Помогла статья? Угости чашечкой кофе =)
фоновых видео для вашей домашней страницы
Фоновые видеоролики — одна из самых популярных тенденций в веб-дизайне в наши дни, и похоже, что они будут надолго.
Ваш веб-сайт предназначен для рассказа вашей истории, и видео-фон может быть большим подспорьем в настройке тона и настроения. Они особенно популярны на определенных типах веб-сайтов, особенно на профессиональных, элитных или «визуальных продуктах».
Помимо привлекательности, при эффективном использовании видеофоны могут побудить посетителей оставаться на веб-сайте дольше и повысить коэффициент конверсии.В этой статье мы обсудим несколько примеров эффективных фоновых видео и то, как разместить их на своем веб-сайте.
Примеры фоновых видео
Чтобы быть эффективными, видео фоны веб-сайтов должны привлекать посетителей, не отвлекая их от содержания вашего сайта. В идеале визуальные эффекты помогут установить настроение или тон, но вы не должны полагаться на фоновое видео для информирования или объяснения.
Несмотря на то, что вы должны размещать на своем веб-сайте информативные видеоролики, такие как поясняющие и рекламные видеоролики, ваш фон не место для подробного объяснения вашего продукта.Они более эффективны, если они встроены на страницу, где посетители, которые хотят узнать больше, могут щелкнуть и посмотреть их.
Вот несколько примеров веб-сайтов, которые эффективно используют фоновые видео домашней страницы, и почему они работают.
ProjectSkin
С мягким освещением, успокаивающими естественными цветами и текстурами, а также кадрами роскошной спа-атмосферы, видео фон на этом веб-сайте отлично справляется с задачей создания определенного настроения с того момента, как вы попадаете на страницу.
ThemePunch
На этом веб-сайте используется короткое, зацикленное, черно-белое покадровое видео команды за работой. Высококонтрастный текст и желтые кнопки привлекают внимание, забавны и создают профессиональный имидж.
HtO Surf Shop
Попадая на этот сайт, вы сразу же погружаетесь в бурлящие волны, благодаря видео фону.Эти снимки POV обладают огромной энергией, которая заставляет вас не только хотеть отправиться к океану и нырнуть (идеально для магазина серфинга), но и предположить, что эти люди живут серфингом и, следовательно, знают, о чем они говорят.
Obakki Foundation
Видео фоны также хорошо подходят для вызова эмоциональных реакций, что делает их идеальными для некоммерческих организаций.Здесь некоммерческая организация, занимающаяся обеспечением водой нуждающихся людей, использует изображения текущей воды и снимки людей, которым они помогают, чтобы придать им ощущение непосредственности.
Biteable
Не для того, чтобы гудеть в свой рог (гудок!), Но мы очень любим собственный видео-фон! Веселый и красочный фон на Biteable.com демонстрирует разнообразие стилей видео, доступных пользователям.
Фоновое видео: что можно и чего нельзя делать
Хотя они не идеальны для подробного объяснения сложного инструмента, если у вас есть продукт с высокой наглядностью, видео-фон может быть как раз тем, что нужно для вашего веб-сайта. Мы кратко обсудили, почему веб-сайты выше работают — вот еще несколько советов, которые можно и нельзя делать при использовании фонового видео на любом веб-сайте.
Не выбирайте только видео. То, что он хорошо выглядит, не означает, что он подходит для вашего бизнеса.Убедитесь, что изображения актуальны. Однако это не означает, что вы должны показывать исключительно свой продукт, но подумайте об идеальном результате, который принесет ваш продукт или услуга. Например, если вы водопроводчик, не показываете кадры с трубами, покажите кого-то, кто принимает душ, или детей, весело играющих под дождевальной машиной в солнечный день.
Ограничьте длину вашего видео. Большинство приведенных выше видео довольно короткие и плавно переходят в цикл, чтобы создать впечатление более длинного видео.Видео файлы могут быть довольно большими; короткое, зацикленное видео помогает предотвратить замедление загрузки вашего сайта размером фонового видео.
Не отвлекайтесь от важных дел. Ваш видео фон должен дополнять содержание вашего сайта, а не отвлекать от него. Вы по-прежнему хотите, чтобы ваша аудитория читала ваш текст, перемещалась по вашему сайту и нажимала на ваши призывы к действию.
Убедитесь, что ваш контент виден. Убедитесь, что у вас есть большой контраст между вашим видео и содержимым поверх него. Вы можете использовать наложение, чтобы добавить цвет или осветлить / затемнить ваше видео, чтобы обеспечить читаемость, или вы можете сделать свой контент контрастным цветом (или и тем и другим, как ThemePunch в приведенном выше примере). В общем, придерживайтесь приглушенных цветов в вашем видео. которые дополняют остальную цветовую палитру вашего сайта.
Не используйте фоновое видео со звуком. Только не надо. Автовоспроизведение видео со звуком — отличный способ заставить пользователей немедленно закрыть окно.Если в вашем видео есть звук, убедитесь, что он отключен по умолчанию.
Учитывайте удобство использования. Взгляните на аналитику своего веб-сайта — какие браузеры и устройства используют большинство ваших посетителей? Видеофон на вашем веб-сайте не подходит для вас, если большинство ваших пользователей не видят его, поэтому обязательно используйте широко поддерживаемые типы файлов. Ознакомьтесь с этой статьей, чтобы получить конкретные советы по удобству использования.
Не изобретайте велосипед. Добавление видео фона может быть таким же простым, как загрузка видео и щелчком кнопки, или сложным, как написание лотов кода, в зависимости от вашего веб-сайта.Если вы не разработчик, избавьтесь от головной боли и используйте плагин, тему или конструктор веб-сайтов, поддерживающий видеофоны.
Сделайте это бесшовным. Вы хотите, чтобы ваше видео выглядело как бесшовный фон, а не как встроенное видео. Скройте элементы управления видео и все остальное, что может отвлечь пользователя.
Как использовать фоновое видео
Это может быть немного сложно для нетехнических людей, но ваш веб-разработчик должен знать, как настроить это довольно быстро.
Обычно фоновые видео настраиваются с использованием HTML5. Это вопрос создания вашей страницы в HTML, стилизации ее с помощью некоторого базового CSS и добавления некоторого кода для наложения контента, в то время как видео остается фиксированным и центрированным в фоновом режиме. Вам также потребуется добавить код для управления видео, включая автовоспроизведение, отключение звука и зацикливание.
Для получения более подробных инструкций по настройке фонового изображения для видео с помощью HTML5 ознакомьтесь с этой статьей. Обратите внимание, что конструкторы веб-сайтов, такие как Wix, Squarespace, Shopify и альтернативы Shopify, также упрощают добавление видеофонов.А если вы используете WordPress, есть плагины и темы, которые также упрощают процесс.
Сделайте фоновое видео
Учетная запись Biteable Premium дает вам доступ к более чем 85 000 стоковых видеоклипов, и еще больше их можно купить по запросу. Многие из них идеально подходят для фоновых видеороликов на веб-сайтах, особенно если вы будете использовать только базовые видеоматериалы или анимацию.
Ниже приведен пример видеоматериала, который вы получаете с учетной записью Biteable.
А ниже — пример некоторых из наших видеоматериалов о ночном небе, но вы можете найти примеры еще большего количества кадров здесь.
Некоторые другие хорошие источники бесплатных стоковых видеоматериалов включают такие сайты, как Pexels, Coverr, который специализируется на видео для домашних страниц, и Videvo, который предлагает более 3000 бесплатных стоковых видеоматериалов в формате HD.
Завершение…
Когда все сделано правильно, видео-фон может заинтересовать ваших пользователей и модернизировать ваш веб-сайт, но подумайте, подходит ли эта тенденция веб-дизайна для вашего сайта.
Если вы готовы создать свою собственную, убедитесь, что вы следуете нашим правилам и правилам, чтобы фоновое видео помогло вам рассказать свою историю эффективно, не отвлекаясь от нее.
Смотреть в полноэкранном режиме
Как создать фоновое видео с помощью CSS
Если вы хотите привлечь новых посетителей на свой веб-сайт, у вас есть на это от 10 до 20 секунд.Жизнь коротка, и никто не хочет тратить время на обычные веб-страницы. Итак, как мы можем вдохнуть жизнь в контент нашей страницы, чтобы привлечь внимание посетителей и заставить их прокручиваться?
Один из вариантов — добавить видео на ваш сайт в фоновом режиме. Видеофоны занимают всю ширину и высоту области просмотра (другими словами, видимую область страницы) и добавляют визуального чутья для повышения вовлеченности. Поверх этого видео вы можете разместить контент вашей избранной страницы — в конце концов, это всего лишь фон, а ваш контент наиболее важен.
Видео фоны могут показаться необычной функцией, но на самом деле их довольно легко реализовать, если вы знаете немного CSS. В этом руководстве мы покажем вам, как добавить на веб-страницу простой полноэкранный видеофон, который вы можете настроить и адаптировать к своим потребностям.
Как создать полноэкранный фон для видео с помощью CSS
Начнем с нашего HTML. Сначала мы разместим на нашей странице видео с тегом и несколькими атрибутами.
<цикл автовоспроизведения видео без звука poster = "https: // assets.codepen.io/6093409/river.jpg ">
Все эти атрибуты важны для правильной работы фона, поэтому давайте рассмотрим каждый из них:
Атрибут id предназначен для стилизации нашего видеоэлемента с помощью CSS. Это необходимо для достижения полноэкранного фонового эффекта.
Атрибут autoplay автоматически запускает видео после загрузки страницы.
Цикл Атрибут воспроизводит видео в бесконечном цикле.
Атрибут отключен. отключает звук для видео. Воздержитесь от воспроизведения звука видео на своей странице, если это не инициировано пользователем. Это создает проблему доступности и потенциально неприятный пользовательский опыт.
Наконец, изображение плаката отображается на экране во время загрузки видео или вместо видео, если оно не загружается. Мы рекомендуем сделать изображение плаката первым кадром вашего видео для получения максимально гладкого изображения.
Теги обычно также включают в себя атрибут control . Однако мы упустили это, потому что мы не хотим, чтобы пользователи приостанавливали видео или пропускали его.
После элемента видео давайте добавим содержимое HTML-заполнителя, чтобы увидеть, как текст отображается на фоне видео.
ЭТО РЕКА.
Как величественно.
Закончив HTML, давайте займемся CSS.Чтобы превратить обычное видео в фоновое, добавьте следующий CSS:
Давайте рассмотрим каждое из этих правил, чтобы понять, что они делают:
height: 100vw (ширина области просмотра) и width: 100vh (высота области просмотра) расширяют видео до полной ширины и высоты области просмотра.
подгонка объекта: обложка автоматически изменяет размер фонового видео для сохранения его исходного соотношения сторон при заполнении экрана, при необходимости обрезая края видео.
позиция: фиксированная и следующие слева , справа , сверху и снизу позиционируют видео относительно области просмотра и отделяют его от остального содержимого страницы. Это удерживает видео на месте, когда пользователь прокручивает, и позволяет другому контенту располагаться поверх него.
z-index размещает фон видео под сопроводительным контентом.
Затем мы добавим стили для остального содержимого нашей страницы. Для удобства убедитесь, что текст, размещенный поверх видео, обеспечивает достаточный цветовой контраст с фоном:
h2, h3 { цвет: белый; Семейство шрифтов : Trebuchet MS; font-weight: жирный; выравнивание текста: по центру; }
h2 { font-size: 6rem; маржа-верх: 30vh; }
h3 {font-size: 3rem; }
На этом этапе видео фон будет отображаться нормально.Но мы еще не учли мобильные устройства. Обычно рекомендуется предотвращать автоматическое воспроизведение видео на мобильных устройствах, поскольку для их воспроизведения требуется много данных, а пользователи вообще не запрашивали воспроизведение видео.
Вместо этого мы добавим медиа-запрос, который заменяет видео нашим плакатом на экранах шириной 750 пикселей или меньше.
Когда мы все объединяем, мы получаем гладкий видео фон, который масштабируется вместе с экраном и отображает изображение на мобильных устройствах. (Примечание: нажмите здесь, чтобы увидеть пример с воспроизведением видео.)
См. Фон видео пера 1 от Кристины Перриконе (@hubspot) на CodePen.
Добавить дополнительное содержимое страницы
Мы уже разместили на странице несколько заголовков, чтобы увидеть, как контент выглядит на фоне видео.
Тем не менее, ваша страница, вероятно, будет содержать больше контента, чем фон видео и некоторый текст заголовка. Итак, давайте добавим в наш пример раздел , который появляется, когда пользователь прокручивает страницу вниз. Этот элемент закроет видео, чтобы привлечь внимание к основному контенту. (Примечание: нажмите здесь, чтобы увидеть пример с воспроизведением видео.)
См. Фон видео пера 2 от Кристины Перриконе (@hubspot) на CodePen.
Мы присвоили нашему элементу цвет фона, чтобы скрыть видео, а также верхнее поле в единицах высоты области просмотра.Таким образом, основное содержимое появится, как только пользователь начнет прокрутку.
Фон для видео на CSS для привлечения аудитории
С помощью всего нескольких строк CSS мы создали шаблон полностраничного фонового видео, который вы можете настроить для своей аудитории. Видео-фоны могут не подходить для каждого веб-сайта, и, как правило, их нельзя использовать на мобильных веб-сайтах. Однако, если все сделано хорошо, они могут оказать существенное влияние, и нет необходимости подталкивать игру.
фантастических примеров полноэкранного видео фона в веб-дизайне
Vandelay Design может получать компенсацию от компаний, продуктов и услуг, представленных на нашем сайте.Для получения более подробной информации посетите нашу страницу раскрытия информации.
Один из способов произвести большее впечатление своим веб-дизайном — это полноэкранный видео фон . Я не уверен, что то же самое для кого-то другого, но когда я захожу на веб-сайт с высококачественным полноэкранным видео прямо в верхней части страницы, я заворожен. И внезапно я оправдываю время, потраченное на изучение сайта, чтобы узнать больше об этой замечательной организации, которая так искусно изложила свою идею и дала мне такое сильное чувство.
Теперь обратите внимание, что в моем заявлении выше я сказал «высокое качество». Я уверен, что большинство из вас сталкивались с веб-сайтами с видео-фоном, из-за которых ваше мнение упало на несколько полос. Я тоже, и это не очень разочаровывает. Обычно мой опыт с этой медленной загрузкой, некачественным полноэкранным дизайном видео заканчивается тем, что я, к сожалению, как можно быстрее покидаю веб-сайт. Полноэкранные видеофоны работают, только если они содержат следующие компоненты:
Вызывает сильные эмоции — смысл использования видео в том, что оно может вызвать более сильные эмоции, чем просто слова или плоская графика.Используйте видео-фон только в том случае, если он удачно переплетает нужные чувства с посланием веб-сайта.
Высокое качество — неважно, насколько сильные эмоции может вызвать видео, если видео воспроизводится некорректно или слишком размыто. А если это некачественное стоковое видео, единственные чувства, которые это вызовет, — это раздражение и отвращение. Используйте краудсорсинг видео-сайт, такой как Veed.me, для различных бюджетов или, что еще лучше, наймите кого-нибудь из местных, чтобы создать индивидуальное видео об услугах веб-сайта.
Совместимо — какие браузеры и устройства используют большинство посетителей сайта? Проведите небольшое исследование, а затем убедитесь, что тип видеофайла совместим. Вы должны предоставить резервное статическое изображение или, возможно, вообще не использовать видео.
Отключить звук — автоматический звук почти всегда неприятен зрителям — просто потому, что большинство из них не ожидают взрыва звука при открытии веб-сайта. Вы всегда можете включить кнопку, чтобы включить звук, или кнопку воспроизведения, которая выводит видео, чтобы зрители могли смотреть его со звуком.
Ограничьте длину — чем меньше, тем лучше, особенно с полноэкранными фоновыми видео. Быстрое эмоциональное изображение намного эффективнее, чем затянувшееся и может потерять эмоции из-за непродолжительного внимания обычного зрителя. Рассмотрим короткий цикл не более 15-25 секунд или меньше, в зависимости от содержания.
Разумное время загрузки — это еще один веский повод использовать короткое видео. Ни у кого нет времени или терпения ждать загрузки веб-сайта более нескольких секунд, независимо от того, какой опыт он ждет.
Но мы здесь ради фантастического вдохновения в веб-дизайне, так что на данный момент достаточно анализа соответствующих компонентов. Ниже приведены несколько невероятных полноэкранных фоновых видеороликов, большинство из которых очень хорошо следуют приведенным выше советам.
Если вы хотите увидеть больше вдохновляющих изображений, ознакомьтесь с этими примерами уникальных синемаграфов.
Парашют Монреаль
Этот профессиональный сайт для прыжков с парашютом предлагает красивое, индивидуализированное видео, воспроизводимое на фоне, как вы уже догадались, прыжков с парашютом, которые они предоставляют.Хотя технически это не полноэкранное видео, это отличный пример того, как вы можете обеспечить впечатляющие впечатления от красивой частичной компоновки экрана.
Смешайте город
Какой забавный интерактивный веб-сайт! Пользователи могут создавать свои собственные музыкальные миксы, используя звуковые файлы и музыкальные клипы из Тель-Авива. Полноэкранное видео вращается при каждом новом посещении объекта между различными сценами пляжа / океана, я полагаю, в Тель-Авиве. 5-7-секундная бесшовная петля вызывает идеальные расслабляющие, веселые эмоции, необходимые для микширования музыки.
Фабрика
Этот центр коммуникационных исследований уникальным образом использует полноэкранное фоновое видео. Переместите курсор, чтобы увидеть всплывающие ссылки в прозрачных полях, чтобы видео продолжало воспроизводиться под ними. Держите курсор неподвижно, и текст исчезнет. Единственным недостатком является то, что музыка, хотя и очень подвижная, воспроизводится автоматически, требуя от пользователей поиска кнопки отключения звука в заголовке.
Модернизация
Вероятно, один из лучших примеров эффективных полноэкранных фоновых видеороликов. Это креативное агентство использует цикл видеороликов, отражающих их специализации — музыку, брендинг и эмоциональные связи.Видео также демонстрирует их идентичность как компании — ретро, очень креативной, веселой, но трудолюбивой. Браво, ретрофуз, браво!
Дом Бореля
На этом веб-сайте дизайнера женской одежды высокого класса есть целевая страница, на которой пользователи должны нажимать на видео «опыт», а не автоматически воспроизводить, что делает автоматическое воспроизведение музыки в видео выполнимым. Завораживающий и раскрывающий, почему это такой уникальный бренд, привлекает зрителей и определенно запечатлевает в сознании, что это линия моды высокого класса.
GBR Дизайн
Это красивое черно-белое видео загружается очень быстро, и дизайнер отлично постарался, чтобы слова заголовка хорошо выделялись на фоне в каждой части видео. Петля показывает сцены повседневной жизни в Венеции и Милане, двух местах расположения этой дизайнерской компании. Красивое видео определенно производит первое впечатление высокого класса, которое еще больше усиливается при прокрутке к их портфолио ниже.
Турбулентность
Хотя текстовый ползунок над фоновым видео слишком много, более темный, приглушенный вид видео помогает сделать его не совсем подавляющим. И ползунок заканчивается, а не зацикливается, что является еще одной причиной, по которой это работает. Турбулентность создает интегрированный опыт работы с брендом, поэтому видео очень хорошо отобрано с людьми, которые едят в ресторане, брендированном компанией, — отличный способ продемонстрировать свою работу!
Bloomberg Media
Еще один невероятно уникальный дизайн, полноэкранный, но не похожий на обычные полноэкранные видеофоны.Экран разделен на три различных раздела видео, и видео, на которое наведен курсор, является тем видео, которое воспроизводится. То же самое происходит и дальше по странице, но сайт работает впечатляюще плавно и очень быстро загружается в зависимости от количества видео на странице. Престижность дизайнеру сайта Bloomberg Media!
Глюк
The Glitch сочетает взаимодействие с видео в этом интересном опыте, чтобы продемонстрировать свои навыки и юмористическую сторону — или они шутят насчет чувства юмора? Медленно прокручивайте или нажимайте кнопки навигации справа, чтобы просмотреть уникальный видеотур по команде за работой, включая анимационную графику в стиле комиксов.
Riello Sistemi
Компания, специализирующаяся на ротационных машинах переноса, видео не только воспроизводится на фоне команды, работающей с ротором, но и экран качается вверх и вниз, как будто на роторной системе. Я играл с этим сайтом немного дольше, чем мне хотелось бы признаться.
Coulee Creative
Полноэкранный видео-фон этой команды инновационных веб-дизайнеров и стратегов показывает, что они именно такие, и это то, что мне в нем нравится.Фактическая команда, выглядящая немного глупо, показывает, что это была бы веселая и интересная группа для работы, а также показывает, какая это сплоченная, слаженно работающая команда.
Мир Юрского периода
Кто бы мог ожидать от веб-сайта тематического парка «Мир Юрского периода» меньшего, чем невероятное фоновое видео парка? Что действительно впечатляет, так это то, что он быстро загружается, работает плавно и выглядит как фильм.
Родео Драйв Беверли-Хиллз
Фон для этого веб-сайта — потрясающее, быстро загружающееся фоновое видео с местами вдоль Родео-Драйв.Когда вы прокручиваете вниз, диагональные прямоугольники выстраиваются с границами, созданными вместе с видео — они все еще движутся. Ух ты!
Снаск
Великолепное фоновое видео от всемирно известного креативного агентства, специализирующегося на брендинге, дизайне и, как вы уже догадались, на фильмах — неудивительно и определенно необходимо. В этом видео отлично сочетаются клипы с их лучшими работами, и его, безусловно, нужно посмотреть, чтобы найти вдохновение для творчества.
Лапа-Туки
Этот веб-сайт для закусочной — не совсем традиционный видео-фон.Он отображает симпатичных иллюстрированных персонажей бренда в виде статического изображения, но щелкните следующий, чтобы увидеть, как изображение превращается в видео, которое плавно вращается вокруг стола. Очень креативно!
Speedo USA: заправляется водой
Полноэкранный видео-фон с волнами и водой на заднем плане красив и очень подходит для страницы исследования Speedo. Чтобы по-настоящему увидеть вдохновляющий, эмоциональный раздел этого сайта, нажмите кнопку воспроизведения.
Полноэкранные видео фоны Rock!
… если все сделано правильно. И видео выше, безусловно, доставляют довольно вдохновляющие впечатления. Что из вышеперечисленного вам больше всего нравится?
Хотите больше красивых сайтов? Проверьте это:
30+ веб-сайтов с зацикленным видеообзором
Зацикливание видео фонов — одна из самых быстрорастущих тенденций в веб-дизайне. С тех пор, как дизайнерам была предоставлена возможность отображать видеоконтент в HTML5, мы увидели, что движущиеся изображения быстро заменяют статические изображения в заголовках и фонах веб-сайтов.
Видео на веб-сайтах обычно ограничены определенным размером кадра, но почему бы не использовать весь монитор пользователя? Когда-то только Flash был способен на такое волшебство, но в наши дни Javascript и HTML5 позволяют растянуть видеоматериал до заполнения окна браузера.
Сегодняшняя витрина веб-дизайна включает более 30 отличных примеров веб-сайтов с большими зацикленными фоновыми видео . Посмотрите, как они зацикливают видео для создания визуально впечатляющих вступлений или привлекают ваше внимание легким движением с использованием крутого видео-фона.
Первый пример — веб-сайт компании Build Film. Веб-сайт этой компании посвящен интерактивному представлению мира изготовления мотоциклов на заказ. На этом веб-сайте представлена серия короткометражных фильмов, в которых удается познакомить человека, наблюдающего за ними, с мотоциклами. Посмотрите этот пример, в котором используется весь монитор пользователя!
Полноэкранные видео можно элегантно использовать, как в этом примере. На этом веб-сайте используется видеообъявление, на которое накладываются логотип, название и девиз компании.Взгляните на этот вдохновляющий пример.
Целью этого веб-сайта является повышение осведомленности об образовании детей. Этот веб-сайт вместе с видеороликами является проектом ING DIRECT и ЮНИСЕФ, в котором вы также можете принять участие.
Этот веб-сайт представляет страсть компании, яхтинг, через серию короткометражных фильмов как первое, что видит посетитель при входе на этот веб-сайт. Это отличный способ продвижения вашего бизнеса. Это, безусловно, пример, на который стоит присмотреться, так как он может стать отличным источником вдохновения.
Этот веб-сайт принадлежит создателю фильмов по имени Аарон Олманн, и он создает действительно мощные и содержательные видео. На этом веб-сайте его работы демонстрируются в полноэкранных видеороликах. Проверьте это!
Если вам больше нравятся черно-белые пленки, возможно, вам стоит взглянуть на этот пример. Barrel Recap использует короткие задние и белые видеоролики, чтобы представить работу своей компании с 2012 года по настоящее время.
Различные способы
Different Ways — еще один хороший пример веб-сайта, который использует полноэкранное видео для привлечения внимания посетителей.Они также наложили типографику разного размера в заголовок. Продолжайте прокручивать, чтобы узнать больше об этой компании и о том, что они могут предложить, загляните на их крутой веб-сайт и посмотрите, найдете ли вы свое вдохновение. Это еще один товар, на который стоит присмотреться, благодаря уникальному способу представления контента посетителям.
Этот веб-сайт ориентирован на представление музыкального дневника посредством демонстрации музыки и музыкальных клипов. Первое, что видит посетитель при входе на этот сайт, — это какие-то фрагменты одной из работ, представленных на его странице.Продолжайте прокручивать, чтобы узнать больше!
Это веб-сайт-портфолио, который открывается с полноэкранного видео, на которое наложены некоторые белые ключевые слова, образующие девиз. Это элегантный способ привлечь внимание посетителей вашего сайта. Посетите этот сайт и посмотрите, найдете ли вы вдохновение.
Веб-сайт
Пьеро Милано — еще один хороший пример веб-сайта, который использует черно-белые короткометражные фильмы для элегантного продвижения своего бизнеса. Посмотри!
Веб-сайт Gin Lane начинается с белого фона, на котором появляется фраза «давайте творим волшебство», когда женщина идет слева направо.В целом, этот веб-сайт имеет аккуратный и минималистичный дизайн, в который идеально вписывается идущая дама, и он является отличным дополнением к дизайну веб-сайта.
Это еще один хороший веб-сайт, за которым стоит следить, поскольку он может стать вашим следующим источником вдохновения для будущих проектов, в которых используются полноэкранные и короткометражные фильмы. У Бретта Джонсона есть потрясающие работы, и на своем веб-сайте он элегантно их демонстрирует. Это определенно достойный пример в будущем!
Working Element — еще один хороший пример веб-сайта, который использует черно-белые полноэкранные фильмы как первое, что видит человек при входе на этот веб-сайт.Фон черный, на нем человек работает. Вы увидите уникальную строку меню с наложением. Загляните на этот удивительный сайт и узнайте, является ли он источником вдохновения, который вы искали!
Если вам нравятся винтажные фильмы или вы работаете над подобным проектом, таким как этот пример, вы, возможно, только что нашли удивительный источник, из которого вы можете черпать вдохновение. Посмотри!
Эпопея
Epopee — это веб-сайт, на котором демонстрируется множество короткометражных фильмов в полноэкранном режиме.Он также сочетает в себе правильный выбор типографики и цветовой палитры, чтобы сделать действительно красивый веб-сайт.
Это еще один веб-сайт, на котором полноэкранные фильмы используются в первую очередь для посетителей, и благодаря этому на этом веб-сайте есть элегантный способ представить компанию или бизнес.
ноября
И последнее, но не менее важное: Novembro — еще один хороший пример, который может стать вашим следующим источником вдохновения. Если вы работаете над подобным проектом, возможно, вам стоит взглянуть на этот пример поближе.
Dadaab Stories — интерактивная мультимедийная платформа, посвященная лагерю беженцев Дадааб. На этом веб-сайте есть высококачественный зацикленный видео-фон, который идеально сочетается с сообщением веб-сайта.
ОНИ Российское агентство
Дизайн веб-сайта этого российского агентства представляет собой художественный зацикленный фон видео с мягким размытым оверлеем. Проверьте это!
Мой Прованс
Этот сайт вызывает желание посетить Марсель! Зацикленный фон видео сопровождается звуками чаек в порту.
Y.CO
На этом веб-сайте есть эффективный и простой экран-заставка, который состоит из большого полноэкранного видео с наложением цвета сепия.
Медиа-штанга
У этого агентства есть простой экран-заставка на главной странице со слоганом компании и зацикленный фон видео, который обесцвечивается, чтобы соответствовать бренду.
Выкл. Радио
Этот дизайн веб-сайта радио имеет темную тему и полноэкранный видео фон с добавленным эффектом размытия.
Seidenstrasse
Как только вы откроете этот сайт, появится интересное полноэкранное видео. Наберитесь терпения и наблюдайте за всем, оно того стоит!
Мариса Пассос
Полноэкранный фон видео на этом веб-сайте поистине завораживает! Наблюдайте за красивыми движениями чернил и красок, падающих в воду.
Этот красивый, элегантный, но современный дизайн веб-сайта использует высококачественный видео фон для презентации своих услуг.
Это веб-сайт темной тематики, в котором оранжевый цвет используется в качестве акцента, чтобы привлечь внимание к наиболее важным частям сайта. На заднем плане есть зацикленное видео, которое привлекает ваше внимание.
Вот еще один сайт-презентация с видео-фоном, на котором представлена команда компании.
Спокойный и красивый — это два слова, которые лучше всего описывают этот зацикленный фон видео.
Этот дизайн веб-сайта имеет левое боковое меню на белом фоне, а на правой стороне размещено большое видео.
Цветные наложения часто используются для сопровождения видеофонов и заставок. Вот отличный пример этих техник.
Полужирный, высокий шрифт идет рука об руку с видеофоном, поскольку они помогают подчеркнуть сообщение, передаваемое в видео.
Это презентационный сайт агентства креативного дизайна. Он имеет простую заставку с монохромным видео-фоном, жирным белым шрифтом и простым призывом к действию «Узнать больше».
Видео и дизайн этого сайта заставляют задуматься об отпуске! Посмотрите, как дизайнер использовал наложение цвета, чтобы сделать это видео еще ярче!
На этой домашней странице представлены три разных видео, по одному в каждом разделе сайта. Остальные элементы чисто белые, за вычетом некоторых акцентных цветов.
Это еще один хороший пример веб-сайта, на котором используются как заставки, так и видеофоны, а также несколько простых и креативных призывов к действию прямо из верхней части страницы.
Видео на фоне этого веб-сайта очень тонкое, и его нелегко заметить. Это почти как синемаграф!
Как создать фон для видео YouTube с помощью CSS
Использование встроенного видео YouTube в качестве фона — обычная техника на современных веб-сайтах. Вы можете использовать тег видео HTML5 для создания фонового видео.Однако это будет означать размещение видео где-нибудь в Интернете. И я вас не знаю, но в моем случае я всегда стараюсь избегать этого варианта. Встраивание видео на Youtube — хорошая альтернатива самостоятельному размещению видео. Они экономят трафик и загружаются очень быстро. Но, поскольку они находятся в iframe , с ними может быть немного сложнее справиться. В этом уроке мы рассмотрим, как создать фон для видео YouTube для нашего веб-сайта.
Получение HTML для встроенного видео Youtube
Первое, что нам нужно сделать, это получить код встраивания видео YouTube, который мы хотим отображать в фоновом режиме.Просто перейдите к выбранному вами видео и нажмите кнопку «Поделиться».
Появятся несколько вариантов. Нажмите на «вставить».
Это откроет новое окно на вашем экране с кодом для видео, которое вы хотите встроить. Отключите «Показать элементы управления проигрывателем» в параметрах встраивания, а затем нажмите кнопку «Копировать».
Теперь создайте контейнер div и вставьте туда свой код для встраивания.
Мы удалим все ненужные свойства, за исключением control = 0 (свойства width и height также должны быть удалены) Наконец, мы добавим два дополнительных свойства: autoplay = 1 и mute. = 1 .
Конечный результат — видео-контейнер div, который имеет iframe , который содержит источник видео YouTube. Это видео будет автоматически воспроизводиться без звука, когда один из наших пользователей посетит нашу веб-страницу.
Центрирование фона видео YouTube с помощью CSS
Чтобы сделать iframe полностраничным видеофоном YouTube, мы применим некоторые свойства CSS к родительскому видеоконтейнеру , а также к iframe :
Свойства CSS, примененные к родительскому контейнеру, масштабируют его на 100% высоты и ширины области просмотра экрана. iframe , который находится внутри, также масштабируется до 100% высоты и ширины области просмотра экрана. iframe будет иметь абсолютное положение, которое позволит нам разместить iframe именно там, где мы этого хотим.В этом случае он размещается поверх родительского контейнера. Атрибуты позиционирования верхний и левый используются для установки положения верхнего левого угла iframe в центре экрана. Чтобы центрировать фон нашего видео YouTube, мы используем преобразование , чтобы применить отрицательное верхнее поле, равное половине высоты видео, и отрицательное левое поле, равное половине ширины видео. Это смещает iframe относительно элемента (не родительского контейнера), центрируя фон видео YouTube по вертикали и горизонтали.
Делаем наше видео в полноэкранном режиме
Как вы теперь можете видеть, наше видео YouTube размещено в центре экрана, но оно не было масштабировано на всю ширину нашего веб-сайта. Для этого мы будем использовать медиа-функцию с соотношением сторон :
Соотношение сторон — это отношение ширины к высоте области просмотра. 16 : 9 обозначает ширину 16 единиц и высоту 9 единиц. 16: 9 — стандартное широкоэкранное соотношение сторон, используемое в Интернете. Как правило, большинство видео снимается с этим соотношением сторон. Соотношение сторон 16: 9 соответствует 56,25 высоты области просмотра и 177,78 ширины области просмотра. Чтобы получить соотношение 16: 9, мы должны разделить 9 на 16 (0,5625 или 56,25%). Это позволяет браузеру определять размеры видео на основе ширины его родительского контейнера. Это сохранит соотношение сторон видео Youtube, поскольку оно масштабируется в соответствии с фоном веб-страницы.
Добавление текста поверх нашего видео
Текст, который будет отображаться поверх нашего фонового видео Youtube, помещается в отдельный div , например:
Использовать видео YouTube в качестве полноэкранного фона с помощью CSS
CSS применяется к тексту div , чтобы переместить его вместе с любым его содержимым поверх видео:
Мы применили те же свойства CSS, что и для iframe , чтобы центрировать text-div в центре нашей веб-страницы.Вы должны убедиться, что текст, который помещается поверх фона нашего видео YouTube, имеет высокую контрастность, чтобы его можно было легко прочитать.
Вы также можете разместить другие элементы, такие как кнопки наведения, и использовать те же свойства CSS, чтобы разместить их поверх фона нашего видео YouTube.
Добавление опции встроенного цикла Youtube
Если вы используете короткое видео, вы заметите, как связанные видео отображаются после того, как видео будет закончено. Чтобы этого избежать, мы должны использовать небольшую хитрость.Добавление параметра loop = 1 к источнику видео уже недостаточно, нам нужно добавить еще параметр, и это плейлист , которому мы назначим идентификатор видео YouTube.
Итак, если у нас есть это видео, мы должны искать его идентификатор, который является кодом после части / embed / или после ? V = при доступе к видео через YouTube. Затем мы просто вставляем его в наш плейлист param:
& playlist = Yj2iELI6OeI & loop = 1
Наше окончательное встроенное видео должно выглядеть так:
Результат
И вот результат: красивое полноэкранное видео с Youtube!
См. Перо на CodePen.
Заключение
Создание фонового изображения для видео YouTube — одно из самых простых решений, которое поможет вам выделиться среди конкурентов в Интернете. Пользователи, которые заходят на ваш сайт, будут погружены в уникальный визуальный опыт, который не так просто забыть.
Этот метод может быть весьма впечатляющим с полноэкранными видео на веб-сайтах, использующих fullPage.js. Посмотрите этот пример полноэкранного видео!
Теперь, когда вы узнали, как создать фон для видео YouTube, самое время «похвастаться»! Если вы планируете начать бизнес, создание целевой страницы с видео-фоном YouTube будет простым решением, которое в то же время произведет большое впечатление на ваших потенциальных клиентов. Поделитесь с нами своими веб-сайтами, когда закончите.Мы бы очень хотели их увидеть!
Статьи по теме:
Полное руководство по веб-сайту Фоновое видео
Тенденции веб-разработки появляются и исчезают быстро, но некоторые из них настолько сильны, что их невозможно игнорировать. Использование видео в качестве фона веб-страницы — одна из устойчивых тенденций.
Однако следовать трендам ради моды не всегда разумно. Лучший способ — следить за последними тенденциями, но понимать, какую выгоду от этого может получить ваш бизнес.
Итак, мы решили создать настоящее руководство по созданию фонового видео для веб-сайта. Мы надеемся, что это поможет вам решить, действительно ли это нужно вашему бизнесу или вам лучше использовать другие полезные стратегии видеомаркетинга.
Что такое фоновое видео
Определить фоновое видео несложно, поскольку его суть ясна из его названия. Фоновое видео — это фрагмент видеоконтента, который используется в качестве фона вашего веб-сайта. Есть много способов использовать один на веб-странице, а также есть несколько стилей, из которых вы можете выбрать.Самое важное, что нужно знать:
Ваше фоновое видео должно идеально соответствовать дизайну веб-сайта
Иметь четкую цель.
Далее мы расскажем больше о возможных целях использования фонового видео.
Основные цели использования фонового видео
Фоновое видео может помочь вам достичь трех основных целей.
1. Передайте атмосферу
Фоновые видеоролики могут создать особую атмосферу для вашего бизнеса, давая вашим посетителям ощущение погружения в бренд.Это хороший подход для сферы b2b, когда правильная атмосфера способна передать корпоративную серьезность и укрепить профессиональную репутацию.
2. Покажите свой товар или услугу.
В этом случае фоновое видео будет работать как нечто среднее между демонстрационным и поясняющим видео. Это хороший подход для любого продукта или услуги, которые довольно просты в использовании. Например, это будет хорошо работать в интернет-магазине с одним ключевым продуктом или для демонстрации мобильного приложения.В последнем случае зритель может быстро понять суть и быстрее принять решение.
3. Вызвать эмоции.
Большинство покупок мы совершаем под влиянием эмоций и желаний. Первое впечатление, которое мы получаем, почти всегда визуальное. Фоновое видео — это возможность быстро вызвать эмоции и последующее желание до того, как рациональная часть мозга подключится к процессу. Например, этот подход будет хорошо работать для индустрии туризма, когда визуальное впечатление (например, тропический пляж) еще больше усилит желание
Стили фонового видео
Анимированные фоновые видео
Анимированные фоновые видео могут соответствовать практически любой бизнес-цели и корпоративный брендинг.Давайте посмотрим на несколько примеров.
— Мики Моттес — дизайнер и аниматор, поэтому его веб-сайт полностью анимирован. Фон его сайта работает как портфолио, поэтому каждый посетитель может сразу увидеть его творческий стиль.
— Your Plan, Your Planet — научный проект, запущенный Google. Это анимированная целевая страница, и все дальнейшее взаимодействие с сайтом тоже анимировано. Цель проекта — научить всех бережно обращаться с ресурсами. Простая и понятная анимация — хороший способ сделать это.
Преимущества использования анимированного видео в качестве фона:
вы можете сразу показать свой фирменный стиль и сделать его узнаваемым
это хороший способ быстро привлечь внимание к вашему ключевому продукту или показать, как он работает
Анимированные видеоролики создавать проще, чем профессиональные видеоролики с живыми выступлениями.
Видео в реальном времени
Patagonia, продавец товаров для активного образа жизни, использует фоновый фильм, рассказывающий историю человека, который решил стать лучшим альпинистом в мире.Здесь мы видим сочетание фонового видео и хорошо подобранной истории, которая будет интересна целевой аудитории и резонирует с их ценностями.
Project Skin, клиника по уходу за кожей, использует фоновое видео, чтобы задать нужное настроение и сразу показать, какой уровень заботы и дружелюбия ожидает каждую посещающую женщину. Недостатком такого подхода является его стоимость. Реальные видео означают, что вам нужно будет заплатить за аренду места съемки, нанять актеров и инвестировать в профессиональное осветительное и съемочное оборудование и / или нанять полную команду
Стандартные видеоролики для фона веб-сайта
Стандартные видеоролики для фона веб-сайта могут быть как анимированными, так и живыми, но главное понимать, что они не будут иметь прямого отношения к вашему бизнесу.Более того, есть большая вероятность, что выбранное вами видео уже где-то уже используется. Что касается профессионалов, это самое дешевое решение, но это определенно не делает его лучшим решением. Вот причины, по которым индивидуализированные фоновые видео могут быть лучшим выбором для вашего веб-сайта.
Почему нужно настраивать фоновое видео
Стандартное видео никогда не может идеально подходить для вашего бизнеса и может испортить вашу репутацию, если посетитель уже видел его в другом месте. Исследования показывают, что современные пользователи подсознательно ассоциируют некачественный веб-контент с таким же некачественным продуктом или услугой. Качественное видео в качестве фона — это первый шаг к убеждению пользователей в том, что ваш сайт и, следовательно, ваши предложения также достойны их внимания.
Персонализированное видео способно с первых секунд произвести у пользователей правильное визуальное впечатление. 94% первого впечатления связано с дизайном. Индивидуальное фоновое видео — еще один шанс улучшить ваше первое впечатление и побудить пользователя к дальнейшему взаимодействию.
Пользовательские фоновые видео более интересны. Они заставляют пользователей проводить больше времени на странице, демонстрируя хорошие модели поведения, чтобы сделать ваш сайт более надежным, по мнению Google. Google ценит нестандартный и интересный контент, и это верно и для видео.
Настроенное видео в качестве фона может доставить любое сообщение, которое вы хотите. Как мы уже говорили, фоновое видео на вашем сайте может иметь разные цели, что означает, что оно может передавать различные сообщения вашим посетителям — от создания правильного настроения до улучшения вашей репутации с помощью визуальных средств.
Как сделать ваше фоновое видео максимально эффективным
Фоновое видео — довольно мощный маркетинговый инструмент, но его нужно использовать правильно. Вот несколько советов от профессионалов.
Полноэкранные фоновые видео хорошо работают на целевых страницах
Целевая страница требует довольно простой структуры и быстрой загрузки. Здесь вы можете безопасно использовать полноэкранные фоновые видео, не нанося вреда пользователю и не отвлекаясь от их основной цели. Но имейте в виду, что в этом случае ваше фоновое видео должно идеально подходить к дизайну целевой страницы.Должна быть одна общая картинка, в которой видео и другие элементы оформления идеально дополняют друг друга.
Ниже верхнего уровня
Сложные веб-сайты с большой иерархией могут хорошо работать с фоновым видео под верхней панелью и с возможностью его скрытия. Например, вы можете создать фоновый видеоролик, рекламирующий один из самых продаваемых товаров вашего интернет-магазина. Однако это не должно мешать пользователям просматривать и другие продукты. Для этого пользователи должны иметь возможность скрыть видео или приостановить его.
Должны быть контрасты
Между видео и текстом должен быть контраст. Визуальное впечатление имеет решающее значение, но пользователи также должны уметь читать текст. Для этого необходимо продумать дизайн страницы. Обязательно учтите наличие свободного места между разделами видео, текста и навигации.
Учитывайте мобильных пользователей
При добавлении фонового видео важно учитывать возможности мобильных устройств. Статистика показывает, что все больше и больше видеотрафика приходит с мобильных устройств.Это означает, что если вы хотите добавить фоновое видео в мобильную версию своего сайта, вам нужно еще более тщательно продумать мобильный интерфейс. Возможно, имеет смысл скрыть некоторые разделы сайта и отдать видео больший приоритет, но иногда может оказаться эффективной и противоположная стратегия.
Время, которое взрослые проводят за мобильными телефонами
Как создаются фоновые видео
Самое интересное, что не существует универсальной стратегии создания фонового видео.Ваш план действий будет зависеть от вашей цели и результата, которого вы хотите достичь с помощью фонового видео. Вы можете либо добавить его в готовый сайт, либо подумать заранее на этапе разработки. В последнем случае было бы разумно усилить вашу команду разработчиков видео-производственной компанией. Они помогут вам выбрать правильный стиль, разработать маркетинговое сообщение и создать видео, которое идеально подойдет вашему бизнесу, дизайну вашего веб-сайта и настроению, которое вы хотите передать.
Основные ошибки, которых следует избегать при создании фонового видео
Опыт показывает, что чем больше подводных камней вы предвидите, тем эффективнее будет ваше фоновое видео. Вот основные ошибки при создании фонового видео, которые в конечном итоге могут дорого обойтись.
Используется стоковое видео или любое другое видео, которое вы выбираете случайным образом. Об этом мы уже говорили. В лучшем случае стоковые видео не принесут результата. В худшем случае они могут навредить вашему бизнесу и репутации.
Автоматическое воспроизведение звука видео. Пользователи в один голос утверждают, что это одна из самых раздражающих онлайн-ситуаций. Внезапный громкий звук может необратимо убить желание работать с вами, особенно если вы работаете с «чувствительными к тишине» категориями людей, например, с родителями с маленькими детьми.
Ограничение длины. Не стоит ограничивать длину видео. В общем, он может длиться сколько угодно или продолжать повторяться, но при одном условии — это не должно влиять на скорость загрузки страницы.Поэтому также важно выбрать правильный подход к хранению видео. Об этом и поговорим дальше.
Сделать видео более важным, чем удобство использования и наглядность другого контента. Иногда владельцы бизнеса думают, что фоновое видео — это волшебная пилюля для идеального взаимодействия с пользователем. Однако это не совсем так. Наличие видео не должно усложнять интерфейс, мешать поиску или препятствовать легкому доступу к другому контенту на вашем сайте.
Выбор неподходящего разрешения. Большинство фоновых видео имеют стандартный размер HD (1280 × 720), но он также может зависеть от размеров вашего веб-сайта. Лучше всего посоветоваться с дизайнером. Если вы создаете веб-сайт самостоятельно с помощью WordPress или Wix, необходимое разрешение будет зависеть от используемого вами шаблона.
Неправильное решение с хостингом. Можно разместить фоновое видео на том же сервере, что и ваш веб-сайт, или на Youtube, но вам нужно учитывать плюсы и минусы обоих подходов.Если вы решите хранить видео на том же сервере, что и ваш сайт, вам не нужно беспокоиться о потере контроля над ним, но страница может загружаться медленнее. Хранение видео на YouTube или других бизнес-видеохостингах означает обратную ситуацию — быструю загрузку, но всегда нужно надеяться, что сторонний сервис будет работать правильно. Вот наше руководство, которое поможет вам сделать правильный выбор в отношении видеохостинга для бизнеса.
Чрезмерное движение или что-то слишком отвлекающее. Слишком динамичное видео может вызвать головокружение у пользователей, чувствительных к движениям. А что-то слишком отвлекающее может заставить пользователей забыть о своем главном намерении — совершить покупку.
Отсутствие кнопок паузы, остановки или скрытия. Наличие видео может усложнить структуру вашего сайта. Вот почему пользователи всегда должны иметь возможность скрыть или остановить видео и легко двигаться по воронке.
Как добавить фоновое видео на ваш сайт
В принципе, есть несколько способов добавить фоновое видео на ваш сайт:
Добавить фоновое видео HTML CSS на готовый сайт.Вам следует попросить вашу компанию-разработчика сделать это дополнение, поскольку иногда бывает сложно иметь дело с кодом, созданным кем-то другим. Вот отличное видео о том, как добавить видео-фон с помощью HTML и CSS
Если вы собираетесь создать веб-сайт и хотите сделать все возможное самостоятельно, вам следует выбрать конструктор веб-сайтов. который предоставляет подходящий шаблон. Таким образом, будет легко встроить фоновое видео, следуя соответствующим инструкциям.
Если ваш веб-сайт создан на WordPress, вам следует либо добавить специальный плагин, либо переключиться на тему, предназначенную для реализации фонового видео.
Заключение
Фоновые видеоролики эффективны и интересны, если они созданы профессионально и используются в нужное время и в нужном месте. Они будут работать на вашу пользу только тогда, когда будут должным образом встроены в воронку продаж и будут иметь четкую маркетинговую цель. Вот почему будет разумно работать с компанией по производству видео, получить компетентную консультацию о том, действительно ли это нужно вашему сайту, и только потом запускать новый дизайн веб-сайта с поддержкой фонового видео.
Что такое элемент RTF?
Элемент RTF позволяет создавать и форматировать заголовки, абзацы, цитаты, изображения и видео в одном месте, вместо того, чтобы добавлять и форматировать их по отдельности. Просто дважды щелкните и легко создайте контент.
Редактирование статического и динамического содержимого
Элемент форматированного текста может использоваться со статическим или динамическим содержимым. Для статического содержимого просто перетащите его на любую страницу и начните редактирование.
Для динамического содержимого добавьте поле форматированного текста в любую коллекцию
Как настроить форматирование для каждого форматированного текста
Заголовки, абзацы, цитаты, рисунки, изображения и подписи к рисункам могут быть стилизованы после добавления класса в богатый текстовый элемент с использованием системы вложенных селекторов «Когда внутри».
текстовый элемент с использованием вложенной системы выбора «Когда внутри».
Видео фон — отстой. Заблокируйте их со своего сайта • Yoast
«Мне просто нравятся эти видеофоны, и они нужны нам на нашем новом веб-сайте». Нет, не знаешь. «Они такие привлекательные и создают дружеское настроение». Нет, это не так. «Это потрясающая новая функция, которая помогает конвертировать». Нет, это не так. Кроме того, что разговор меня раздражает, видео фоны — отстой. Наш хороший друг Карл Гилис из AGConsult прекрасно сказал об этом: «Видео фоны — это новые слайдеры.Они отвлекают «. И так же, как слайдеры — отстой, и их следует запретить на вашем веб-сайте, так же как и видео фоны.
Зачем это нужно?
Осмелюсь заявить, что видео-фоны были изобретены веб-агентствами, пытающимися убедить клиентов в определенном дизайне:
Эй, это выделит тебя!
Так вот, это действительно задает настроение вашему сайту, не так ли?
Конечно, мы можем создать это видео для вас всего за x долларов дополнительно.
Они будут привлекать внимание ваших посетителей, поэтому время на странице увеличивается, и это хорошо для Google.
Что !? Вы обслуживаете этот сайт не для Google, а для своих пользователей. Вторая причина для видео-фона заключается в том, что все мы однажды сказали: что ж, выглядит неплохо. Мы должны были подумать об этом, прежде чем говорить это. Наши клиенты тоже это видели и теперь хотят этого.
Этот файл GIF, наверное, уже привлек ваше внимание, но фоновые видео хуже, ИМХО. Честно говоря, я не могу придумать никаких дополнительных преимуществ для вашего посетителя.
Почему видео фон — отстой
Подумайте об этом:
Видеофоны увеличивают время загрузки страницы (источник: здравый смысл).
Они отвлекают от основного сообщения / призыва к действию на странице. Даже если эта кнопка или что-то еще ярко-оранжевое, а ваш дизайн монохромный, видео отвлекает!
Они обычно используют видео, размещенные не вами. Но если он не загружается, все равно виноваты вы, и ваш дизайн будет выглядеть как дерьмо.
«Покройте весь экран видео и установите белый текст поверх него в качестве домашней страницы», вероятно, является тенденцией. Давайте положим конец этой тенденции.
Автозапуск — отстой, и как, черт возьми, было бы логично иметь кнопку запуска для фонового видео !? Призыв к действию для вашего фона? Да ладно!
Возможно, они могут работать на очень специфических целевых страницах в очень специфических нишах, в большинстве случаев вы просто повредите конверсии #alwaysbetesting
То, что относится к информационным видео о товарах , не относится к видеофоновым изображениям.Другое дело! Действительно! Вздох.
Как вы думаете, почему на успешных сайтах в Интернете не используются видеофоны? Верно!
Видео-фоны — отстой, и их следует запретить на вашем сайте. Даже со всеми красивыми примерами, приведенными в этой статье: «Что можно и что нельзя делать при использовании фоновых видео на вашем веб-сайте», я все же считаю, что нельзя перевешивать достоинства. И этому посту два года. Почему мы еще не положили конец этой тенденции?
А как насчет тарифных планов мобильной передачи данных и тому подобного?
Да! Теперь, когда мы установили, что вам просто не нужен этот видеофон по какой-либо причине, подумайте, сколько данных у вас останется в конце этого месяца! Вы сможете посмотреть еще одну серию «Ранчо» в дороге.
Нет, серьезно. На вашем мобильном веб-сайте этот видео-фон имеет еще меньше смысла. В этом посте мы говорили о мобильном пользовательском интерфейсе, и видео-фоны не подходят для таких рекомендаций, как «уменьшить его» и «оптимизировать для скорости». Плохая идея. Период.
Миру не нужны видео-фоны
Мы должны где-то начать устранять зло, которое есть видеофоны. Исцели мир, начни в собственном доме. Убедите своих клиентов, что у них есть небольшие преимущества.Покажите им дюжину веб-сайтов, которые либо поддерживают ваши утверждения, либо не могут убедить посетителя использовать его.
