Full page cropped video in HTML5 - no jquery - html

Question

I'm trying to add a video in the background of my website. I want to do this without any javascript to optimize the loading time.
So far, I used this code:
HTML:
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/video-poster.jpg" >
<img src="img/video-poster.jpg" alt=""/>
<source type="video/mp4" src="video/video.mp4"/>
<source type="video/ogg" src="video/video.ogv"/>
</video>
CSS:
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden
}
The problem is that my video has a panoramic format (16/9) with black margins on top and bottom. Obviously I don't want them to appear on the screen. So with this code, the blacks margin appear on the bottom of the page.
How can I make sure the black margins are cropped and still have a responsive display?
Thanks

Answer 1

There may be a better option out there but I find this to be an elegant solution in my eyes.
I gave the video #video-background a scale(1.09) which would zoom the video in ever so slightly to remove the borders.
I also added this to the html and body to disable the video from going under the fold. This is optional but you will have the bottom border without it.
html, body {
height: 100%;
width: 100%;
position: fixed;
margin: 0;
padding: 0;
}
The css for your video,
#video-background {
position: absolute;
top: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
transform: scale(1.09);
-webkit-transform: scale(1.09);
-moz-transform: scale(1.09);
-o-transform: scale(1.09);
}
Finally, here is the JSFIDDLE to show how it looks. In the url, remove /show to see the code.