Background video not filling screen properly

[Max]

Hello!

I am trying to create a series of full width, full height HTML5 video backgrounds that move with the page. You can see here: http://pitfarmtennis.co.uk/cms/coaching/ (I want the first to be fixed as it is).

But the backgrounds on desktop sized screens don’t fill the width, and in small screens there is an annoying empty gap to the right of the page if you scroll.

I tried to reproduce error, didn’t quite work, but you can see the relevant code here, otherwise refer to previous URL: https://jsfiddle.net/beechboy707/1Lmo5dqb/

Here is the key code:

height: 100%;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
z-index: -200;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Thanks for your help!

[Max]

Hi @Shikkediel,

Thanks for the feedback.

Yes, I am planning to darken the background and only play when the video is showing, but aiming to get the primary functionality correct first.

It pretty much is, just having difficulty getting these bottom two videos to cover the screen properly!

Any help would be much appreciated – sick bags can be provided!!

[Max]

Got it sorted:

position: fixed;/*From absolute*/
top: 50%;
left: 50%;
min-width: 100%;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

With hide overflow set on the container.

[Author]

Posts