How do I create a video background?


I’m looking to a have a video playing in the background without any controls or sound in the hero section with other elements on top. It needs to be loopable and possibly have a coloured overlay on top to help offset it from the text.

How would I go about adding this?

Thanks in advance.

Hi @Wayjin!

Until we add a native solution for this through the UI, here’s a guide how to do it manually.

Here’s a video tutorial for the easier following:

Adding the video

Step 1

Select the section you want to add the video background inside and set its positive to Relative.

Step 2

Add the Video Tag and upload the video.

Step 3

  • Set the video position to Absolute and Center
  • Set the Width and Height to 100%
  • Set the Z-Index to 0

Step 4

  • Set the video Size to Cover
  • Autoplay: True
  • Loop: True
  • Muted: True

Step 5

Select the Div that holds all the content inside (that should go over the video) and set its Z-Index to 10 (It should be higher than 0 that you previously set to the Video)

Adding the overlay

Step 1

Select the Section, add the Div tag and rename it to “Overlay”.

Step 2

  • Set position to Absolute and Center
  • Background color of Black and 50% of Opacity
  • Width and Height: 100%
  • Z-Index: 1

And that’s it! :slight_smile: Let me know if you need anything else!

1 Like

Thank you @Lazarevic for such a detailed answer. Incredibly helpful.


No problem @Wayjin. Glad I could help!