Bom estou utilizando HTML5
que por sua vez possui uma tag chamada <video>
só que estou tendo muitas dificuldades para utilizar o meu vídeo no header do meu site pois não consigo manipular meu vídeo corretamente gostaria que meu vídeo fica-se como o desse site
eu ate consigo porem eu tenho que colocar os valores da altura no meu código logo se pego uma tela menor o vídeo fica grande se coloco numa tela maior meu vídeo fica pequeno percebam que o vídeo desse site ai ele e auto ajustável ele e sempre 100% de largura e altura segue um exemplo da forma que eu fiz porem nao muito certa pois chumbar valores de altura com a tag transform:scale();
eu acho que é errado:
header {
position: relative;
top: 0;
overflow: hidden;
width: 100%;
height: 90%;
min-height: 850px;
}
video {
height: 760.4375px;
width: 100%;
z-index: -10;
top: 0;
left: 0;
-webkit-transform: scaley(1.72);
-o-transform: scaley(1.72);
-ms-transform: scaley(1.72);
-moz-transform: scaley(1.72);
transform: scaley(1.72);
z-index: -2;
position: absolute;
}
#bg-video {
overflow-y: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/overlay.png);
z-index: 1
}
.texto-header {
position: absolute;
top: 20%;
left: 50%;
margin-left: -280px;
width: 630px;
text-align: center;
z-index: 2;
color: #FFF;
}
.texto-header h1 {
font-family: Gabriola;
font-size: 4em;
}
.texto-header strong {
color: #f80;
}
.texto-header p {
/*font-family: 'Scada', sans-serif;*/
font-family: Gabriola;
font-size: 1.2em;
line-height: 20px;
margin-top: -5%;
}
.texto-header a {
color: #fff;
background: transparent;
border: 2px solid #fff;
padding: 13px;
font-family: Gabriola;
font-size: 1.2em;
border-radius: 5px;
}
.texto-header a:hover {
color: #000;
background-color: #fff;
}
<header>
<div id="video">
<video id="Video1" class="bgvid" loop autoplay>
<source src="video/League-warrios.mp4" type="video/mp4" />desculpe mais seu navegador não suporta este formato ou esta desatualizado :(
</video>
</div>
<div id="bg-video"></div>
<div class="texto-header">
<h1>Olá amigos somos a <strong>Nova Era !</strong></h1>
<p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
<br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
<br/>
<a href="#circulo">Então podemos começar ???</a>
</div>
</header>
OBS: O meu vídeo possui um background igual o do site mencionado acima que se chama overlay e não me importo se tiver que manipular o vídeo via java script pois já não sei mais oque fazer para chegar no resultado que desejo