Adding a background video

Avatar

By Stuart Marshall

updated 2 months ago

The Source Container stacks do not have the option to add a video as a background. It is easily achieved though with a couple of Coder stacks and just a little code.

First thing is to set up a Container as you normally would and add any desired content, set a min-height etc etc. Next you need to add a Coder stack to the page and set it to take Stacks as content. You also need to set it up with a 'wrapper div'. The Container stack should then be added inside of this Coder stack. The last thing that we need to do on the page is add one more Coder stack. This time all we are adding is the HTML for a video (NB: it is here where you set up the link to the video - either a macro from RW resources or a URL for a file available online).

To make our video act as a background video (and be positioned behind our content and covering the whole container) we need a few lines of CSS added to the page.

Here is a published example.

And here is the project file.

Did this answer your question?