Как вставить видео фоном на сайт | WAVIFUN.RU

Друзья, на нашем сайте происходит работа по смене дизайна и логики. Планируется добавить новые разделы, чтобы сделать его более полезным. В связи с этим в данный момент на сайте не настроена навигация по сайту, но вы всё равно можете читать статьи и получать нужную вам информацию.

На данном ресурсе вы сможете обучиться основам создания сайтов. Здесь вы сможете найти статьи о том как создавать макеты сайтов в программе Photoshop, также научитесь верстать сайты и устанавливать их на Wordpress .

Как вставить видео фоном на сайт

как вставить видео фоном на сайт

Привет любителям-сайтостроителям. Сегодня расскажу о том, как вставить видео фоном на сайт. Для этого есть специальный тег <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, особая благодарность за репост в социальных сетях, если у вас есть вопросы, задавайте через комментарии, обсудим, поможем. Отличного дня всем!