Lazy Loaded Video Component for Webflow

https://pub-e8f8e014de174f0293dcbbba2aafb43c.r2.dev/13146453_640_360_25fps.webm
https://pub-e8f8e014de174f0293dcbbba2aafb43c.r2.dev/13146453_640_360_25fps.mp4
src: https://www.pexels.com/video/serenity-at-sea-sunset-with-birds-and-boats-30730662/

About the project

‍

This component allows Webflow users to easily add lazy-loaded videos to their pages, enhancing site performance by loading videos only when they come into view. It supports multiple video components on a single page and offers a simple, intuitive setup for non-technical users.

‍

Key features include:

  • Multiple Components: Add and manage several videos on one page.
  • Responsive Dimensions: Easily adjust the video’s dimensions to fit any layout.
  • Autoplay, Loop, Mute: Configure these settings directly for a customized user experience.
  • WebM with MP4 Fallback: Ensures compatibility across browsers with WebM video and a fallback to MP4.

‍

How to Host a Video on Cloudflare R2:

  1. Create Cloudflare Account: Sign up at cloudflare.com.
  2. Set up R2 Bucket: Go to R2 in the dashboard, create a bucket.
  3. Adjust Privacy & CORS: Set read permissions to public, add CORS rule for your site.
  4. Upload Video: Upload your video to the bucket.
  5. Use in Webflow: Embed the video using the provided URL.

‍