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 
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
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.
cheers buddy, if I don’t chat before, I hope you and the team have a great xmas and new year
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
Background videos are already available as a component in Wappler: