To add a background video in Webflow, use Add Elements (A) → Media → Background Video. Webflow requires the video to be muted for autoplay to work — this is a browser requirement, not a Webflow limitation. Set a poster image in the Element Settings (D) as a fallback for when the video cannot play. Keep video files under 30MB (Webflow's limit) and use MP4 H.264 format for broadest compatibility.
Webflow Background Video: Autoplay, Loop, Fallbacks, and Performance
A background video adds motion and depth to hero sections in a way that static images cannot. Webflow's Background Video element handles the technical requirements automatically — muted autoplay, looping, inline playback on iOS — but there are several gotchas that trip up designers: the 30MB upload limit, browser autoplay policies requiring muted video, poster image fallbacks for slow connections and reduced-motion users, and the performance cost of unoptimized video files. This tutorial covers the complete workflow from uploading and transcoding your video, to building an overlay text structure, to setting a static poster image fallback. It also distinguishes this approach from using a standard Video embed (which shows controls and requires user interaction) and from background images (which are static).
Prerequisites
- A Webflow project open in the Designer
- A video file in MP4 (H.264) or WebM format, ideally under 30MB — compress with HandBrake or Cloudflare Stream before uploading
- A static poster image (JPG or WebP) matching the first frame or key scene of your video, uploaded to the Asset Manager
Step-by-step guide
Compress your video before uploading
Compress your video before uploading
Webflow's Background Video element has a strict 30MB file size limit and transcodes uploaded videos to 720p maximum. Before uploading, compress your video using HandBrake (free, cross-platform): set Format to MP4, Video Codec to H.264, RF quality to 26-28, resolution to 1280×720 or 1920×1080, and target a bitrate of 1-3 Mbps for a 10-30 second looping clip. WebM format (VP9 codec) gives ~20% better compression but H.264 MP4 has the broadest browser support. If your source video exceeds 30MB after compression, host it on Vimeo (Pro plan) or an S3 bucket and use a custom HTML Embed with a direct video URL instead.
Expected result: A compressed MP4 file ready for upload, ideally under 15MB for fast load times on mobile connections.
Add the Background Video element to your section
Add the Background Video element to your section
On the canvas, select the section or div block where you want the video background. Open the Add Elements panel (A), scroll to the Media category, and drag the Background Video element onto the canvas (or double-click to add it inside the selected element). The Background Video element is purpose-built for this use case — it automatically sets muted, autoplay, loop, and playsinline attributes, which are required for autoplay in all modern browsers. Do NOT use a standard Video element for backgrounds — it shows player controls and does not autoplay without user interaction.
Expected result: A Background Video placeholder appears on the canvas showing a gray box. The element is ready for a video source and settings.
Upload your video and assign it in Element Settings
Upload your video and assign it in Element Settings
With the Background Video element selected, open the Element Settings panel (D, gear icon in right toolbar). Click the Video Source field and choose 'Upload a video' or browse your Webflow asset library. Select your compressed MP4 file. Webflow will transcode the video after upload — this process takes 1-5 minutes and you will see a processing indicator. Once transcoded, the video appears as a preview in the settings panel. If your file exceeds 30MB, Webflow will reject the upload with an error — use an external video host and paste the direct .mp4 URL in the Source field instead.
Expected result: The Background Video element plays your video silently in a loop on the canvas and in preview mode.
Set a poster image fallback
Set a poster image fallback
In Element Settings (D), find the Poster Image field. Click it and select an image from your Asset Manager — choose a frame from your video that works as a standalone image (typically the first or most visually striking frame). The poster image appears in two scenarios: before the video has loaded enough data to play, and on devices or connections where the video cannot autoplay (data-saver mode, reduced-motion OS settings, some mobile networks). Without a poster image, users see a black or transparent area while the video loads. A well-chosen poster image makes the transition from static to video seamless.
Expected result: The poster image is assigned. If you temporarily remove the video source in settings, the poster image displays in its place.
Size the video element and position overlay content
Size the video element and position overlay content
Select the Background Video element → Style Panel (S) → Size: Width 100%, Height 100%. If the video is inside a Section, set the Section to min-height: 100vh (Style Panel → Size → Min Height → 100vh) and Display: Flex with center alignment (Style Panel → Layout → Display: Flex → Justify: Center → Align: Center). For text and CTA overlays on top of the video, do not place them inside the Background Video element. Instead, add a separate Div Block as a sibling inside the section, set it to Position: Absolute (Style Panel → Position → Absolute) with Top/Left/Right/Bottom all 0, and give it a high Z-index (Style Panel → Position → Z-index: 1). Place your overlay content inside this div.
Expected result: The video fills the section edge-to-edge. Text and button elements in the overlay div appear on top of the video with correct z-index layering.
Handle mobile behavior and test autoplay
Handle mobile behavior and test autoplay
On mobile devices, video autoplay behavior varies. iOS Safari allows muted inline autoplay since iOS 10, but high-powered Autoplay restrictions on some Android Chrome settings may block it. The Webflow Background Video element includes playsinline attribute by default, which is required on iOS for inline playback (without this, iOS would open the video in full-screen). Test by clicking the Preview button (top-right eye icon) and viewing on a real mobile device. If the video does not play on mobile, your poster image is the fallback. Consider switching to Tablet breakpoint (Breakpoint Bar) and setting the Background Video element to Display: None if mobile video performance is a concern — the poster image will remain visible.
Expected result: The video plays on Desktop and Tablet. On Mobile where you've set Display: None, the poster image shows as the static background.
Test performance and set up external hosting for large files
Test performance and set up external hosting for large files
After publishing, run your page through Google PageSpeed Insights (pagespeed.web.dev). Background videos that are unoptimized will show in the 'Avoid enormous network payloads' audit. If your video is over 15MB, consider moving to external hosting: upload to Vimeo Pro and use the direct .mp4 URL, or host on AWS S3/Cloudflare R2 with a CDN. For the External Video option, select the Background Video element → Element Settings (D) → Source → paste the direct CDN URL ending in .mp4. External hosting bypasses the 30MB limit and delivers from edge servers closer to the user.
1<!-- Custom Embed approach for videos >30MB or requiring WebM fallback -->2<!-- Place in an HTML Embed element inside your section -->3<video4 autoplay5 muted6 loop7 playsinline8 poster="https://your-cdn.com/poster.jpg"9 style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;"10>11 <source src="https://your-cdn.com/hero-video.webm" type="video/webm">12 <source src="https://your-cdn.com/hero-video.mp4" type="video/mp4">13</video>Expected result: PageSpeed Insights shows improved performance scores. The video loads from CDN edge locations rather than Webflow's origin servers.
Complete working example
1<!-- Use this HTML Embed approach when:2 1. Your video file exceeds Webflow's 30MB limit3 2. You need WebM + MP4 dual-format delivery4 3. You need a preload attribute for performance control56Place inside an HTML Embed element (Add Elements > Basic > Embed)7The section or parent div must be position:relative with a defined height -->89<video10 autoplay11 muted12 loop13 playsinline14 poster="https://your-cdn.com/hero-poster.jpg"15 preload="metadata"16 style="17 position: absolute;18 top: 0;19 left: 0;20 width: 100%;21 height: 100%;22 object-fit: cover;23 z-index: 0;24 "25>26 <!-- WebM for smaller file size on modern browsers -->27 <source src="https://your-cdn.com/hero-video.webm" type="video/webm">28 <!-- MP4 H.264 as the universal fallback -->29 <source src="https://your-cdn.com/hero-video.mp4" type="video/mp4">30 <!-- This text renders if the browser doesn't support video at all -->31 Your browser does not support the video tag.32</video>3334<!-- Overlay div for text content (add as a separate sibling div in Webflow,35 not inside the embed. Set it Position:Absolute, Z-index:1, all edges 0) -->Common mistakes
Why it's a problem: The background video does not autoplay on the published site
How to avoid: All browsers require video to be muted for autoplay. Webflow's Background Video element sets muted automatically, but if you used a standard Video element instead, add the muted attribute manually via Element Settings (D) → Custom Attributes → '+' → attribute: 'muted', value: '' (empty string). Also confirm the video file is not corrupt by testing the direct URL in a new browser tab.
Why it's a problem: Video upload fails with 'file too large' error
How to avoid: Webflow's Background Video element has a 30MB limit and transcodes to 720p maximum. Compress the video first using HandBrake (free). If the video must stay high resolution, host it on an external CDN (AWS S3, Cloudflare R2, or Vimeo Pro) and use the direct .mp4 URL as the source in Element Settings (D) → Video Source.
Why it's a problem: Text elements placed inside the Background Video element are not visible
How to avoid: The Background Video element is not a container for other content. Add a sibling Div Block inside the same parent section. Set that div to Position: Absolute (Style Panel → Position → Absolute), Top/Right/Bottom/Left all to 0, Z-index: 1, Display: Flex for centering. Place your text and CTA content inside this overlay div.
Why it's a problem: The video plays as full-screen on iOS instead of inline
How to avoid: The playsinline attribute is required for inline video on iOS. Webflow's Background Video element adds this automatically. If using a custom HTML Embed with a <video> tag, manually add the playsinline attribute to the tag: <video autoplay muted loop playsinline>.
Best practices
- Always set a poster image in Element Settings (D) — it is the only display for users with Reduce Motion enabled, slow connections, and unsupported devices.
- Keep background video files under 15MB for acceptable load times on 4G connections. Use HandBrake with H.264 codec, CRF 26-28, and a 720p resolution for looping clips.
- Use the Background Video element rather than a standard Video element for backgrounds — the Background Video auto-applies muted, loop, autoplay, and playsinline attributes that are required for browser autoplay.
- Consider disabling the background video on Mobile Portrait breakpoint (Style Panel → Display: None) and relying on the poster image to save mobile data and battery.
- Never place overlay text content inside the Background Video element — add a sibling Div Block with Position: Absolute, all offsets 0, and Z-index: 1 for overlay content.
- Test autoplay on actual iOS and Android devices, not just browser developer tools. Emulated mobile in Chrome DevTools may behave differently from a real device.
- For accessibility, avoid using video as the sole source of important information — all key content should also be present in text or the poster image.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a Webflow hero section with a looping background video. My video is 45MB, which exceeds Webflow's 30MB limit. How do I host the video externally and use it as a background video in Webflow? Walk me through: 1) how to compress and host the video, 2) the exact Element Settings fields in Webflow to paste an external video URL, and 3) how to set up the overlay structure with text on top of the video.
In my Webflow project, I have a Background Video element in my hero section but the video is not showing on mobile devices — just a black screen. My video is properly compressed and under 30MB. Walk me through how to diagnose mobile autoplay issues in Webflow, set a proper poster image fallback, and optionally disable the video on mobile while keeping the poster image as the background.
Frequently asked questions
Does Webflow background video autoplay on mobile?
Webflow's Background Video element adds muted, autoplay, loop, and playsinline attributes automatically, which satisfies modern browser autoplay policies on iOS (since iOS 10) and Android Chrome. However, some Android devices with 'Data Saver' mode enabled or strict battery optimization may block autoplay. Always set a poster image so users with blocked autoplay see a meaningful static image instead of a blank area.
What is the Webflow background video file size limit?
Webflow's Background Video element has a 30MB maximum file size limit. Webflow also transcodes uploaded videos to a maximum resolution of 720p. If your source video exceeds 30MB or requires 1080p quality, host it externally on an S3 bucket, Cloudflare R2, or Vimeo Pro and paste the direct .mp4 URL into the Video Source field in Element Settings (D).
Can I add sound to a Webflow background video?
Background videos in Webflow are intentionally muted because all modern browsers block autoplaying video with sound — the muted attribute is required for autoplay to work. If you need audio, you would need to add a play button that unmutes the video via custom JavaScript, but this defeats the 'background' use case. For narrated or music-driven experiences, use Webflow's standard Video element instead, which allows user-initiated playback with audio.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation