Fullscreen html page and fullscreen video without black borders

Question

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 here , but is not my case.

Edit

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;
}

Answer 1

您可以使用以下属性：min-width：和min-height：