How do I include a webm video in Webflow with autoplay functionality instead of using an animated GIF?
- Upload your
.webmfile to Webflow Assets, copy its URL, and insert it into an HTML Embed element using a<video>tag. - Use attributes like autoplay, loop, muted, and playsinline for seamless playback and optional styling via custom classes.
To include a .webm video in Webflow with autoplay functionality (as a better alternative to an animated GIF), follow these steps using the HTML Embed element.
1. Upload Your .webm File
- Go to your Webflow Project
- Open the Assets panel on the left.
- Click the Upload icon to upload your
.webmvideo file. - Once uploaded, right-click the asset and choose Copy URL. You'll use this in the embed code.
2. Add an HTML Embed Element
Drag an Embed component from the Add Elements panel into your page.
Paste the following code snippet into the Embed, replacing "
YOUR_VIDEO_URL" with your copied asset URL:<video autoplay loop muted playsinline loading="lazy" width="100%"> <source src="YOUR_VIDEO_URL" type="video/webm"> Your browser does not support the video tag. </video>
3. Configure Video Behavior
- autoplay: Starts playing as soon as it loads.
- loop: Repeats continuously like a GIF.
- muted: Required for autoplay on mobile.
- playsinline: Prevents full-screen playback on mobile.
- loading="lazy": Defers loading for performance.
4. Adjust Video Styling (Optional)
- Add a custom class to the Embed element if you need to style or size it specifically.
- Use Webflow’s Style panel to set dimensions, positioning, or responsive behavior.
Summary
To autoplay a .webm in Webflow, upload the video to Assets, copy the URL, and insert it into an HTML Embed using the <video> tag with autoplay, loop, muted, and playsinline attributes. This setup gives you a performance-friendly, high-quality animation replacement for GIFs.