Best way to do a video background

Hi guys I have got the video background working, however one issue I am having is that it takes a while for it to load. Is there a better way in wrapper to add the video background rather than doing it in CSS like:
.video-wrapper {
height: 100%;
width: 100%;
background: url(…/video/svpsl.mp4) no-repeat center center;
background-size: cover;
}

Alternatively is there a way to show loading progress and and perhaps a poster image whilst it loads?

Hi @gunnery, what is the size (filesize in megabytes/kilobytes) of your video?

was 54MB have managed to get it down to 12MB MP4

That’s huge still :slight_smile: Your video should not really exceed more than about 4-5MB … as it is a background video you can really save it lower resolution and lower quality.
1920x1080 @ 2.8Kbps / 30fps should be just perfect - 30seconds of such a video should be like 3-4MB

1 Like

ok, that makes sense.
any suggestions on a program to shrink it down been using iMovie but I don’t think thats doing a great job.

I am on Windows, here i use this free tool: https://handbrake.fr/ but it works on Mac as well. You can give it a try.

1 Like

cheers buddy, if I don’t chat before, I hope you and the team have a great xmas and new year :slight_smile:

1 Like

By the way, you can take a look at the following article - i like the way the code suggested here works: http://codetheory.in/html5-fullscreen-background-video/

Maybe you can post a feature request for a background video component, which will make adding background video in Wappler possible in 2 clicks :slight_smile:

3 Likes

Background videos are already available as a component in Wappler: