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.
Didn't solve the issue? Get in touch with us via our contact page for more help.
FAQ
How can I set up a video in Framer to automatically play when it enters the viewport?
To set up video auto-play in Framer, first add the video component to your page. Select it and press ⌥ ⌘ K (Ctrl Shift K) to wrap it in a Component, which allows you to create different states. Next, 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'. Then, on your main page, select the video component and add a Scroll Variant effect in the properties panel. Set the trigger to 'Layer in View' so the effect activates when the video enters the viewport, and configure it with 'From: Paused' and 'To: Playing'. This will make your video automatically play when it comes into view.
Why isn't my video auto-playing in the browser when it comes into view?
Videos will only auto-play in the browser if they are muted. Browsers block auto-play for unmuted videos, so make sure your video is set to mute in the properties panel.
Where can I find a practical example or tutorial for setting up video auto-play in Framer?
For a practical example and tutorial, you can check out the Framer Video Auto-Play Example at https://xn----9sbmqji2czbya.xn--p1ai/__framer_com/projects/new?duplicate=7N7M1y4YbPsATpstFFc6 or the Topbar Animation on Framer at https://topbar-animation.framer.wiki/.
Updated
