Background Video: Overlapping sections and scaling issues

Design help General
1

Hi,

I’m having a few issues with a background video I am trying to put in on the first section.

The video won’t go full screen without overlapping into the section below, when it does this the video controls won’t work. When the video is within it’s designated section, I can’t get it to fill it completely. I have put the background behind the video as red to show the contrast.

I’ve embedded the video, so please find the code in the settings section.

The video can be found in the section titled ‘Title Page’ (beneath ‘modal background’) and is called ‘Video’

I’m not sure how this can be fixed. I have limited experience with coding, so can’t really tell what is wrong with the code for the embedded video. Is it conflicting with the parameters set within the positions settings in webflow? I have taken them all out, but the problem still persists.

The video also has issues in scaling up or down when moving across devices!

Here is the preview site: https://preview.webflow.com/preview/kurv21032758?preview=9808f716d6136457b4a75e606bc435f2

I am using Chrome 45 as my browser

Any suggestions?

Thanks!

2

Hey @taniaf!

There isnt really a way to natively show a video as a background without some CSS hackery which is problem harmful from a cross browser persepctive in the long run. There are a few js libraries that are quite lightweight and acheive what you require.

One of which is: GitHub - stefanerickson/covervid: Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension

There are other solutions if having the video always fit 100% of the viewport height isnt a deal breaker.So in essence keeping the video resolution 16x9 and width at 100% with height staying at auto.

3

This is the custom code I use for background videos

<style>
video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: #fff;
    background-size: cover;
}
    
</style>

Hope this helps :slight_smile:

1 Like
4

Hi,

Thanks to both of you for your replies!!

Still having an issue. @PixelGeek I have incorporated your code, however it is still not covering the whole section. Again, I have put the background in red to highlight the space that needs to be filled.

Could you both please look at the code, I’m not sure what’s going wrong!

https://preview.webflow.com/preview/kurv21032758?preview=9808f716d6136457b4a75e606bc435f2

Again, the video is in the ‘Title Page’ section, and is called ‘Video’.

Thank you, again, for your help :slight_smile:

5

Hi @taniaf, there seems to be some issue with the embed code.

Can you replace what you have there now with this:

    <video autoplay loop style="position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: #fff; background-size: cover;">
           <source src="http://dl.dropboxusercontent.com/s/noctawrsdoq1gqw/Kv%20Video%20Edit%20Jo%2010.mp4?dl=0" type="video/mp4" type="video/mp4" />
          <source src="http://dl.dropboxusercontent.com/s/noctawrsdoq1gqw/Kv%20Video%20Edit%20Jo%2010.mp4?dl=0" type="video/ogg" /></source>
src="http://dl.dropboxusercontent.com/s/noctawrsdoq1gqw/Kv%20Video%20Edit%20Jo%2010.mp4?dl=0" type="video/webm" /></source>
          <img src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">
        </video>

Then save changes and republish. Do not forget to remove the red background color from the section.

See if that helps !

6

Fantastic! Thank you!!

@cyberdave @PixelGeek One tiny little thing…How can I make the whole video shift up with the ‘Title Page’ section, instead of it being fixed and the next section scrolling over the top? I have tried replacing ‘fixed’ with ‘scroll’ in the ‘position=’. However, this downsizes the screen again. I am unable to access the controls of the video also, by adding ‘controls’ before ‘style=’ on the first line.

Thanks again!!

https://preview.webflow.com/preview/kurv21032758?preview=9808f716d6136457b4a75e606bc435f2

7

Change position:fixed to position:absolute :smiley:

8

Perfect, fix the scroll issue, but now these is unfortunately there is a gap on the right hand side , so still a bit of a problem :frowning:

9

Hi @taniaf, the embedded video is slightly wider than the parent element - a quick resolution to this would be to set the parent element to overflow:hidden.

Hope that helps a bit! Also, looks like a cool project :slight_smile:

1 Like
10

Thank you - yes that fixed the issue and worked a treat :grinning:

2 Likes