Как вставить видео фоном на сайт
Привет любителям-сайтостроителям. Сегодня расскажу о том, как вставить видео фоном на сайт. Для этого есть специальный тег <video></video>, который позволяет нам без проблем вставить видео фоном на наш сайт.
Синтаксис
<video> <source src="URL"> </video>
У тега <video></video> есть свои атрибуты
| Атрибут | Значение атрибута |
|---|---|
| width | Задает ширину области для воспроизведения видеоролика. |
| height | Задает высоту области для воспроизведения видеоролика. |
| autoplay | Автоматическое воспроизведение видео после загрузки страницы |
| loop | Повтор воспроизведения видео после его окончания |
| src | Путь к видеоролику |
| poster | Адрес картинки, которая отображается, пока не началось воспроизведение видео |
| preload | Используется для загрузки видео вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay |
| controls | Добавляет кнопки, например "Play", "Stop", "Next" и т.д. |
<video width="300" height="300" autoplay="autoplay" controls="controls" loop="loop" poster="url_of_poster" preload="metadata"> <source src="url_of_video"> </video>
Конечно же не обязательно применять все атрибуты тега <video></video>, всё будет зависит от того, какая задача стоит перед вами.
Посмотрите пример фонового видео на сайте
Также посмотрите живой пример на сайте
Далее рассмотри данный пример изнутри.
Сначала напишем html:
<div class="main"> <video class="video" autoplay="autoplay" loop="loop"> <source src="video/Laptop - 3160.mp4" type="video/mp4" /> </video> <div class="header"> <div class="brand"><a href="/">WAVIFUN</a></div> <div class="icon"><a href="/"><img src="images/icon.png"></a></div> <div class="description">ВСЁ ДЛЯ САЙТА И САЙТОСТРОЕНИЯ</div> </div> </div>
Здесь мы добавили тег видео с классом «video». При помощи «autoplay» мы указали автоматическое воспроизведение видео. При помощи атрибута «loop» наше видео будет постоянно проигрываться. Далее в теге <source></source> мы указали адрес видеоролика и при помощи атрибута «type» указали видеокодек.
Далее мы прописали блок с классом «header», в котором находится название, описание и иконка сайта. И всё это обернуто в блок с классом «main».
Рассмотрим CSS
.main {
width: 100%;
max-width: 1920px;
max-height: 1080px;
height: auto;
overflow: hidden;
}
.video {
height: auto;
max-width: 1920px;
width: 100%;
background-size:100%;
z-index: -100;
position: absolute;
}
.header {
width: 25%;
float: left;
background: rgba(0,0,0,0.65);
height: 100%;
height: 760px;
border-right: 2px solid #fff;
}
Для класса «main» мы прописываем ширину равной 100 процентам, а также указываем высоту, которая выставляется автоматически.
Вообще все эти настройки связаны с задуманным проектом. Идея заключается в том, чтобы сделать фоновое видео на весь экран, а весь контент отображался бы на этом фоне.
Далее для класса «video» мы указываем также ширину и максимальную ширину, высоту и, самое главное, абсолютное позиционирование и отрицательный z-index. Отрицательный z-index позволит нам отображать контент на фоне видеоролика.
Для блока с классом «header», который отображается слева, мы, в первую очередь, должны указать ширину и фон черного цвета с прозрачностью 65%. Это делается при помощи свойства «background» и указанием цвета при помощи «rgba».
Отличные видеоролики для ваших проектов вы можете найти на сайте PIXABAY
На этом все, дорогие друзья, если вам понравилась статья, ставьте LIKE, особая благодарность за репост в социальных сетях, если у вас есть вопросы, задавайте через комментарии, обсудим, поможем. Отличного дня всем!