Float
Minimal full-bleed player with a floating glass controls bar that auto-hides on idle.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| video | string | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4 | Video source URL. |
| backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
When to Use
Ideal for portfolio showcases, brand films, and creative agencies where the video is the hero. The floating glass bar disappears after 2.5 seconds of inactivity, letting the footage breathe without UI clutter.
Best Practices
Use with high-quality, visually striking footage — the minimal UI puts full focus on the content. Avoid using for educational or instructional videos where persistent controls are expected.
Why This Component Matters
Removing persistent UI chrome forces viewers to focus entirely on the content. The glass morphism bar feels tactile and premium without competing with the visual narrative — a signature Uilora aesthetic.
FAQ
QHow does the auto-hide work?
A setTimeout resets on every mousemove event over the player. If no movement is detected for 2.5 seconds, the controls fade out. Moving the mouse brings them back instantly.
QCan I change the accent color?
The purple (#7c3aed) play button accent is baked into the component for Uilora branding. Fork the component and update the color constant to match your palette.
QDoes the scrubber preview work here?
Yes — hover the progress bar and a 160×90 canvas thumbnail pops above your cursor showing the frame at that timestamp.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.