How to Add a Video Background to a Page in Bubble

In the Bubble editor, navigate to the Design tab for your target page. Click the '+' icon in the element palette and search for 'HTML'. Drag the HTML element onto your page. In the property editor, resize it to cover the full page — set width to 100% and height to 100%. Position it at coordinates 0,0 (top-left corner). Make sure this HTML element is at the bottom of your Element Tree so it renders behind all other elements. You can right-click it in the Element Tree and select 'Send to back'.

Double-click the HTML element to open its editor. Paste the video code below, replacing the video URL with your hosted MP4 file. The video tag includes autoplay, loop, muted, and playsinline attributes — all four are required for autoplay in modern browsers. The CSS makes the video cover the full viewport, centers it, and hides overflow.

1<style>
2  .video-bg-container {
3    position: fixed;
4    top: 0;
5    left: 0;
6    width: 100vw;
7    height: 100vh;
8    overflow: hidden;
9    z-index: -1;
10  }
11  .video-bg-container video {
12    min-width: 100%;
13    min-height: 100%;
14    width: auto;
15    height: auto;
16    position: absolute;
17    top: 50%;
18    left: 50%;
19    transform: translate(-50%, -50%);
20    object-fit: cover;
21  }
22</style>
23<div class="video-bg-container">
24  <video autoplay loop muted playsinline>
25    <source src="https://your-hosting.com/your-video.mp4" type="video/mp4">
26  </video>
27</div>

If your page has text over the video, add a dark overlay to improve readability. Add a new Group element on top of the video in the Element Tree. Set its background color to black (#000000) with opacity at 40-60%. Size it to cover the full page and position it above the video HTML element but below your content elements in the Element Tree. Adjust the opacity based on your video — darker videos need 20-30% while bright videos may need 50-60%.

Mobile browsers often restrict autoplay or consume too much data. Add a fallback by using a conditional on the HTML element. In the Conditional tab, add a condition: 'When Current page width is less than 768'. Set the property 'This element is visible' to 'no'. Then add a separate Image element with your fallback poster image, and set its conditional to the opposite — visible only when page width is less than 768. This way mobile users see a static image while desktop users get the video.

Large video files cause slow page loads. Keep your background video under 5MB if possible. Use HandBrake or an online video compressor to reduce file size. Set resolution to 1280x720 (720p) — full 1080p is unnecessary for a background. Keep duration to 15-30 seconds since it loops. Remove the audio track entirely. Host the video on a CDN like Cloudflare R2, AWS S3, or Cloudinary for fast global delivery.