HTML CSS видео в качестве фона блока/страницы

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

Источники:

1. Фиксированное положение на фоне - видео в качестве фона (Creating a fullscreen HTML5 video background with CSS): http://slicejack.com/fullscreen-html5-vi...