Free Webflow video integration
Webflow’s native video options are either “background-only” (no sound/controls) or embeds from third parties. The workaround is to host the MP4 inside Webflow as a Background Video, then reuse that MP4 URL inside an HTML5 <video> embed so you get sound, play/pause, timeline, and volume, without adding YouTube/Vimeo weight. Keep files under Webflow’s 30MB background video limit and use smart defaults (poster image + metadata preload) to protect performance.
How to add a Webflow video with custom controls (hosted in Webflow)
If you’re a marketing team or Webflow builder who wants a webflow video that behaves like a real on-page player (sound, play bar, play/pause, volume) without external hosting, this is the cleanest method we’ve found. You’ll implement a webflow video with custom controls using Webflow’s own hosting for the file, then an Embed for the player UI.
Webflow’s Background Video component accepts files smaller than 30MB, and that’s the key constraint this method works within.
Step-by-step: Webflow video with custom controls
1) Create a “Video Library” page (private utility page)
- Create a new page in Webflow called something like Video Library.
- Add a Background Video element to the page.
- Upload your MP4 (keep it under 30MB).
- Publish the site (or publish to staging) so the final MP4 URL exists.
Why this works: Background Video is one of the few ways Webflow will host a video file for you directly.
2) Grab the direct MP4 URL in Webflow designer
On the same page where you're creating this and upload background video, open Background Video settings and you'll see an arrow to open video in a browser, just copy that URL.
This link is what you’ll reuse for your custom player.
3) Add an Embed where you want the webflow video to appear
On the target page:
- Drop an Embed element where the video should live.
- Paste the snippet below.
- Replace
PASTE_YOUR_MP4_URL_HEREwith the URL you copied.
Bellow you'll find video player code we prepared for you to use.
1<div style="position:relative; width:100%; aspect-ratio:16/9; background:#000; cursor:pointer;" onclick="toggleVideo(this)">
2 <video
3 id="vid2"
4 src="PASTE_YOUR_MP4_URL_HERE"
5 preload="metadata"
6 playsinline
7 style="width:100%; height:100%; object-fit:cover; display:block;"
8 ></video>
9
10 <div id="btn2" style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;">
11 <div style="width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center;">
12 <svg id="icon2" width="24" height="24" viewBox="0 0 24 24" fill="#000">
13 <polygon points="6,4 20,12 6,20"/>
14 </svg>
15 </div>
16 </div>
17</div>
18
19<script>
20function toggleVideo(wrap) {
21 const vid = wrap.querySelector('video');
22 const btn = wrap.querySelector('[id^="btn2"]');
23 const icon = wrap.querySelector('[id^="icon2"]');
24
25 if (vid.paused) {
26 vid.play();
27 btn.style.opacity = '0';
28 icon.innerHTML = '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>';
29 } else {
30 vid.pause();
31 btn.style.opacity = '1';
32 icon.innerHTML = '<polygon points="6,4 20,12 6,20"/>';
33 }
34}
35</script>
4) Keep it fast: follow a simple “video budget”
Web video affects user experience and search performance. Google recommends strong Core Web Vitals targets (e.g., LCP within 2.5s).
5) Reuse the same hosted file across pages (clean scaling)
Once you have a stable MP4 URL, you can reuse it in multiple embeds (same webflow video, different placements). If you need multiple videos, repeat the “Video Library” upload step per file, then use each file’s URL where needed.
If you’re building a larger site where video is part of the conversion flow (landing pages, product pages, case studies), this pairs nicely with a broader performance/SEO setup like structured content blocks and internal linking.
.svg)
.svg)
