Why is the video in my Webflow preloader not showing up on mobile devices?
TL;DR
- Use a Background Video element that's muted and uploaded directly (under 30MB) to ensure autoplay compatibility on mobile.
- Verify the video isn’t hidden in mobile viewports, check interaction triggers for visibility on page load, and test on real devices for accurate results.
If your video in the Webflow preloader isn’t showing on mobile devices, it's likely due to mobile browser restrictions or incorrect Webflow settings. Here's how to diagnose and fix it.
1. Check Mobile Autoplay Restrictions
- iOS and Android browsers block autoplaying videos with audio by default.
- Ensure your video is muted, autoplays, and is inline (not fullscreen).
- In Webflow, these options can be configured using a background video element—this automatically sets autoplay, loop, and mute.
2. Use a Background Video Instead of Video Element
- If you used a standard Video (YouTube/Vimeo) or HTML embed element, it may not autoplay on mobile.
- Switch to a Background Video element by dragging it from the Add panel.
- Upload your video directly (must be under 30 MB).
- This type is optimized for autoplay on all devices when muted.
3. Adjust Styles for Mobile Viewports
- Go into Webflow Designer’s mobile views (tablet, mobile landscape/portrait).
- Make sure the video element isn’t hidden via display: none or opacity: 0.
- Confirm the element has proper sizing and positioning (e.g., width: 100%, height: 100vh) to actually display.
4. Set Preloader Visibility with Correct Trigger
- If your preloader is controlled via interactions, check whether the video is visible on page load across all devices.
- Look into the Page Load trigger: make sure it does not include mobile-specific limitations.
5. Test on Real Devices
- Webflow’s preview may not perfectly simulate mobile browser behavior.
- Publish your site and test it on real iOS and Android devices to confirm behavior.
6. Consider a Fallback for Mobile
- If mobile performance is poor or the video still doesn't play, consider using a GIF, static image, or CSS animation as a fallback only on smaller breakpoints.
Summary
Mobile browsers block autoplaying videos with sound—use a Background Video element, ensure it’s muted, and verify mobile styling doesn’t hide the video. Check all interaction triggers, and test on physical devices to ensure proper display.