Tengo un código en el que asigno un header y footer que estarán siempre en la misma posición, no se moverán, hasta ahí todo bien. El problema esta en que quiero poner un video de fondo en el div que queda en el medio. Cuando lo coloco agregandole el css del mismo div, el video se ve horrible, con mucho zoom, yo quisiera que se viera del mismo tamaño que el div del medio.
Aqui esta el codigo.
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
html, body {height: 100%; margin:0px !important;}
#header{
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
z-index: 1;
}
#content{
padding-top: 50px;
padding-bottom: 50px;
position: fixed;
top:0px;
bottom:0px;
width:100%;
}
#video{
padding-top: 50px;
padding-bottom: 50px;
position: absolute;
top:0px;
bottom:0px;
width:100%;
}
#footer{
background-color: black;
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="content">
<video src="video.mp4" controls id="content" autoplay></video>
</div>
<div id="footer">
</div>
</body>
</html>
