Video as div background on loop

Is it possible to set a video background, either as an mp4 or an animated gif to play as the background for a div on a loop? I’m not sure which would be best and how to go about doing it. On my site, I’d like to do it on the home page, on the right-hand side, there is a header div called ‘main content header’ that I’d like to replace the static image with a short video loop.

Read Only Link
Live Site


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Yes. You just add the “Background Video” component inside a Regular Div. You’ll need to use an MP4. It will automatically loop. Adjust the size of the parent Div because the BG Video will not be responsive automatically, you’ll need to resize it manually.

Great! Thank you. That worked perfectly. :smiley:

For some reason this isn’t working for me at all. I added a div block to a cell in a CSS grid then added a background video to it. I even resized the div to the exact size of the video, but for whatever reason it’s not showing up in design view or preview. What could I possibly be doing wrong? I can’t figure it out! Please help. :woozy_face:
The site is HERE

It’s long ago but maybe for somebody it’s helpful:

My problem was: There was a background color in the section. The background video is behind this background color. The solution is to give the Background-Video a “z-index” of your choice, i wrote 999 and it was enough in my project.

High I’m having the same issue as Nicole. I’ve tried all suggestions to no avail. The video background displays on all breakpoints above mobile. The background vid doesn’t display on mobile vert & horiz.