Делаем видео фоном сайта — как за 2 шага сделать видео фоном сайта
Фон для сайта бывает различных видов: текстуры, сплошной цвет, изображение и т.д. Но фоном также еще может быть и видео! Не просто статическое изображение, а «25 изображений в секунду». Понятно то, что не любое видео подойдет для этого, но об этом мы поговорим дальше в статье. Также рассмотрим сам процесс установки, то есть как сделать видео фоном сайта с технической стороны.
Если сейчас работаете над созданием одностраничного сайта, то рекомендуем посмотреть 10 примеров продающих лендингов с полным руководством по его созданию:
Живая демонстрация того, как на фоне сайта располагается видео:
Посмотреть примерСкачать
Скриншот с примером:
Как сделать видео фоном сайта или лендинга?
1 HTML структура
Определимся со структурой. Мы будем использовать теги HTML5 для вставки видео:
Оба дочерних блока будут находится в абсолютном позиционировании и в блоке с классом «overlay» мы можем располагать всю информацию, которая обычно находится в первом экране любого лендинга.
2 CSS стили
Осталось правильно задать стили, чтобы видео оказалось именно на фоне первого блока:
Здесь я привел стили только для первого блока на странице. В исходниках Вы можете найти стили полностью для всего демо.
Но так как интернет на мобильных устройствах по скорости уступает настольных компьютерам, то для ширины экрана менее 786px мы не будем показывать видео, а покажем лишь изображение:
Где взять красивые видео для фона сайта?
Рекомендую следующие видеостоки (список обновлен в октябре 2019):
После скачивания обязательно переконвертируйте видео, чтобы уменьшить его размер.
Также добавьте данную статью в закладки «CTRL+D», чтобы видеостоки были всегда под рукой.
Вывод
Установка в 2 шага. Вам лишь нужно скопировать HTML и CSS в нужное место. Но правильно подобранное видео смотрится очень красиво.
Видео на фоне хоть и не интерактивный элемент, но внимание привлекает. Чтобы еще больше завлечь своих посетителей — рекомендую изучить статью по квизам.
Позиции сайта не растут в Яндекс и Google?
Закажите полный разбор сайта по SEO + консультацию
Сделайте аудит своего сайта самостоятельно с помощью сервиса
10 сайтов с фоновым видео на главной странице
Как привлечь к сайту внимание? Уникальный контент, конечно, очень важен, ну а дизайн может удивить пользователя и сделать так, что ваш ресурс запомнится ему надолго.
Чего только не придумывают, чтобы сделать главную страницу сайта оригинальной! Большие картинки, стильные призрачные кнопки, нестандартные шрифты…
Сегодня Freelance.Today хочет показать вам десяток сайтов, создатели которых пошли еще дальше, разместив на главной странице фоновое видео. Пусть такой ресурс будет загружаться дольше, но оно того стоит!
Сайт маркетинговой компании, основная деятельность которой – раскрутка брендов. Стоит отметить, что, зайдя на такой сайт, клиент сразу поймет, что имеет дело с креативными людьми.
Компания, которой принадлежит сайт, позиционирует себя как надежных цифровых партнеров для брендов и торговых марок. Стоит отметить, что с креативом у них тоже все в порядке.
Сайт с магазином, где продаются работы художников. На видео, которое идет на главной странице, можно понаблюдать за работой мастеров.
Этот ресурс помогает осуществлять мечты тем, кто хочет запустить стартап, но не имеет для этого денег и возможностей. А вот у владельцев сайта возможности есть, да и нестандартными идеями, как видим, они тоже не обижены.
Это сайт независимого рекламного агентства, которое разрабатывает рекламные кампании для клиентов, в том числе занимается и съемкой роликов.
Что это за место – понятно из названия. Компания занимается неймингом, созданием и раскруткой брендов.
Сайт «маленького креативного агентства с Мальты».
Этот ресурс вообще сделан очень интересно. Прогуляйтесь по страницам – для веб-разработчиков он может послужить примером по-настоящему модного, современного ресурса, в котором воплощены все основные тенденции этого года.
Сайт, на котором можно найти место для ночлега в более чем 190 странах мира.
И известный всем Vimeo – хостинг для видео, также может похвалиться нестандартной главной страницей.
Что дает использование такого тренда?
Есть минус, о котором я уже писала – сайт долго загружается, и это может раздражать тех, у кого маленькая скорость интернета.
Но плюсов все-таки больше.
— динамическая главная страница – это «писк моды» в этом году;
— фоновое видео на главной странице привлекает взор, задерживает пользователя на сайте, заинтересовывает в услугах компании, особенно если они связаны с креативом;
— фоновое видео делает дизайн сайта стильным и современным, не надоедающим.
Для тех, кого заинтересовало создание таких страниц – вот здесь рассказывается, как это сделать при помощи HTML5.
Надеемся, наша статья послужит для вас источником вдохновения и новых идей!
Два способа сделать видеофон для сайта
Небольшие видеоролики можно установить в качестве видеофона заголовка на главной странице сайта или интернет-магазина вместо привычного изображения. Тем самым мы оживим страницу подвижным и нескучным элементом, привлекающим внимание наших посетителей.
Если мы нацелены на активное продвижение своего продукта, то не стоит оставлять без внимания видео презентации. Видеоклип может быть коротким, но достаточно информативным и привлекательным.
Пожалуй, одним из самых ярких примеров использования видео заставки в одном из блоков главной страницы, является сайт клининговой компании Eagleclean (eagleclean.co.uk — раздел Our services). Оригинальное видео способно создать атмосферу доверия к компании и воздействует на визуальную память потенциального клиента.
Как сделать видеофон для сайта
Использование видео на сайте — это увеличение времени на загрузку страницы. Поэтому видеоролик необходимо сжать перед размещением. Лучше сделать его коротким и с плавным переходом от начала к концу, чтобы в режиме автоматического проигрывания не было заметно где начало видео, а где его конец.
Видеофон с YouTube
Один из удобных способов добавления видео в качестве фона страницы — воспользоваться видеороликами с YouTube. В этом случае нам не нужно будет создавать разные форматы видео для всех браузеров. Перед загрузкой видеофона желательно разместить изображение, которое будет показано посетителю пока видео окончательно загрузится.
Мы можем вставить видео с помощью iframe-кода, но чтобы применить различные настройки воспроизведения воспользуемся jquery плагином YoutubeBackground. Это обертка для Youtube API — он отлично подходит для полноэкранных фоновых видео или обычных видеороликов.
Данный пример видеофона можно использовать в заголовке сайта или в любом другом блоке страницы. Если немного изменить CSS, то видеофоном можно полностью замостить всю страницу.
Создайте файл video-background.js и скопируйте код с вкладки JS из этого блока:
Загрузите файл на хостинг в папку JS. Если это сайт WordPress, подключите скрипт к вашей теме. Для этого скопируйте этот код в functions.php.
Если это HTML сайт, добавьте в футер этот код:
В этом участке скрипта замените ID видео на свой. ID — это конец ссылки видео на YouTube (https://youtu.be/X_LrrqVrLe4)
Теперь с вкладки HTML скопируйте код блока с видеофоном и вставьте его там, где это необходимо. Создайте подходящее изображение, которое будет появляться раньше, чем видеоролик. С вкладки CSS скопируйте стили в свой файл.
Видеофон для сайта HTML5
В этом примере мы уже не используем скрипты, а только HTML и CSS. И чтобы видео заставки могли воспроизводиться во всех браузерах, необходимо сконвертировать их в трех форматах: mp4, webm и ogv. Параметр loop=«loop» — позволяет видео проигрываться по кругу, autoplay=«autoplay» — автоматическое проигрывание, muted=«» — со звуком или без.
See the Pen Video Background Header CSS by Natali Mambetova (@nalitana) on CodePen.light
Если у вас сайт Worpress, добавляйте HTML-код в виджет или на любую страницу через визуальный редактор.
Где брать шаблоны для создания видеороликов?
Моя небольшая подборка сайтов с качественными видео материалами для создания промороликов и видеофонов.