How can I set up a loop for an embedded video on the home page of my website using Webflow?
TL;DR
- Drag a Video element, paste the video URL, and add
?loop=1&playlist=VIDEO_IDfor YouTube or enable looping in Vimeo. - Use an Embed component with an
<iframe>tag for more control, adding the appropriate autoplay and loop parameters. - For a seamless loop, drag a Background Video element, upload an MP4 (max 30MB), and Webflow will loop it automatically.
To make an embedded video loop on your Webflow home page, you need to ensure the correct settings are applied. Here’s how you can do it:
1. Use Webflow’s Native Video Element
- Drag a Video element from the Add panel onto your home page.
- Paste the video URL (YouTube, Vimeo, or a direct MP4 link).
- For YouTube, add
?loop=1&playlist=[VIDEO_ID]at the end of the URL (replace[VIDEO_ID]with the actual video ID). - For Vimeo, enable the "Loop" option within the Vimeo settings before copying the embed link.
2. Use Custom Embed Code for More Control
If you need more flexibility, use Webflow’s Embed component:
- Drag an Embed component onto your page.
- Insert an
<iframe>tag with the video source and loop parameters:- YouTube:
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&loop=1&playlist=VIDEO_ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> - Vimeo:
<iframe src="https://player.vimeo.com/video/VIDEO_ID?autoplay=1&loop=1&muted=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
- YouTube:
3. Use Background Video for Seamless Looping
- Drag a Background Video element from the Add panel.
- Upload an MP4 file (limited to 30MB in Webflow).
- Webflow will automatically loop the video without extra settings.
Summary
If using a YouTube embed, append ?loop=1&playlist=VIDEO_ID. For Vimeo, use ?loop=1 in the URL settings. If you need a seamless loop, a Background Video element is the best option.