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