Webflow sync, pageviews & more.
NEW

How can I add a background video to my Webflow site using custom code?

TL;DR
  • Host an optimized MP4 video externally or via Webflow, then embed it using an HTML <video> tag inside Webflow's Embed component.
  • Apply appropriate CSS (absolute positioning, object-fit: cover, z-index: -1) and set the parent container to relative with defined height and overflow hidden for layout control.
  • Ensure the video is muted, autoplays, and includes fallback image support for unsupported browsers.

To add a background video in Webflow using custom code, you’ll need to use an HTML5 <video> element embedded via the Embed component or Page Settings.

1. Prepare Your Video Files

  • Convert your video to formats best supported across browsers: MP4 (mandatory) and optionally WebM and OGV for older browsers.
  • Optimize file size under 5MB if possible for performance.
  • Host your video externally, such as on Dropbox, Amazon S3, Google Cloud, or use Webflow’s file upload if the size is under 10MB.

2. Add an Embed Element in Webflow

  • In the Designer, drag an Embed component (from Add panel > Components > Embed) into your layout where the background should appear.

  • Paste the following HTML code into the Embed panel:

    <video autoplay muted loop playsinline preload="auto" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
    <source src="https://YOUR_VIDEO_LINK.mp4" type="video/mp4">
    </video>

  • Replace https://YOUR_VIDEO_LINK.mp4 with the direct URL to your hosted video file.

  • Make sure styles like object-fit: cover and z-index: -1 are set so the video stays behind other content.

3. Adjust the Parent Container

  • Select the HTML Embed's parent section or div and set its position to relative to allow absolute positioning of the video inside.
  • Style the section with a fixed height, such as 100vh, to display the full video properly.
  • Ensure the section has no overflow issues—set overflow: hidden to crop excess.

4. Test on Mobile and Browsers

  • Most mobile browsers will only autoplay videos that are muted and do not use user data.
  • If autoplay fails, check if the video has muted, playsinline, and loop attributes.

5. Optional: Add Fallback Background

  • Add a background image to the same section so that users without video support see a still image.

Summary

To add a background video with custom code in Webflow, use the Embed component with an HTML <video> tag, ensure proper CSS positioning, and host your video file externally. Make sure it is muted, set to autoplay, and uses compatible formats like MP4.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I fix the issue with blue underlined formatting overriding my text formatting for text links in Webflow?
How can I copy a perfectly designed section from one page to another in Webflow?
Can Webflow allow a GIF to play only once instead of looping indefinitely?
How can I fix the issue with Webflow sites not displaying properly in Samsung Browser's dark mode?
Has anyone experienced issues with autoplay and looping on Webflow when adding a Vimeo video section?
Can Klarna be integrated with Webflow Ecommerce using Stripe's Public Beta?
How can I reverse the order of an image and text in Webflow so that the text appears above the image on mobile view while maintaining the original order on desktop view?
How can I build a series of grids in Webflow that have the same height regardless of content, when column and flex box solutions don't work?
Is it possible to have 54 unique items with multiple options in the Webflow CMS for an e-commerce store, or would this exceed the maximum allowed items in any Webflow ecommerce plan?
Why is the <code>content-type</code> header not being updated in the HTTP request sent from Webflow Logic, despite the proper configuration?
What are the key features and integrations available in Webflow?
How can I style the headings in a CMS Rich Text field that are also links in Webflow?
Is it normal for Webflow to navigate me to my account dashboard without providing notifications or next steps after inputting my student email for the student discount?
How can I embed a stock price widget to display a company's current stock price on a Webflow website?
How can I add a custom thumbnail over the Vimeo player in Webflow, similar to how it is done on Squarespace?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?