Видео на заднем фоне сайта или рекламного блока несомненно привлечет внимание пользователей к товару или услуге, которую оно представляет: динамичная картинка всегда смотрится намного лучше статики. И если, заглянув сюда, вы думаете, что сделать это очень сложно, то спешу вас обрадовать: процесс создания видео — бэкграунда для сайта очень простой и потребует минимального вмешательства в код.
Итак, приступим.
Допустим, у нас есть блок c текстом, в котором нужно cделать видео в качестве заднего фона:
Разметка блока:
Видеозаставка
/*Запускаем видео при загрузке страницы, зацикливаем его и отключаем звук*/
waves.mp4 » type=»video/mp4″> /*путь к ролику для фона*/
css — cтили для блока и фонового видео:
.block position: relative;
background:#000;
overflow: hidden; /*обрезаем видео при выходе за пределы блока*/
height: 400px;
width: 100%;
z-index: 3>
p font-size: 70px;
How To Design A YouTube Clone With HTML/CSS
color: white;
text-align: center;
padding: 5%;>
.play width: 100%;
z-index: -2;
top:0px;
position: absolute>
Далее необходимо создать перекрывающий слой — overlay, чтобы текст над видео хорошо читался.
Сделаем его с помощью псевдоэлемента before:
.block:before background: rgb(57 53 53 / 71%);
content: «»;
position: absolute;
width: 100%;
height: 500px;
z-index: -1>
Т. к. при разрешении ниже 730px видео перестанет перекрывать блок по высоте, то его можно просто отключить с помощью медиа — запроса:
В итоге, код блока с видео будет таким:
Чтобы сильно не снизилась скорость загрузки сайта, размер видео не должен быть больше 1-3 Мб, а продолжительность ролика — дольше 40 секунд. Так же должен быть хороший контраст между текстом и перекрывающим слоем.
Следует обратить внимание, что ролики не воспроизводятся на устройствах Apple, поэтому у блока обязательно должна быть картинка — бэкграунд.
На этом все. Надеюсь, что статья была вам полезной!
ДЕМОСКАЧАТЬ
Средняя оценка / 5. Количество оценок:
Оценок пока нет. Поставьте оценку первым!
Источник: coderistu.ru
Видео для фона сайта на HTML5 
Все чаще я замечаю использования видео для фона сайта, дизайнеров уже не смущает такой нюанс как весомость сайта, с современным интернетом такой вопрос уже не стоит остро, по этому дизайнеры разрешают себе фантазировать в любых направлениях, не является и исключением «живые» фоны сайта, а именно использование видео в качестве фона. В данном уроке мы рассмотрим один из замечательных примеров реализации фонового видео в виде морской глубины с помощью небольших манипуляций HTML5.
Embed ANY YouTube Video and Autoplay it in HTML
За идею у нас взята картинка глубины, для тех случаев, когда устройством попросту не поддерживается такая функция проигрывания, если все же браузер сможет такое отобразить, то тут подхватит действия заранее подготовленное видео с соответствующим форматом. И так, давайте приступим.
Шаг 1. HTML
У нас будет класс, в котором будет содержаться параметры видео, мы установим значения автопроигрыванния, также добавляем несколько вариантов видео-формата, для отображения на разных устройствах:
Также мы добавили подготовленное ранее нами изображение, о котором мы писали немного выше.
Шаг 2. CSS
Теперь приступим к стилям,их у нас не так уже и много, нам необходимо отобразить общие параметры наложения и небольшого свечения для нашего видео-фона:
.box,.page < position:fixed; top:0; left:0; display: block; width: 100%; height: 100%; overflow: hidden; z-index:999; background:rgba(15, 102, 99, 0.5); color:white; >.is_overlay < display: block; width: 100%; height: 110%; >.is_overlay video < position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(/videos/bck.jpg) no-repeat; background-size: cover; >
Источник: s-sd.ru
HTML CSS видео в качестве фона блока/страницы
Принцип «задвигания» видео на фон блока или страницы в рассматриваемых ниже примерах всегда искусственный, а именно — используется свойство z-index, с помошью которого блок искусственно загоняют под остальные.
В обоих примерах для блока видео используется контейнер
Фиксированное положение на фоне
(один вариант формата, один файл)
(несколько вариантов формата):
.fullscreen-bg < position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; >.fullscreen-bg__video
Относительное позиционирование блока с видео на фоне — фон выбранного блока
Другая проблема — и другой пример, ситуация когда мы хотим сделать видео фоном не страницы, а конкретного относительно позиционированного блока, в этом случае содержимое этого блока, которое должно быть сверху позиционируем абсолютно:
Обо мне
какой-то текст тут и здесь
О системе
.fullscreen-bg < top: 0; right: 0; bottom: 0; left: 0; z-index: -100; >.fullscreen-bg__video
Следует отметить, что этот второй случай можно применить в рамках twitter bootsrap, хотя возможны некоторые проблемы с позиционированием элементов внутри контейнера (не являюсь тут специалистом), но как «оперативное» решение вполне может подойти.
- Фиксированное положение на фоне — видео в качестве фона (Creating a fullscreen HTML5 video background with CSS): http://slicejack.com/fullscreen-html5-vi.
Key Words for FKN + antitotal forum (CS VSU):
- html video as backgroud
- mp4 as background
- css video as background example current block div relative — not fixed
- twitter bootstrap video as background — quick solution example CSS HTML
- CSS видео на фон
- CSS HTML видео на фон сайта
Источник: fkn.ktu10.com