Tengo un pequeño detalle con el diseño de mi pagina, le cargué un vídeo background, cuando lo veo en la pantalla de mi portatil se ve de maravilla:
http://l4c.me/fotos/maurz/error-total
pero el problemón surge cuando la cambio a una pantalla con mayor resolución, ya se ve así:
http://l4c.me/fotos/maurz/error-6
Como puede notarse, se ve el espacio en blanco en la parte posterior, espero que puedan ayudarme, ya que es para un proyecto de escuela. Cualquier cosa favor de responder, muchas gracias.
SALUDOS
este es el código de mi pagina:
Código Javascript :
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<head>
<link rel="shortcut icon" href="icon.ico" />
</head>
<head>
<title>More...</title>
</head>
<body>
<ul>
<font face="Arial" size="3"><link rel="stylesheet" type="text/css" media="screen" href="options.css" /><li><a href="index.htm">Web</a></li>
<li><a href="images.htm">Images</a></li>
<li><a href="video.htm">Videos</a></li>
<li><a href="ebooks.htm">eBooks</a></li>
<li><a href="more.htm">More</a></li>
</ul>
</body>
<head>
<style>
body{ margin: 0px; }
#bg{ width: 100%; }
#content{ position:absolute; top:100%; padding:30px; color:#069; text-shadow:#FFF 2px 2px;}
#apDiv1 {
position: center;
width: 100%;
height: 100%;
z-index: 100%;
left: 15px;
top: 414px;
}
#apDiv2 {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: 320px;
top: 344px;
}
#apDiv3 {
position: absolute;
width: 100%;
height: 100%;
z-index: 3%;
left: 511px;
top: 134px;
}
</style>
</head>
<video id="bg" src="more\movie.mp4" autoplay loop muted="true"></video> 