<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать видео в качестве фона сайта на HTML5. (1/2).

Как сделать видео в качестве фона сайта на HTML5. (1/2).

Всем привет! В этой статье мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на HTML5.

Итак, как всегда, начнем со структуры.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 видео в качестве заднего фона</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <video autoplay loop muted class="bgvideo" id="bgvideo">
   <source src="video.mp4" type="video/mp4"></source>
  </video>
</body>
</html>

Думаю, тут все ясно. Запускаем видео сразу при загрузке страницы, зацикливаем его, чтобы оно никогда не останавливалось, и отключаем звук.

Перейдем к стилям

body {
  background: url('video.png');
  background-size: cover;
}

.bgvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -9999;
}

Тут тоже нет ничего сверхестественного. Для видео мы задаем ширину и высоту по 100%, делаем выравнивание видео по правому нижнему краю и задаем свойство z-index отрицательным, чтобы текст и другие элементы могли отображаться поверх видео.

Если, вдруг, видео не будет отображаться, то мы отобразим картинку, которую мы задали для тега body.

На этом я заканчиваю первую часть. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

ababiy ababiy 04.10.2014 05:46:40

Можно ли выкладывать демку к статье?

Ответить

php_programmer php_programmer 05.10.2014 22:49:03

Здесь все очень просто, 2 копипаста и смотрите демку у себя. Если будет что-то очень сложное, то, конечно, будет демка.

Ответить

Aleksckjy Aleksckjy 16.05.2015 14:38:00

СПАСИБО!

Ответить

TagirRet TagirRet 01.09.2015 11:48:02

Да уж ...я на profipages два дня мучился с этим кодом, а оказалось, что там уже встроен функционал такой. Нужно было просто ввести ссылку на видео в определенное поле)))

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.