I know that you can use images as the screen background. But what about videos as the screen background?
Hello Tobias,
You can achieve that by using CSS, but there is a simpler way using Silk UI, out of the box.
Silk UI has a pattern called CardBackground that allows you to have images or videos behind your content.
In this example, I used the CardBackground to encapsulate my screen content. Then, I used the Silk UI Video pattern inside the Background Image container:
Regarding options, I selected the video to be on a Loop, and with the Autoplay option so that the video will be always running.
Also, in the CardBackground, I selected the background color "None", but you can use a different color. That color will have a nice overlay effect on top of your video:
And here is the final result.
Hope this helps.
Cheers,
Samuel
Samuel Jesus wrote:
Hii Samuel ,
This way is working fine,but what we need to do if we want a background video for login page .
I tried the way u mention for login page also but it's not working their. So can u please help me in doing that.
Is this what you might be looking for?
https://www.outsystems.com/forge/component/1100/tubular/
Does this work for mobile applications?
It worked. Thx for the help
Sweet, I did not know you could do that!
Wow amazing, I learn something new every day. I LOVE THIS PLATFORM!
On iphone 7+ the video background doesn't play. It simply presents as a video but not in the background.
Thanks Samuel..!!
Hello Preston,
Apparently there is a limitation on iOS regarding the auto-play. Since the video is behind your content, you cannot click it to start playing it. In my case, the video even starts out of the app, but not inside the app itself.
The solution I found was to convert the video to a gif, and use that instead:
If you do not need the sound, this could be a solution.
Here is an example with a gif (don't mind my gif low quality).
EDIT: If when opening the example, you can listen to the video's music, go to the menu, and select the UsingGif option ;)
Hope it helped.
Hello, how i can use the Tubular video? He only has a webblock with the script, any more
Converting to gif will make the file size even bigger than original video. Is there any timeline on the platform level to make it work on both platforms? Also I realize there is play button image before the video is auto-played on Android. It defeats the purpose of autoplay by displaying this play button. Is there any work around?