Framer tutorial: Autoplay video when in view

Adding video to a Framer site is simple; drag the YouTube, Vimeo or Video component onto your page to add your video. However, what if you want the video only to play when in view?

In this tutorial, I will go through the steps to create a custom video component that will autoplay when in view and offer a landscape or portrait version of the video.

Creating a custom video component in Framer

In the example project, I have a skeleton or wireframe for a page built out. The video section is further down the page, above the form. I will insert the Framer video component as I will be uploading my video. However, you can use the YouTube or Vimeo component instead.

Here’s how:

1. Drag a video component onto the page
   
   

   • I will use the video component for this tutorial and replace the placeholder.

   • The placeholder is in a container with a max-width of 960px.

   • Lock the aspect ratio and set it to fill the container.

   • Frame the video and name it, for example, 'Video player'.

   • Add a border radius (optional).

   • Lock the aspect ratio of the frame as well, and set it to fill.

   • Ensure the video component has a locked aspect ratio with relative width set to 100%.
     
     

2. Create a component
   
   

   • Turn the 'Video player' layer into a component (Mac: Option+CMD+K).

   • Name the primary variant "Desktop - Paused".

   • Add an overlay by using layout > frame and dragging out a frame and naming it 'Overlay'.

   • Set the overlay Z-index to 1, add a colour fill, reduce the opacity and then lock the layer.

   • Insert an icon for the play button; set the Z-index to 2, and absolute position it.

   • Select the video component and ensure Play is set to No, Muted is set to Yes, and Controls is set to Hide for the paused variant.

   • Upload the video (or add a URL if self-hosted).

   • Upload a poster image.

   • Duplicate the primary variant and name it "Desktop - Playing".

   • Set the opacity for both the overlay and play button to 0.

   • Select the video component and ensure Play is set to Yes, and Muted is set to No for the playing variant.

   • Exit the component editor to go back to the page.
     
     

3. Apply the scroll effect
   
   

   • With the Video player component selected, add the scroll variant effect via the properties panel.

   • Apply the following settings: Trigger: layer in view (or section in view for scroll section), Start: Middle, From: Desktop - Paused, To: Desktop - Playing.

   • Preview the effect.
     
     

4. Create a phone variant (optional)
   
   

   • Open the component editor.

   • Select the video component of the primary variant and rename it '16:9 video'.

   • Duplicate the video component and name it '9:16 video'.

   • Swap the width and height values (unlock the aspect ratio first) for the 9:16 video and hide the component.

   • Upload the video (or add a URL if self-hosted) for the 9:16 version, update the poster and hide the component.

   • Duplicate the primary variant and rename it "Phone - Paused".

   • For "Phone - Paused", hide the 16:9 video component and show the 9:16 version.

   • Swap the width and height values (unlock the aspect ratio first) for variant "Phone - Paused" and ensure the video is set to relative width 100%.

   • Duplicate the "Phone - Paused" variant and rename it "Phone - Playing".

   • Set the opacity for both the overlay and play button to 0.

   • Select the 9:16 video component and ensure Play is set to Yes, and Muted is set to No for the playing variant.

   • Exit the component editor to go back to the page.

   • Select the video player component for the phone breakpoint, via the properties panel, change the variant to "phone paused' and update the scroll variant settings.

   • Update the following settings: From: Phone - Paused, To: Phone - Playing.

   • Preview the effect.
     
     

5. Add Interactions (optional)
   
   

   • You can improve the usability of the component by adding a click state interaction between variants to trigger the paused or playing state on click.

Uploaded video limitations

Framer limits your upload size based on your plan, and it is recommended to keep videos under 20 MB. Additionally, Framer does not optimise video playback for the web, so using a streaming service like YouTube or Vimeo is advised if you have large video files. Some browsers may block auto-play of videos if they are not muted, and YouTube is not recommended for auto-play.

Optimising video for the web with Framer

Ensure all self-hosted or uploaded videos include a poster (take a screenshot of a frame if you don't have an image to upload). To compress videos, use tools like Compress or Handbrake with “Web Optimised” settings.  Export using the H.264 codec with the “.mp4” file extension, which is universally supported across browsers.

Learn more here

Conclusion

Having video autoplay when only in view is a good practice, as it will not consume unnecessary resources when not in view. However, unoptimized videos may have playback issues in some browsers and using a streaming service would be recommended.

Watch the full walkthrough video above for a visual guide through every step.

Preview the project here

Remix the project here

Try Framer for free

Hire a Framer Expert

Affiliate disclosure:

As a Framer Partner, I may earn from qualifying plan purchases at no cost to you.

AI disclaimer:

This article contains original content. However, AI may have been used to generate content from transcripts or to correct the grammar, spelling, and formatting of existing content.