HTML5 video poster doesn't fit mobile - css

Question

I have a background HTML5 video on my website :
<video id="video_background" preload="auto" autoplay="true" loop="loop" poster="images/poster.png">
<source src="videos/video-1.webm" type="video/webm">
<source src="videos/video-1.mp4" type="video/mp4">
<source src="videos/video-1.ogg" type="video/ogg">
<p>Your browser does not support the video element. Try this page in a modern browser!</p>
</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;
}
But the poster image doesn't work properly on mobile and tablet devices, it doesn't scale to fit the whole window resolution !!
My question is how I can make the poster image fit the window on any mobile / tablet device.
Screenshot : http://imgur.com/hZuKHAx
Website CSS layout : http://jossefbn.com/css/layout.css
Please help I'm stuck !!

Answer 1

You can fit video by width and height or stretch it(in mobile situation by media query).
Stretch
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
//stretch
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
width and height:
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
width: 100%;
height: 100%;
}