HTML CSS видео в качестве фона блока/страницы
Primary tabs
Forums:
Принцип "задвигания" видео на фон блока или страницы в рассматриваемых ниже примерах всегда искусственный, а именно - используется свойство z-index, с помошью которого блок искусственно загоняют под остальные.
В обоих примерах для блока видео используется контейнер
Фиксированное положение на фоне
HTML:
(один вариант формата, один файл)
<div class="fullscreen-bg" > <video loop muted autoplay poster="img/tiger.jpg" class="fullscreen-bg__video"> <source src="video/tiger.mp4" type="video/mp4"> </video> </div>
(несколько вариантов формата):
<div class="fullscreen-bg"> <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"> <source src="video/big_buck_bunny.webm" type="video/webm"> <source src="video/big_buck_bunny.mp4" type="video/mp4"> <source src="video/big_buck_bunny.ogv" type="video/ogg"> </video> </div>
CSS:
.fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Относительное позиционирование блока с видео на фоне - фон выбранного блока
Другая проблема - и другой пример, ситуация когда мы хотим сделать видео фоном не страницы, а конкретного относительно позиционированного блока, в этом случае содержимое этого блока, которое должно быть сверху позиционируем абсолютно:
<!--блок, фоном которого должно быть видео видео--> <section id="about" style="padding: 0px;"> <!-- содержимое, под которым должно быть видео - позиционируется абсолютно, чтобы нижний блок видео нырнул под него --> <div class="container" style="position: absolute; padding: 50px;"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading" style="color: #fff">Обо мне</h2> <hr class="light"> <h3 class="section-heading" style="color: #fff; font-weight: bold;"> какой-то текст тут и здесь </h3> <br> <a href="#info" class="btn btn-default btn-xl page-scroll">О системе</a> </div> </div> </div> <!-- само фоновое видео --> <div class="fullscreen-bg"> <video loop muted autoplay poster="img/tiger.jpg" class="fullscreen-bg__video"> <source src="video/tiger.mp4" type="video/mp4"> </video> </div> </section> <!-- конец блока -->
CSS:
.fullscreen-bg { top: 0; right: 0; bottom: 0; left: 0; z-index: -100; } .fullscreen-bg__video { overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; }
Следует отметить, что этот второй случай можно применить в рамках twitter bootsrap, хотя возможны некоторые проблемы с позиционированием элементов внутри контейнера (не являюсь тут специалистом), но как "оперативное" решение вполне может подойти.
Источники:
- Фиксированное положение на фоне - видео в качестве фона (Creating a fullscreen HTML5 video background with CSS): http://slicejack.com/fullscreen-html5-vi...
- Log in to post comments
- 11381 reads