Play video in screen background

Play video in screen background

  

I know that you can use images as the screen background. But what about videos as the screen background?

Is this what you might be looking for?

https://www.outsystems.com/forge/component/1100/tubular/

Does this work for mobile applications?

Solution

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



Solution

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.


Cheers,

Samuel

Hello, how i can use the Tubular video? He only has a webblock with the script, any more