2

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 : https://i.stack.imgur.com/QhAF2.jpg

Website CSS layout : http://jossefbn.com/css/layout.css

Please help I'm stuck !!

Wael El
  • 63
  • 1
  • 7
  • Hi, I'm not sure people will enjoy looking for a tiny error in 1500 lines of CSS. Can you please post the CSS relative to the `video` element ? Maybe an image of the desired output would help, too. – sodawillow Oct 17 '15 at 12:33
  • It's not a tiny error, because on mobile/tablet devices the video can't load as a background, but the poster image can load, so if the image poster is not loaded properly, the website layout we'll look horrible !! I'll update the post right now – Wael El Oct 17 '15 at 12:38
  • Related : http://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself – sodawillow Oct 17 '15 at 12:44

1 Answers1

0

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%;
}
Alex
  • 8,461
  • 6
  • 37
  • 49