Fullscreen background video

Design help General
1

Hi, I`m trying to make my background video stay full screen at all time when the user will re-size its browser window.

I dont know if its possible!

https://webflow.com/design/demo121?preview=6713d74fc4f86985fd2bf5d40c44a969

On my website you will see that it would make my idea work. When I re-size i see the body background which i don`t want!

Thanks for your time!

2

Hi @Jon104, thanks for your post. I took a look at the site, and it seems there is small issue with your video embed code, I would replace what you have now with:

    <video autoplay muted loop style="width:100%; position:absolute; z-index: -1;">
    <source src="https://dl.dropboxusercontent.com/u/4779065/Intro_canvas.mp4" type="video/mp4" />
        <img src="https://dl.dropboxusercontent.com/u/4779065/poster1.png">
</video>

Once you do that, your video will be affixed to the corner of your browser window, but since the video is not larger than the viewport, the whole video will not cover the screen… you need either some plugin to help you do that like some background video plugin, or you can try to use some custom css in your site Head (from Custom Code in Site Settings) and try pasting in the following css:

<style>
video { 
  -webkit-transform: scaleX(2); 
  -moz-transform: scaleX(2);
}
</style>

If that works, it is supposed to stretch the video, but I have not tried this, just saw this on stackoverflow.

You will have to play around with it.

I hope that helps, if not, let me know :slight_smile: Cheers, Dave