How can I make a responsive video autoplay and loop in Webflow, even on mobile devices?
- Use a custom Embed element with a hosted MP4 video and include the attributes autoplay, loop, muted, and playsinline.
- Style the video responsively with 100% width and auto height or aspect-ratio padding to ensure compatibility across all devices, especially on mobile.
To make a responsive video autoplay and loop in Webflow, including on mobile devices, you need to follow a few key steps and ensure correct settings and attributes are applied.
1. Use a Native Video Element or Embed Custom Video
- Drag in a Video element from the Add panel (only works for hosted videos or YouTube/Vimeo), or
- Use an Embed element to insert custom video code for MP4/WebM files hosted externally (e.g., AWS S3, Bunny.net) or uploaded via CMS.
2. Ensure Autoplay, Loop, Muted, and Playsinline Are Enabled
Videos will autoplay only if they are muted and have the playsinline attribute (especially on iOS).
Whether you're using the native Video element or a custom embed, make sure the video includes the following attributes:
autoplay
loop
muted
playsinline
If using an Embed element, your video tag should look something like this (do not include script tags, just the string in Embed):
<video autoplay loop muted playsinline width="100%" height="auto" src="YOUR_VIDEO_URL.mp4"></video>
3. Make the Video Fully Responsive
- Set the video’s width to 100% and height to auto for responsiveness.
- In the style panel:
- Set width to 100%
- Leave height auto or use aspect ratio (e.g., 16:9) via padding-top on the container (56.25% for 16:9)
4. Optimize for Mobile Playback
- Autoplay behavior is sometimes blocked unless all conditions are met:
- Muted = required
- playsinline = required on iOS/iPadOS
- Use an actual hosted video file (MP4/WebM), since YouTube/Vimeo embeds don't autoplay on mobile reliably due to platform restrictions.
5. Uploading & Hosting the Video
- Webflow does not support direct hosting of HTML5 videos (MP4) outside of the Video element.
- You must host your video securely elsewhere (S3, Bunny, Cloudinary, etc.) and embed via a custom code block.
Summary
To make a responsive autoplaying, looping video on all devices in Webflow, use a custom Embed element with a hosted MP4 file, and include autoplay, loop, muted, and playsinline attributes. Ensure the video is styled responsively using 100% width and height auto or through CSS aspect ratio techniques.