Why is the video in my Webflow preloader not showing up on mobile devices?
TL;DR
- Use a muted MP4 (H.264) video with autoplay and loop enabled instead of a Background Video element.
- Check mobile breakpoints to ensure the video isn’t hidden and adjust z-index or overflow settings to prevent visual blockage.
Your preloader video not showing on mobile devices is likely due to limited autoplay support, media format compatibility, or hidden styles applied on smaller breakpoints.
1. Autoplay Restrictions on Mobile Devices
- Most mobile browsers block video autoplay unless it's muted and does not use sound tracks.
- If your video has audio or lacks a
mutedattribute, it won’t load or start on mobile. - Solution: Use a muted video without sound, and make sure Autoplay and Loop are enabled in the video element settings in Webflow.
2. Use of Background Video Element
- The Background Video component in Webflow only works with desktop browsers. On mobile devices, it often won't display, especially on iOS.
- Solution: Replace the background video with a Video element wrapped in a
div, and set proper layout styles.
3. File Format Compatibility
- Some mobile devices have limited support for certain video formats.
- Preferred format: MP4 using the H.264 codec.
- Solution: Ensure the video you uploaded uses MP4 with H.264/AAC encoding.
4. Breakpoint-Specific Display Settings
- Your preloader video or its container may be hidden on mobile breakpoints using display: none or other style settings.
- Solution: Check Tablet, Mobile Landscape, and Mobile Portrait views in Webflow Designer to ensure the video isn’t hidden or styled improperly.
5. Z-Index or Overflow Issues
- The video may be loading but visually blocked by other layers.
- Solution: Ensure the preloader section has a high z-index and no
overflow: hiddenissues in parent containers.
6. Heavy File Size or Slow Load Times
- Large video files may delay preloaders, especially on slower mobile networks.
- Solution: Use a compressed video optimized for web and mobile (under 1 MB if possible).
Summary
To make your preloader video show on mobile, ensure the video is muted, uses MP4 (H.264) format, is not hidden on mobile breakpoints, and is embedded using a Video element rather than a Background Video. Avoid autoplay with sound and optimize file size for faster load times.