Glass Video Player

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)

1. Drop Glass Video Player onto your canvas.

2. Add a source:

   • Upload MP4/WebM or paste a direct URL, or

   • Paste a Vimeo URL or embed code (this overrides other sources)

3. (Optional) Add a poster image for a sharper first frame.

4. Open Play Center and tweak size, offsets, roundness, colors, glass toggle.

5. (Optional) Set an Appear Effect with duration & delay.

6. Publish 🚀