• Создание сайтов в Санкт-Петербурге

    Создание сайтов.

    Санкт-Петербург.

  • Разработка сайтов СПб

    Разработка

    сайтов

  • Продвижение сайтов СПб

    Продвижение

    Раскрутка

  • Сопровождение сайтов в Санкт-Петербурге

    Сопровождение

    созданных сайтов

  • Уникальные дизайны для Ваших сайтов

    Уникальные дизайны

    для Ваших сайтов

  • Техническая поддержка

    Техническая

    поддержка

  • Лучшие сайты для бизнеса

    Лучшие сайты

    для бизнеса!

Бесплатные уроки по HTML . +7 952 213 43 66
Санкт-Петербург

Видео как фон для сайта на HTML5.


video-bg
video-fon video-fon

HTML

Есть класс, в котором будет содержаться параметры видео.
Установим значения автопроигрыванния, добавим несколько вариантов видео-формата, для отображения на различных устройствах:

1<div class="is_overlay">
2 <video width="300" height="150" autoplay="autoplay" loop="loop" poster="/videos/bck.jpg">
3  <source src="/videos/WD0221.mp4.mp4" type="video/mp4">
4  <source src="/videos/WD0221.webmsd.webm" type="video/webm">
5 </video>
6</div>

CSS

Добавляем общие параметры наложения и свечение для фона:

01.box,.page {
02position:fixed;
03top:0;
04left:0;
05display: block;
06width: 100%;
07height: 100%;
08overflow: hidden;
09z-index:999;
10background:rgba(15, 102, 99, 0.5);
11color:white;
12}
13.is_overlay{
14display: block;
15width: 100%;
16height: 110%;
17}
18.is_overlay video {
19position: fixed; right: 0; bottom: 0;
20min-width: 100%; min-height: 100%;
21width: auto; height: auto; z-index: -100;
22background: url(/videos/bck.jpg) no-repeat;
23background-size: cover;
24}

Если Вы уже определились и решились заказать сайт,
то перейдите на страницу заказа или позвоните по телефону
+7 952 213 43 66.