InView Video

What it does

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

Why it matters

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

Key Features

• 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

Perfect for

• Landing pages

• Case study storytelling

• Product showcases

• Portfolio sites

• Agency websites (especially yours 👀)

Controls Included

• Volume

• Fade duration

• Autoplay toggle

• Loop toggle

• Pause when out of view

• Visibility threshold

• Video fit + positioning

• Source type (Upload / URL)