# How to Add a Video Background to a Page in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Adding a video background in Bubble requires an HTML element with a video tag positioned behind your page content using CSS. You embed a hosted MP4 video with autoplay, loop, and muted attributes, then use absolute positioning and z-index layering to place it behind all other elements. This tutorial covers hosting, embedding, overlay setup, and mobile fallback images for reliable performance.

## Overview: Video Backgrounds in Bubble

This tutorial shows you how to add a full-page video background to your Bubble app. Since Bubble does not have a native video background element, you will use an HTML element with custom CSS to position a video behind your page content. The guide covers hosting your video, embedding it with autoplay and loop, handling z-index layering, and providing fallback images for mobile devices where autoplay may not work.

## Before you start

- A Bubble app with at least one page to add the background to
- A video file hosted on a public URL (MP4 format recommended)
- Basic understanding of HTML video tags and CSS positioning

## Step-by-step guide

### 1. Add an HTML element to your page for the video

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'.

> Pro tip: Name the HTML element something clear like 'html_video_bg' so you can find it easily in the Element Tree.

**Expected result:** An HTML element is placed on the page covering the full viewport, positioned behind all other elements.

### 2. Add the video embed code with autoplay and loop

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.

```
<style>
  .video-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
  }
  .video-bg-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }
</style>
<div class="video-bg-container">
  <video autoplay loop muted playsinline>
    <source src="https://your-hosting.com/your-video.mp4" type="video/mp4">
  </video>
</div>
```

**Expected result:** The video plays automatically in the background, looping continuously with no audio, behind all page content.

### 3. Add a semi-transparent overlay for text readability

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%.

> Pro tip: Adjust the overlay opacity based on your video brightness. Darker videos need less overlay, while bright or colorful videos need more.

**Expected result:** A semi-transparent overlay sits between the video and your text content, making text readable against the moving background.

### 4. Add a mobile fallback image

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.

**Expected result:** Desktop users see the video background while mobile users see a static fallback image for better performance.

### 5. Optimize video file size for fast loading

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.

> Pro tip: WebM format offers better compression than MP4. Add a second source tag with WebM as the first option and MP4 as fallback for Safari.

**Expected result:** The video loads quickly without noticeably delaying page render time, even on slower connections.

## Complete code example

File: `Workflow summary`

```text
VIDEO BACKGROUND SETUP SUMMARY
=====================================

ELEMENT STRUCTURE (Element Tree order):
  1. HTML Element — video-bg (bottom/back)
     - Position: 0,0
     - Width: 100%, Height: 100%
     - Contains: <video> tag with CSS
  2. Group — overlay (middle)
     - Background: #000000, opacity 40-50%
     - Width: 100%, Height: 100%
  3. Group — page-content (top/front)
     - Your actual page content here

HTML ELEMENT CODE:
  <style>
    .video-bg-container {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      overflow: hidden; z-index: -1;
    }
    .video-bg-container video {
      min-width: 100%; min-height: 100%;
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }
  </style>
  <div class="video-bg-container">
    <video autoplay loop muted playsinline>
      <source src="YOUR_VIDEO.mp4" type="video/mp4">
    </video>
  </div>

MOBILE FALLBACK:
  Conditional on HTML Element:
    When: Current page width < 768
    Property: This element is visible = no
  Image Element (fallback):
    When: Current page width < 768
    Property: This element is visible = yes

VIDEO SPECS:
  Resolution: 720p (1280x720)
  Duration: 15-30 seconds
  File size: under 5MB
  Format: MP4 (add WebM first source)
  Audio: removed
  Hosting: CDN recommended
```

## Common mistakes

- **Forgetting the 'muted' attribute on the video tag** — Modern browsers block autoplay for videos with audio — without muted, the video will not play automatically Fix: Always include all four attributes: autoplay, loop, muted, and playsinline on the video tag
- **Using a video file that is too large (over 10MB)** — Large video files dramatically slow page load times and consume excessive bandwidth on mobile Fix: Compress to 720p resolution, 15-30 seconds, and under 5MB using HandBrake or similar
- **Not providing a mobile fallback** — Many mobile browsers restrict background video autoplay, leading to a blank background on phones Fix: Use a Bubble conditional to show a static image on screens narrower than 768px

## Best practices

- Keep background videos short (15-30 seconds) since they loop continuously
- Always remove the audio track from background videos to save bandwidth
- Use 720p resolution — higher resolutions waste bandwidth on a partially obscured background
- Host your video on a CDN for fast global delivery rather than Bubble's file manager
- Add a poster attribute to the video tag so users see an image while the video loads
- Test on Safari, Chrome, and Firefox since video autoplay behavior varies
- Add a semi-transparent overlay between the video and text content for readability

## Frequently asked questions

### Can I use a YouTube video as a background in Bubble?

Yes, but it requires embedding a YouTube iframe with parameters (autoplay=1, mute=1, loop=1, controls=0) and CSS to fill the viewport. YouTube's terms require visible branding, so a self-hosted MP4 is cleaner.

### Why is my video background not autoplaying?

The most common cause is a missing 'muted' attribute. Modern browsers require videos to be muted for autoplay. Ensure your video tag has autoplay, loop, muted, and playsinline.

### Does a video background affect my Bubble app's performance?

Yes. Video backgrounds add page weight and CPU usage. Keep the video under 5MB, use 720p, and provide a static image fallback for mobile to minimize impact.

### Can I change the video dynamically based on the page or user?

Yes. Use Bubble's 'Insert dynamic data' inside the HTML element to insert different video URLs based on URL parameters, current user data, or custom states.

### Will the video background work on all mobile devices?

Not reliably. iOS Safari and some Android browsers restrict video autoplay. This is why a mobile fallback image is essential for a consistent experience.

### Can RapidDev help create a professional video landing page in Bubble?

Yes. RapidDev can design and implement a high-converting landing page with optimized video backgrounds, mobile responsiveness, and performance tuning.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-a-video-background-to-a-page-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-a-video-background-to-a-page-in-bubble