Here is the HTML code I am working with:
<div id="container">
<video id="video" src="video.ogv" loop></video>
</div>
The "container" div and video element occupy the entire screen.
#container {
position: absolute;
top: 0px:
left: 0px;
height: 100%;
width: 100%;
}
#container video {
position: absolute;
top: 0px:
left: 0px;
height: 100%;
width: 100%;
}
When testing on a 1920x1080 monitor with a 1280x720 video, black borders appear at the top and bottom of the video.
Is there a way to display the video without any borders or distortion?
I have already researched similar issues such as those discussed here, but they do not match my situation.
Edit
I forgot to include the min-width and min-height properties, as HoangHieu recommended!
The updated CSS would be:
#container video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}