How to play a video when it comes into view
Playing a video when it comes into view on your Framer page is a straightforward process that can be achieved without any coding.
Steps to set up video auto-play
Add the video component: Drag the video component onto your page. Select it and press ⌥ ⌘ K (Ctrl shift K) to wrap it in a Component. This allows you to create different states for the video.
Create variants:
Create two variants in the component.
Name the first variant “Paused” and set the video to “Playing: No” in the properties panel.
Name the second variant “Playing” and set the video to “Playing: Yes” in the properties panel.
Set up a Scroll Variant effect:
Go back to your main page and select the video component.
In the properties panel, add a Scroll Variant effect.
Set the trigger to “Layer in View” so the effect activates when the video enters the viewport.
Configure the effect with “From: Paused” and “To: Playing” to switch states as the video comes into view.
Now, your video will automatically play when it enters the viewport.
Important notes
Videos will only auto-play in the browser if they are muted. Browsers block auto-play for unmuted videos, so ensure your video is set to mute.
For a practical example and tutorial, check out the Framer Video Auto-Play Example or Topbar Animation on Framer.
By following these steps, you can add interactive, auto-playing videos to your Framer projects.
Still experiencing the issue after following the steps above? Create a support ticket in the Community.