Как лучше поместить видео в фон страницы

Действительно, как лучше разместить блок с видео. Берем плагин Video-Backgrounds-tubular и обнаруживаем, что разработчики использовали блок с параметрами position: fixed; z-index: 50; Здесь только ссылки на демо страницу (на хостинге tmweb.ru), на демо плагина ... и фрагменты кода плагина.

my demo player

Demo jQuery-Plugin-For-Fullscreen-YouTube-Video-Backgrounds-tubular¶

In [ ]:

%%html
<style>

/**/
.tubular-container {
    overflow: hidden;
    position: fixed;
    z-index: 50;
   /* width: 100%;
    height:100%; */
}
/*animtion layer_1 - top-cover in the stack of lays*/
.tubular-shield_1 {
   /* width: 100%;
    height: 100%; */
    z-index: 100;
    position: absolute;
    left: 50px;
    top: 10px;
    font-size: 26px;
    line-height: 28px;
    font-weight: normal;
    letter-spacing: -1px;
    color: #fff;
    /* background-color: yellowgreen; */
}
/*animtion layer_2 - first after .body in the stack of lays*/
.tubular-shield_2 {
   /* width: 100%;
    height: 100%;*/
    z-index: 100;
    position: absolute;
    left: 10px;
    top: 50px;
    font-size: 26px;
    line-height: 28px;
    font-weight: normal;
    letter-spacing: -1px;
    color: #fff;
    /* background-color: yellowgreen; */
}
/*main content*/
.wrapper {
    position: relative;
    z-index: 99;
    width: 960px;
    margin: 0 auto;
    padding: 48px 0 72px;
}
</style>

In [17]:

%%html
<style>

.red { border: solid 5px red; background-color:#777;}
.orange { background-color:orange;}
.yellow { background-color:yellow;}
.green { background-color:green;}
.blue { background-color:blue;}
</style>

In [3]:

%%html
<style>
.size100{width:300px; height:200px; }
.size100{width:100%; height:100%; }
.size1{width:200px; height:100px; }
</style>

In [28]:

%%html
<style>
.body{
    position:relative;
    opacity:0.8;
}
</style>

In [27]:

%%html
<style>
.tubular-container {
    left:140px;
    top: 50px;
    z-index: 1px;
    position: relative;
}
.tubular-shield_2 {
    left:0px;
    top: 0px;
    z-index: 1px;
    position: absolute;
}
</style>

In [4]:

%%html
<div class="body red sizebody">

<div class="tubular-container orange size1">The first with video</div>
<div class="tubular-shield_1 yellow size1">The second on the video</div>
<div class="tubular-shield_2 green size1">Third - under the vieo</div>
<div class="wrapper">Main content of the post</div>
</div>

The first with video

The second on the video

Third - under the vieo

Main content of the post

Посты чуть ниже также могут вас заинтересовать