Where is the HTML code for the background video located in Webflow if I don't use Webflow hosting and there is no 'documents' folder in my site?
TL;DR
- Export your project from Webflow and inspect the HTML files using a text editor like Notepad++.
- Search for div elements associated with background videos rather than direct video tags to find and modify video settings.
If you're using Webflow but not its hosting, locating the HTML code for a background video can be a challenge without a 'documents' folder. Here's how you can access and edit it.
1. Understanding Webflow Export
- When you export your project from Webflow, you won't find a specific 'documents' folder as Webflow structures its exports differently.
- Your files will be organized into folders for HTML, CSS, JavaScript, and Images.
2. Locate the Video Tag
- Export your site via the Webflow Dashboard.
- Open the HTML file corresponding to the page where your background video is used. This file is usually named index.html if it's the homepage or otherwise named after the relevant page.
3. Search for Background Video
- Open the HTML file in a text editor like Notepad++ or Sublime Text.
- Search for video tags using terms like
<video>orbackground-video. - Webflow does not directly use HTML
<video>elements for background videos; instead, it embeds videos in<div>elements, which will be styled with CSS to handle the video.
4. Modify Video URL or Settings
- Once identified, you can modify the source URL or parameters within the
<div>elements or related CSS styles. - Adjust things like
data-video-urlor look within script tags for JavaScript that initializes video backgrounds.
Summary
To find the HTML code for a background video in Webflow when not using its hosting, export your project and inspect the HTML files using a text editor. Look for related <div> elements rather than direct <video> tags. Adjust video settings as required within these elements.