InView Video — Video that smartly fades audio in view.
This component automatically controls video playback and audio based on visibility.
Audio fades in when the video enters view
Audio fades out and mutes when it leaves
Optional pause when out of view
Prevents playback inside Framer canvas (only works in preview/live)
Supports both uploaded files and external video URLs
Most sites with multiple videos feel chaotic because everything plays at once.
This fixes that.
It ensures:
Focus stays on what’s currently visible
No overlapping audio
A smoother, more premium browsing experience
Smooth audio fade-in / fade-out
Viewport-based playback control
Upload or URL video support
Autoplay + loop options
Responsive by default
Works perfectly in Framer Preview (disabled in canvas)
Clean object-fit + positioning controls
Landing pages
Case study storytelling
Product showcases
Portfolio sites
Agency websites (especially yours 👀)
Volume
Fade duration
Autoplay toggle
Loop toggle
Pause when out of view
Visibility threshold
Video fit + positioning
Source type (Upload / URL)
Urbs Studio
