How can I implement HTML5 videos as a background video on mobile using Webflow?
TL;DR
- Compress and convert your video to .mp4, then host it where direct linking is allowed.
- Use a Webflow Embed element with custom HTML5 video code inside a styled div container to display the background video on mobile.
- Set the original Webflow Background Video to hide on mobile, and the embed version to hide on desktop for proper responsiveness.
Webflow disables background videos on mobile by default, but there are workarounds if you want to show HTML5 videos on mobile devices. Here's how to do it using a custom embed and styling techniques.
1. Prepare Your Video
- Compress and optimize your video for mobile to reduce load time.
- Convert the video to .mp4 format, as it's the most compatible across mobile browsers.
- Upload the video to a hosting solution that allows direct file access (e.g., AWS S3, Dropbox direct link, or a CDN).
2. Use an Embed Element Instead of the Background Video Component
- Webflow’s Background Video component won’t display on mobile, so use an Embed element instead.
- Drag an Embed into your layout where you want the video background to appear.
3. Paste Custom HTML5 Video Code in the Embed
Paste the following code snippet in the Embed element (replacing the video source with your own link):
<video autoplay muted playsinline loop loading="lazy" style="width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; z-index:-1;">
<source src="https://yourdomain.com/your-video.mp4" type="video/mp4">
</video>
- autoplay muted playsinline loop — Ensures the video auto-plays without sound and loops on mobile.
- loading="lazy" — Improves mobile performance.
- object-fit: cover — Makes sure the video fills the container.
- position: absolute; z-index:-1 — Places it behind other content.
4. Set the Parent Element’s Style
- Wrap the Embed in a div block that acts as the video background container.
- Set the container to:
- Position: Relative
- Width/Height: 100% or desired dimensions
- You can also apply a mask or overlay for visual clarity.
5. Hide the Webflow Native Background Video Component
- If you’re using both versions (desktop Webflow Background Video + mobile custom embed), set the original Background Video element to be hidden on mobile using Webflow’s Display: None in mobile breakpoints.
- Conversely, hide the custom Embed version on desktop so only mobile shows the workaround version.
Summary
To use an HTML5 video as a background on mobile in Webflow, avoid the native Background Video component and instead use a custom Embed element with an HTML5 video tag inside a styled container. This ensures compatibility across mobile devices while maintaining design flexibility.