Hero V11

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A cinematic hero for an outdoor brand film that looks like a video background but is made entirely in CSS: a shifting dusk sky, twinkling stars, a setting sun and three mountain ranges panning at different speeds. A large play button opens a native modal dialog holding a 16:9 placeholder player that you swap for a video element or embed. The dialog traps focus, closes with Esc, the close button or a backdrop click, and returns focus to the play button.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 159 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Looping parallax scene in CSS, no video file to load
• Native <dialog> with showModal for focus trapping and Esc
• Backdrop click and close button return focus to the trigger
• Scene pauses while the dialog is open
• Everything stops moving for reduced motion