image

image

Source

Blog

Announcements, tips, tricks and much more!

image

Background videos


| 03 Dec 2020


Background videos, when used well, can offer a nice effect on webpages. This post looks at how to add these in your Source projects.


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 (available in our Addon pack) and just a little code.

How to add a background video in Source

Step 1: First thing is to set up a Container as you normally would and add any desired content, set a min-height etc etc. Tip: If you want to have a colour overlay sitting on top of your video then you can simply add a (non-solid) colour as the Container background.

Step 2: Next you need to add a Coder stack to the page and set it to take Stacks as content (this allows you to drop any other stack into it as content). You also need to set it up with a 'wrapper div' (this allows us to add CSS classes that will affect the contents that we add).

Step 3: The Container stack (from step 1) needs to be added inside of this Coder stack.

Step 4: 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 (so leave it as the default 'html' type). NB: it is within this html code that you set up the link to the video - either a macro from RW resources or a URL for a file available online. See the example below:

 <video class="vid-bg" src="yourVideo.mp4" playsinline autoplay muted loop></video>

Notice that our video code here has a class name of vid-bg added (this will allow us to style it with the following css...)

Step 5: Finally, 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:

video.vid-bg {
  position: absolute;
  z-index: -2;
  object-fit: cover;
  width:100%;
  height:100%;
  top: 0;
  left: 0;
}

And that's it. Background video added in Source without the need for another stack (or a load of extra settings in the Container stacks).


Like this post?

Why not share with others that might like it too?!

Next post

Post title - will change!

Background videos

Categories


Tags


RapidWeaver Icon

Made in RapidWeaver