Cinematic Video Banner - Immersive Lightbox Hero

Elevate your website's first impression with the Cinematic Video Banner. Designed with the polish and elegance seen on "Awwwards" winning sites, this widget combines high-impact photography with an immersive video experience.

Instead of autoplaying a heavy background video immediately, this widget uses a high-resolution static image (<img>) as the backdrop. This ensures lightning-fast page load speeds while still setting the mood. A dark, cinematic overlay ensures your bold, editorial-style typography remains perfectly readable against any image.

The centerpiece is the interactive Play Button. When clicked, it triggers a smooth, full-screen Video Lightbox (Modal). The video fades in and scales up creates a theater-like experience without forcing the user to leave the page. The JavaScript logic handles the playback seamlessly—autoplaying the video when the modal opens and stopping it immediately when closed.

Key Features:

• Performance-First Design: Uses a standard <img> tag for the background, offering better SEO and faster loading than heavy video backgrounds.
• Immersive Video Lightbox: A custom-coded modal window that overlays the screen, focusing the user entirely on your content.
• Cinematic Transitions: Features smooth opacity fades and subtle scale animations for a premium, app-like feel.
• Smart Playback Control: Automatically starts the video on open and resets it on close to prevent background audio issues.
• Universal Compatibility: The modal <iframe> supports YouTube, Vimeo, or hosted video links.
• Fully Responsive: The layout adapts from a spacious desktop hero to a compact, stacked mobile view.