Página html a pantalla completa y video a pantalla completa sin bordes negros

I've this html:

<div id="container">
  <video id="video" src="video.ogv" loop></video>
</div>

Div "container" and video fills all screen

#container {
   position: absolute;
   top: 0px:
   left: 0px;
   height: 100%;
   width: 100%;  
}

#container video {
   position: absolute;
   top: 0px:
   left: 0px;
   height: 100%;
   width: 100%;  
}

The monitor where I'm testing is 1920x1080 while video is 1280x720: obviously I obtain two black border (top and bottom).

How can I view video without borders and without stretching it?

I've already search on so, like aquí, but is not my case.

Editar

I had forgotten min-width: and min-height proprerties, as HoangHieu suggest!

CSS become:

#container video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

preguntado el 28 de mayo de 14 a las 14:05

1 Respuestas

you can use properties : min-width: and min-height:

contestado el 28 de mayo de 14 a las 14:05

don't forget max-width and max-height. - pinoniq

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.