webdevpuneet.com

Related Snippets

60 in Heroes category
50–55 of 60

Video Background Hero

Minimal Hero

Coming Soon Hero

Agency Hero

Portfolio Hero

App Download Hero

Video Background Hero — Free HTML CSS JS Snippet

Video Background Hero · Heroes · Plain HTML, CSS & JS · Live preview

CategoryHeroes
TagsKeyboard NavigationSVGGlassmorphismCSS AnimationMedia Player

Copy & paste

Source Code

<section class="hero">
  <!-- CSS animated "video-like" background -->
  <div class="bg-anim">
    <div class="blob b1"></div>
    <div class="blob b2"></div>
    <div class="blob b3"></div>
    <div class="scanline"></div>
  </div>
  <div class="overlay"></div>

  <div class="content">
    <div class="eyebrow">
      <span class="dot-pulse"></span>
      Live · World Tour 2026
    </div>

    <h1 class="headline">Experience the<br><span class="italic">moment</span></h1>

    <p class="sub">Front-row seats available for London, New York, and Tokyo. Limited availability — book before they're gone.</p>

    <div class="cta-row">
      <a href="#" class="btn-play" id="play-btn" onclick="toggleVideo(event)">
        <svg class="play-icon" id="play-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
        Watch trailer
      </a>
      <a href="#" class="btn-tickets">Book tickets →</a>
    </div>
  </div>

  <!-- Video modal -->
  <div class="video-modal" id="video-modal" onclick="closeModal(event)">
    <div class="modal-inner">
      <button class="modal-close" onclick="closeModal()">×</button>
      <div class="video-placeholder">
        <svg width="60" height="60" viewBox="0 0 24 24" fill="rgba(255,255,255,0.3)"><polygon points="5 3 19 12 5 21 5 3"/></svg>
        <p>Video player would render here.<br>Replace with a real &lt;video&gt; tag or iframe.</p>
      </div>
    </div>
  </div>

  <!-- Scroll indicator -->
  <div class="scroll-ind">
    <div class="scroll-mouse"><div class="scroll-wheel"></div></div>
    <span>Scroll</span>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

3 animated CSS blob backgrounds: radial-gradient + blur(100px) + drift keyframe
Staggered blob animation: different durations (18-25s) and delays (-4s,-8s) for organic movement
Scanline texture: repeating-linear-gradient 4px pattern at 3% opacity
Left-fade overlay: linear-gradient rgba(0,0,0,0.7)→transparent for text legibility
Pulsing live badge: red dot with box-shadow glow ring + opacity keyframe
Pill play button: backdrop-filter:blur(10px) glass pill with play SVG icon
Fullscreen modal: backdrop-filter:blur(12px), aspect-ratio:16/9, ESC+click-outside close
Scroll indicator: mouse icon with animated wheel dot

About this UI Snippet

Video Background Hero — CSS Blob Animation, Play Button & Fullscreen Video Modal

Screenshot of the Video Background Hero snippet rendered live

A video background hero creates an immersive, cinematic above-the-fold experience — widely used for event landing pages, entertainment products, film and music websites, and premium brand campaigns. This snippet provides a complete video background hero without requiring an actual video file: three animated CSS radial-gradient blobs simulate the colour and movement of a video background, a scanline texture adds grain, a left-fade overlay makes text legible, and a pill-shaped play button opens a fullscreen video modal — all in plain HTML, CSS, and vanilla JavaScript.

The CSS blob animation as a video substitute

Three absolutely positioned divs with radial-gradient backgrounds and filter: blur(100px) create large, soft colour blobs. A CSS @keyframes drift animation moves each blob via translate(x,y) on different durations (18–25s) and delays (-4s, -8s). Because they move at different speeds and in different directions, the blobs never synchronise — creating the organic, shifting colour movement associated with video backgrounds. The key advantage over a real video: zero file size, no loading delay, no browser autoplay restrictions.

The scanline texture

A repeating-linear-gradient creates horizontal lines at 4px intervals: transparent 3px, then a 1px semi-transparent black stripe. At 3% opacity, this adds grain and depth without being visually distracting — the same technique used on premium dark UIs.

The left-fade overlay

A linear-gradient overlay fades from rgba(0,0,0,0.7) on the left (where the text sits) to transparent on the right. This makes text legible against any background colour without darkening the right side of the hero where visual interest should remain.

The video modal

Clicking the play button adds .open to the fullscreen modal overlay. The modal uses backdrop-filter: blur(12px) on a near-black background. The inner container uses aspect-ratio: 16/9 for a consistent video frame. In production, replace the .video-placeholder div with a real video element or YouTube/Vimeo iframe. Click-outside (e.target === e.currentTarget on the overlay) and ESC key close the modal — the same dismiss pattern as the base modal snippet.

The live event eyebrow

A pulsing red dot + "Live · World Tour 2026" label communicates urgency and recency. The dot uses box-shadow for the glow ring and an opacity keyframe for the pulse animation.

Accessibility and performance

For users who prefer reduced motion, add @media (prefers-reduced-motion: reduce) { .blob { animation: none; } .dot-pulse { animation: none; } } to freeze the blob drift and live badge pulse. The blob animations use CSS transform which runs on the GPU compositor — safe for 60fps even on mobile. Test with Chrome DevTools Performance to verify no layout recalculation is triggered.

Step by step

How to Use

  1. 1
    Click "Watch trailer" to open the video modalThe play button opens a fullscreen modal with backdrop blur. Click the × button, press ESC, or click the dark backdrop to close. The modal has a 16:9 aspect ratio for video content.
  2. 2
    Add a real video inside the modalReplace the .video-placeholder div with a video element: <video src="trailer.mp4" controls autoplay style="width:100%;height:100%;object-fit:cover"></video>. Or use a YouTube iframe: <iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" frameborder="0" allow="autoplay" style="width:100%;height:100%;"></iframe>
  3. 3
    Update the eyebrow, headline, and CTAsEdit the .eyebrow span text for your event or product. Change the two-line h1 headline and the .italic word. Update the .sub paragraph. Wire .btn-tickets href to your booking or product page.
  4. 4
    Change the blob coloursIn the CSS, update the rgba() colours in .b1, .b2, and .b3 background gradients. Use three complementary colours from your brand palette. Higher opacity values (0.6–0.8) create more vivid blobs; lower (0.2–0.3) create subtler ambience.
  5. 5
    Use a real video as the backgroundFor a real video background: add <video autoplay muted loop playsinline> inside .bg-anim. Set position:absolute; inset:0; object-fit:cover; width:100%; height:100%. Keep the .overlay and .scanline on top for text legibility and grain texture.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component using useState for the modal open state, or "Tailwind" for a Tailwind CSS version.

Real-world uses

Common Use Cases

Concert, event, and entertainment product landing pages
The video background hero is the standard aesthetic for event landing pages, album launches, film promotion sites, and entertainment brands. The animated blob background provides cinematic ambience without a real video file during development.
Premium brand, fashion, and luxury product campaigns
Dark video backgrounds with minimal overlay text communicate brand premium quality. The left-fade overlay technique keeps the right side of the frame visually unobstructed — important for product imagery or lifestyle photography in the background.
SaaS product demo and feature announcement pages
Use the play button to open a product demo video modal. The "Watch trailer" pill-shaped glass button is the standard CTA for demo video landing pages. The animated blob background serves as a placeholder before the video is produced.
Charity, cause, and campaign landing pages
Use a real cause-related background video (muted, autoplay, looped footage) with the left-fade overlay for headline legibility. The pulsing live badge adapts to "Campaign live until Nov 30" or "Fundraising open". Wire the tickets button to a donation page.
Learn CSS blob animation and glass morphism techniques
The blob animation demonstrates how three differently-timed drift keyframes create organic colour movement without JavaScript. The pill glass button demonstrates backdrop-filter: blur on a button element. Both techniques apply to any dark-themed UI.
Replace with a real video element for production deployment
The CSS blob background is a zero-file-size placeholder. For an inline player instead of a background, see the video player snippet. For production: add <video autoplay muted loop playsinline src="bg.mp4"> inside .bg-anim. Set position:absolute; inset:0; width:100%; height:100%; object-fit:cover on the video. Remove the blob divs. The overlay, scanline, and modal code remain unchanged.
Related: Hero with Terminal Boot Sequence
See the Hero with Terminal Boot Sequence for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Inside .bg-anim, replace the three .blob divs with a video element: <video autoplay muted loop playsinline style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" src="your-video.mp4"></video>. The muted and autoplay attributes together allow autoplay in all browsers — autoplay without muted is blocked by all major browsers. The loop attribute loops infinitely. Keep .scanline and .overlay as-is for texture and text legibility. Remove .blob CSS classes.

Replace the .video-placeholder div with an iframe: <iframe width="100%" height="100%" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen style="position:absolute;inset:0;"></iframe>. The autoplay=1 parameter starts the video when the modal opens. Add ?enablejsapi=1 if you want to control the player via the YouTube IFrame API. To stop the video when the modal closes, call the iframe's contentWindow.postMessage to pause: iframe.contentWindow.postMessage("stopVideo","*").

Add a poster attribute to the video element: poster="thumbnail.jpg". The poster image shows while the video loads — it should be a single frame from the video. For a loading spinner, add a .loading-overlay div over the video and listen for the video canplaythrough event: video.addEventListener("canplaythrough", () => loadingOverlay.style.display = "none"). The CSS blob background in this snippet never needs a loading state since it is pure CSS.

Click "JSX" to download. Manage modal open state with useState(false). Toggle with setModalOpen(true) on play button click. Close with setModalOpen(false) in the close handler. For the ESC key, use a useEffect: useEffect(() => { if (!modalOpen) return; const handler = e => { if (e.key === "Escape") setModalOpen(false); }; document.addEventListener("keydown", handler); return () => document.removeEventListener("keydown", handler); }, [modalOpen]). The CSS blob animation is pure CSS — no JavaScript needed for it.