A circular, full-cover video player that masks media inside a perfect circle with a clean overlay. A centered play button and a compact duration chip keep the UI minimal, while smart scaling preserves composition for any source. Ideal for elegant hero sections, avatars-with-video, and modern product pages.

Functionality

• Circular mask with edge-to-edge “cover” scaling

• Center play/pause button with tap/hover feedback

• Compact duration chip (mm:ss) with contrast background

• Optional circular progress ring around the edge

• Autoplay, loop, start-at-position, and muted-start options

• Gesture support: tap to play/pause, drag to scrub (optional)

• Lazy loading with lightweight poster/thumbnail

• Buffering state and error/retry fallback

• Theming: ring thickness, overlay opacity, shadow, radius

• Works with local assets, MP4, and HLS sources

• Responsive sizing (fixed px, %/constraints) for mobile & web

• Accessibility labels and larger hit targets

• Analytics hooks: play, pause, complete, and seek

Use cases

• Circular hero blocks on landing pages

• Avatar/profile tiles with intro video

• Music/podcast covers with looping motion

• Product showcases and micro-teasers

• Portfolio grids and gallery cards

• Social widgets and story highlights

• Minimal blog embeds and editorial layouts

• Onboarding moments and success screens

• Ambient background loops in dashboards

Keywords
circular video, round video player, circle mask, full-cover scaling, play button, duration chip, progress ring, looping video, muted start, autoplay, overlay controls, lightweight player, poster image, buffering indicator, error fallback, responsive video, mobile web video, HLS, MP4, gesture controls, draggable scrub (optional), accessible controls, analytics events, minimal UI, modern media player, hero section video, avatar video, product teaser, gallery card, Flutter widget, FlutterFlow component, adaptive layout, soft shadow, premium styling, edge-to-edge, smooth playback.