Как сделать видео в качестве фона сайта
В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (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-код для видео.
Полный код страницы с установленным видео в качестве фона сайта:
Видео в качестве фона сайта - Нубекс .overlay #nubexDiv < top: 0; bottom: 0; left: 0; right: 0; position: fixed; overflow: hidden; >#nubexVideo Здесь мы, по-сути, добавляем блок с видео с помощью HTML, и с помощью CSS растягиваем его на весь экран.
Видео в качестве фона для сайта на HTML5+CSS
На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.
Рекомендации
Если вы твердо убеждены, что хотите установить видео для фона на сайте, необходимо знать кое-какие нюансы:
- Во-первых, нужно обязательно помнить о том, что видеоролик имеет довольно большой вес. Это может негативно сказаться на скорости загрузки страницы, особенно если у пользователя медленный интернет. Поэтому выбирайте не слишком продолжительные по времени видеоролики. В случае, когда требуется использовать довольно длинное видео, будьте готовы либо к работе над уменьшением его веса, либо к тому, что придется жертвовать частью аудитории.
- Во-вторых, избегайте автовоспроизведения звука из видео. Используйте либо ролики без аудио, либо добавьте возможность пользователю самому включить звук, если ему это понадобится. Автоматическое воспроизведение звука при открытии сайта считается очень дурным тоном.
- В-третьих, нужно позаботиться о кроссбраузерности и корректном отображении и воспроизведении видео на всех устройствах, а также предоставить альтернативу видео (для тех случаев, если оно не воспроизведется). Ниже в нашем примере мы покажем, как это сделать.
- И в-четвертых, стоит хорошо подумать, уместен ли видеофон на том сайте, где вы захотели его установить, поскольку очень легко переступить грань между оригинальностью и бесполезностью данной затеи. Видео ни в коем случае не должно отвлекать пользователя от его главной цели, по причине которой он пришел на сайт. Устанавливая видео-фон под текстовым содержимым, не забудьте проверить, насколько читабельным стал текст. Например, он может слиться с фоном в определенный момент проигрывания видеоролика (белый текст на белом фоне, черный на черном и т. п.).
1. HTML
Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока с идентификатором video-bg находится наш фон:
Для тега указаны следующие атрибуты:
- width – ширина области для воспроизведения ролика;
- height – высота области;
- preload – загрузка видео вместе со страницей;
- autoplay – автоматическое воспроизведение видео;
- loop – циклическое повторение видео;
- poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно.
Далее у нас записано два тега , где указаны URL-адреса видео в разных форматах – MP4 и WEBM. Зачем подключать ролик в нескольких форматах? Дело в том, что не все браузеры поддерживают один-единственный формат видео. Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл хотя бы в этих двух форматах. А атрибут type с соответствующими значениями помогает браузеру быстрее определиться с выбором.
2. CSS
Наша таблица стилей для фона выглядит следующим образом:
#video-bg < position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 1; background: url(bg/daisy-stock-poster.jpg) no-repeat #94a233; background-size: cover; >#video-bg > video < position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; >@supports (object-fit: cover) < #video-bg >video < top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; >>
Как видно из кода, фон установлен на всю страницу, а в качестве запасного фона задано изображение (кадр из этого же видео). В самом крайнем случае будет задействован цвет фона #94a233 .
Также в коде есть директива @supports , которая проверяет, поддерживает ли браузер свойство object-fit . Если да, то фон принимает значение cover и пропорционально отображается при разных размерах экрана.
Согласно данным с сайта caniuse.com, на сегодняшний день свойство object-fit поддерживается всеми браузерами, кроме Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android Browser 4.1-4.4.
Вот и всё. Надеемся, данный урок принес вас пользу. Если у вас есть другие интересные и простые способы установки видео в качестве фона для сайта и вы хотите поделиться ими, пишите в комментариях!
Делаем видео фон на чистом HTML+CSS
Приветствую, друзья, на страницах WebDevTips. Все мы привикли, что для фона на сайте можно использовать картинки, градиент и т.д. Но ещё можно использовать и видео! В этом уроке разберем, как сделать видео фон для сайта на чистом HTML + CSS. Так же ниже вы можете увидеть сам код. Что бы добавить видео фон на ваш сайт — достаточно просто скопировать код и изменить путь к файлам. Установка максимально простая. А для тех, кто хочет узнать больше — рекоменудю помотреть полное видео с объяснением.
Вот и сам HTML, CSS код:
Video Background @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); body < font-family: 'Poppins'; margin: 0; padding: 0; >.video-bg < height: 100vh; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; >.video-bg video < position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; object-fit: cover; >.effects < position: absolute; object-fit: cover; top: 0; left: 0; z-index: 2; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.6); >.video-bg__content < z-index: 2; color: #ffffff; font-size: 50px; >.main
Если кому понравиться видео, брал его тут — pixabay. Кстати, видео с данного сайта вы можжете использовать в коммерческих целях, без указание авторства.
Спасибо, что прочли. Надеюсь, я помог вам разобраться, как же сделать видео фон для сайта, используя только HTML и CSS. Если у вас остались любые вопросы — смело задавайте их в комментариях на сайте или под видео.
Или просто зайдите на главную , и найдите полезную статью для себя.
Семенюк Назарий
Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)
Как сделать видео фоном сайта
Наверняка многие из вас задумывались о том, как добавить динамичности своему сайту, но не могли внести какие-либо глобальные изменения из-за того, что это сложно. В этой статье мы расскажем вам как сделать видео фоном сайта за 10 минут.
Несколько живых примеров:
popvideo.com/our-work
nyccorporatevideoproduction.com
Вставка видео в фон сайта может придать динамичности вашему сайту и тем самым заинтересовать пользователя. Однако у этой затеи есть и негативные стороны. Во-первых, видео фон увеличивает вес сайта, что влияет на время загрузки сайта. Поэтому лучше заменить видео на простую картинку для тех, кто заходит с телефона или планшета. Во-вторых, видео должно быть качественное, что тоже может стать проблемой. Однако эти проблемы решаемы, пусть и частично.
Как сделать видео фоном сайта
Сделать фоном видео очень просто. Для этого необходимо:
-
Вставить код в html:
div class="fullwidth-bg"> div class="video-layer"> h1>Заголовокbr>для фонового видео на сайтеh1> div> video loop muted autoplay poster="/uploads/video-bg-alt.jpg" class="fullscreen-bg__video"> source src="/uploads/video.mp4" type="video/mp4"> source src="/uploads/video.webm" type="video/webm"> video> div>.fullwidth-bg position: relative; height: 100%; width: 100%; padding-top:45%; overflow: hidden; z-index: -100; > .fullwidth-bg__video position: absolute; top: 0; left: 0; width: 100%; > .video-layer background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5; > .video-layer h1 text-align:center; color:#fff; font-size: 70px; margin-top:17%; > @media (max-width: 767px) .fullwidth-bg background: url('/uploads/video-bg-alt.jpg') center center / cover no-repeat; > .fullwidth-bg__video display: none; > >Как выбрать и подготовить видео для фона сайта
Одна из проблем с подбором видео для фона сайта связана не только с самим подбором, но и с авторскими правами. Поэтому к поиску видео следует отнестись серьёзно. Ниже представлен список ресурсов, где вы можете найти и скачать подходящее бесплатное или платное видео:
Также необходимо учитывать, что для кроссбраузерности следует добавлять видео в нескольких форматах, а именно .mp4 и .webm
Вот русскоязычный ресурс (softcatalog.info/ru/obzor/konvertery-video), на котором можно скачать программы для конвертирования видео в нужный формат.
Как добавить видео фоном в шаблон Moguta CMS
Куда вставлять файл видео, HTML-код и CSS-стили в шаблоне Moguta:
- Сам файл видео через хостинг загружаем в папку uploads;
- Через административную панель проходим путь — Настройки — Шаблон — template.php;
- Допустим, мы решили вставить видео сразу после шапки сайта. Ищем начало следующего блока и туда вставляем код:
div class="fullwidth-bg"> div class="video-layer"> h1>Заголовокbr>для фонового видео на сайтеh1> div> video loop muted autoplay poster="/uploads/video-bg-alt.jpg" class="fullscreen-bg__video"> source src="/uploads/video.mp4" type="video/mp4"> source src="/uploads/video.webm" type="video/webm"> video> div>
.fullwidth-bg position: relative; height: 100%; width: 100%; padding-top:45%; overflow: hidden; z-index: -100; > .fullwidth-bg__video position: absolute; top: 0; left: 0; width: 100%; > .video-layer background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5; > .video-layer h1 text-align:center; color:#fff; font-size: 70px; margin-top:17%; > @media (max-width: 767px) .fullwidth-bg background: url('/uploads/video-bg-alt.jpg') center center / cover no-repeat; > .fullwidth-bg__video display: none; > >
Теперь у вас есть вся необходимая информация, чтобы узнать как вставить видео фоном сайта. Если у вас будут какие-либо вопросы — пишите нам в группу или в комментарии ниже, до новых встреч!
- Плавное подчеркивание ссылок для сайта
- Как установить reCAPTCHA на сайт
- Как подключить новый шрифт на сайт