I have a video in html5
at the top of the page and then a menu below it that should be fixed as we scroll the page like this > site here .
But I do not know the correct way to do this, remembering that this has to work in all browsers including Internet Explorer:
The following is my code:
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
@import url(http://fonts.googleapis.com/css?family=Scada);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
button {
cursor: pointer;
outline: none;
}
ul li {
list-style-type: none;
}
header {
position: relative;
top: 0;
overflow: hidden;
width: 100%;
height: 90%;
min-height: 800px;
}
video {
height: 710.4375px;
width: 100%;
z-index: -1;
position: absolute;
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;
}
#bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/overlay.png);
z-index: -1
}
.texto-header {
position: absolute;
top: 30%;
left: 50%;
margin-left: -280px;
width: 600px;
text-align: center;
z-index: 2;
color: #FFF;
}
.texto-header h1 {
font-family: 'Dancing Script', cursive;
font-size: 3.5em;
}
.texto-header p {
/*font-family: 'Scada', sans-serif;*/
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
line-height: 20px;
}
.texto-header button {
color: #fff;
background: transparent;
border: 2px solid #fff;
width: 220px;
height: 50px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.2em;
border-radius: 5px;
margin-top: 5%;
}
.texto-header button:hover {
color: #000;
background-color: #fff;
}
.menu-header {
margin-top: 0px;
position: absolute;
top: auto;
bottom: 0px;
background-color: lime;
width: 100%;
height: 100px;
}
.menu {
margin: 40px auto;
text-align: center;
}
.menu li {
display: inline;
}
.menu li a {
margin: 15px;
}
<header>
<div id="video">
<video id="Video1" id="bgvid" autoplay loop>
<source src="video/animacao-lol.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>Tec Mov!</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>
<button>Vamos Começar ?</button>
</div>
</header>
<nav class="menu-header">
<ul class="menu">
<li><a href="">Home</a>
</li>
<li><a href="sobre.html">Sobre</a>
</li>
<li><a href="games.html">Games</a>
</li>
<li><a href="eventos.html">Eventos</a>
</li>
<li><a href="team.html">Team</a>
</li>
<li><a href="contato.php">Contato</a>
</li>
<li><a href="">Noticias</a>
</li>
<li><a href="http://www.novaerateam.com.br/forum/" target="_blank">Forum</a>
</li>
</ul>
</nav>