Glass Video Player
A modern glassmorphism video player for Framer with a customizable center play button and built-in Picture-in-Picture (PiP) support. Clean, fast, and accessible.
Make it with Workshop
Build your own component with AI
About this Component
What it isGlass Video Player is a polished, production-ready video player for Framer. It features a glassmorphism control bar and an optional glass play circle that matches it perfectly. The center play button is fully customizable (size, scale, offsets, color, and corner-roundness).
What is Picture-in-Picture (PiP)?PiP lets viewers pop the video into a small floating window that stays on top while they browse other pages or apps. This component supports the standard PiP API and includes a Safari fallback.
Key features
Glassmorphism UI — frosted, saturated, blurred controls; optional glass play circle toggle to mirror the control bar style.
Autoplay on Scroll (section-aware) — start/stop playback when the chosen section is in view.
PiP built-in — works with the browser PiP API + Safari fallback (click the PiP button or press I).
Center Play Controls (grouped) — Circle Size, Icon Scale, Icon Roundness, Offset X/Y, colors, shadow/hover, glass toggle—kept together for quick edits.
Auto-hide controls — clean, distraction-free viewing.
Playback rate & timecodes — optional, simple, and readable.
No letterboxing — cover fit with a crisp poster option.
Accessibility & keyboard — Space/K play-pause, ←/→ seek, M mute, F fullscreen, I PiP. Custom ARIA label.
How to use (2 minutes)
Drop Glass Video Player onto your canvas.
Add a source: upload an MP4/WebM or paste a URL.
(Optional) Add a poster image for a sharper first frame.
Open Play Center and tweak Circle Size, Icon Scale, Offset X/Y, Icon Roundness, colors, and Glassmorphism toggle.
Publish. That’s it.
Best for
Landing page heroes, product demos, trailers, case studies, reels/shorts libraries.
