0

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

1 Answer 1

1

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

1
  • 1
    don't forget max-width and max-height.
    – Pinoniq
    May 28, 2014 at 14:06

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.