Overlaying a Reusable Header on Top of an HTML-Based Video Background

[ilkkan.arslan]

Hi everyone,

I’m currently building a landing page in Bubble and using an HTML element to embed a live video background (via the <video> tag). The goal is to create a typical hero section with a moving background video, overlaid with text and a call-to-action.

Here’s how I’m implementing the video:

• The video is embedded through an HTML element using standard <video autoplay muted loop playsinline> markup
• The video is styled with object-fit: cover and sits inside a div with an overlay (rgba(0, 0, 0, 0.4))
• Above the video, I have hero content: headline, subtext, bullet points with icons, and a button
• The HTML element is placed at the top of the page inside the Bubble canvas

What I’m trying to achieve:

1. The video background should start at the very top of the viewport
2. The reusable header element (containing the logo and navigation) should appear on top of the video
3. The video should not cover the entire page, just a section (e.g. the first 700px)
4. When scrolling, the video should scroll away like regular content
5. The result should look like a classic hero section with a full-width video background

• Using position: fixed for the video works for overlap with the header, but then the video covers the entire page and stays in place when scrolling – not ideal
• Using position: absolute inside a .hero-container limits the video’s height and makes it scroll normally – which is good – but the reusable header ends up underneath the video
• Making the header transparent shows the video “through” it, but doesn’t layer it properly
• I can’t easily move the header inside the HTML container, since it’s a reusable element

How can I properly overlay a reusable header element on top of an HTML-based video background in Bubble, so that:

• The video is visible underneath the header
• The video does not affect or overlap the rest of the page content
• The video scrolls away naturally
• I preserve Bubble’s reusable header logic and functionality

Is there a known workaround to:

• Control z-index layering between reusable elements and HTML elements?
• Dynamically attach reusable headers into custom HTML sections?
• Simulate the effect with Bubble-native tools?

Any help or insights would be massively appreciated!
Thanks in advance!

Code:

<style>
  .hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    font-family: 'Arial', sans-serif;
    color: white;
    overflow: hidden;
  }

  .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
  }

  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    text-align: center;
  }

  .hero-headline {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    white-space: nowrap;
  }

  .hero-subtext {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .hero-list {
    margin-bottom: 30px;
    font-size: 18px;
    text-align: left;
  }

  .hero-list-item {
    margin: 6px 0;
  }

  .hero-list-item::before {
    content: "✓ ";
    color: #87ceeb;
    font-weight: bold;
  }

  .hero-button {
    padding: 14px 28px;
    background: rgba(135, 206, 235, 0.3);
    border: 1px solid #87ceeb;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    text-decoration: none;
  }

  .hero-button:hover {
    background: rgba(135, 206, 235, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }

  @media (max-width: 768px) {
    .hero-headline {
      font-size: 32px;
      white-space: normal;
    }
    .hero-subtext {
      font-size: 18px;
    }
    .hero-list {
      font-size: 16px;
    }
  }
</style>

<video autoplay muted loop playsinline class="hero-video">
  <source src="https://627fd2c5594f15fa369bd1b208427539.cdn.bubble.io/f1750419234239x219492687327421220/Live_Background_Final_Komprimiert.mp4" type="video/mp4">
</video>

<div class="hero-overlay"></div>

<div class="hero-container">
  <div class="hero-content">
    <div class="hero-headline">Auf der Suche nach einem FreshUp?</div>
    <div class="hero-subtext">Einen FreshUp’er buchen war noch nie so einfach!</div>
    <div class="hero-list">
      <div class="hero-list-item">Einfache Kommunikation.</div>
      <div class="hero-list-item">Optimierte Suche.</div>
      <div class="hero-list-item">Finden. Buchen. Fertig.</div>
    </div>
    <a href="https://fresh-up.io/search" class="hero-button">Jetzt suchen!</a>
  </div>
</div>