How do I create a video background?

[Wayjin]

Hi!

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.

[Lazarevic]

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! Let me know if you need anything else!

[Wayjin]

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

[Lazarevic]

No problem @Wayjin. Glad I could help!