Glass Video Player
A modern glassmorphic video player — upload, URL or Vimeo, custom controls, center play, scroll-autoplay, PiP, fullscreen & smooth appear effects.
Make it with Workshop
Build your own component with AI
A modern glassmorphic video player — upload, URL or Vimeo, custom controls, center play, scroll-autoplay, PiP, fullscreen & smooth appear effects.
Make it with Workshop
Build your own component with AI
Glass Video Player is a modern, production-ready video player for Framer.
It supports local uploads, direct MP4/WebM URLs, and Vimeo links or embed codes. By default, Vimeo videos use the same custom glassmorphic controls, but you can also switch to Vimeo’s native controls.
It features a frosted glass control bar and an optional glass play circle. The center play button is fully customizable (size, scale, offsets, color, and roundness).
Appear Effects
Give your video a smooth entrance with modern animations. Choose from Fade, Fade + Scale, Slide, or Blur → Sharp, with adjustable direction, duration, and delay.
Perfect for landing page heroes, dynamic reels, or cinematic showcases.
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 with a Safari fallback.
(PiP is available on HTML5 sources; Vimeo does not support custom PiP.)
Key features
Multiple sources — Upload (mp4/webm), direct URL, or Vimeo URL/Embed
Vimeo-ready — custom controls by default; toggle Vimeo native controls if preferred
Glassmorphism UI — frosted, blurred controls; optional glass play circle
Appear Effects — Fade, Fade+Scale, Slide (with direction), Blur → Sharp
Autoplay on Scroll (section-aware) — start/stop playback when section is in view
PiP built-in (HTML5 only) — browser PiP API + Safari fallback
Center Play controls (grouped) — Circle Size, Icon Scale, Roundness, Offsets, colors, shadow/hover, glass toggle
Auto-hide controls — clean, distraction-free viewing
Playback rate & timecodes — optional, simple, readable (HTML5 only)
No letterboxing — always fills the frame with optional poster image
Accessibility & keyboard — Space/K play-pause, ←/→ seek, M mute, F fullscreen, I PiP
How to use (2 minutes)
Drop Glass Video Player onto your canvas.
Add a source:
Upload MP4/WebM or paste a direct URL, or
Paste a Vimeo URL or embed code (this overrides other sources)
(Optional) Add a poster image for a sharper first frame.
Open Play Center and tweak size, offsets, roundness, colors, glass toggle.
(Optional) Set an Appear Effect with duration & delay.
Publish 🚀
