How to add a video background in Bubble

To add a video background in Bubble, the simplest reliable method is to place an HTML element on the page and embed a looping, autoplaying, muted video (usually an MP4 hosted on Bubble’s File Manager or a CDN). Bubble does not have a native “video background” element, so using an HTML element with CSS is the standard real-world approach.

Add a Video Background in Bubble

The idea is: you upload your video file, place an HTML element on the page, and use CSS to make the video cover the whole section or page behind your content. This works because Bubble allows custom HTML and the video tag supports autoplay and looping as long as it’s muted.

• Upload your MP4 to Bubble’s File Manager (it gives you a direct URL).
• Add an HTML element anywhere on your page.
• Paste real HTML/CSS that positions the video as a full background.
• Place your other elements on top and set their background to transparent.

<video autoplay muted loop playsinline
       style="position: fixed; 
              top: 0; left: 0;
              width: 100%; height: 100%;
              object-fit: cover;
              z-index: -1;">
  <source src="YOUR_VIDEO_URL.mp4" type="video/mp4"/>
</video>

Replace YOUR_VIDEO_URL.mp4 with the file URL from Bubble’s File Manager. object-fit: cover ensures the video fills the screen like a real background. z-index: -1 keeps it behind everything else. Use position: fixed if you want it to stay put while scrolling; if you want it inside a specific group, change it to position: absolute and place the HTML element inside that group.

If you need the background inside a section (instead of full-page), set the group to Collapse height off and give it a fixed height. Then adjust the CSS to 100% the size of that group.