How to Embed an MP4 Video in Webflow without External Hosting

I need to embed an MP4 video into my Webflow project. I don’t want to use external video hosting, as I want to load it from my local device, since I won’t have access to the internet. Do you have any suggestions? Thanks!

Hi @jselva

You could use the Background Video element which allows you to upload a video to your project.

Yup @WisdomainUK but it’s a background video without sound :\

Hey @jselva,

Yeah if you don’t want to use the native embed, you’ll need hosting from someone else. Ultimately, this decision is based on how you want to handle the tag. If you must use the video tag, then the only option is to purchase your own server, and link from there.

If you don’t need that tag, then you’ll want to use an iframe, which for Webflow, is the best in my opinion. This will require a 3rd party hosting service. Not every service will give you an iframe to export, most offer a video link, and you can’t embed that into an iframe. You have to insert only that exact link. And if you want to adjust size, responsiveness, etc. you’re bound to that service’s options before the export.

The range of video hosting services is really long, but I would try to pay around 25-30 per month. Anything above that is overpriced and not going to be worth it long term.

This is the most extensive 3rd party shopping process when using Webflow because videos are so expensive to manage.

Anyway, I hope that helps. Holler if you need a list of options.

If you’re not connected to the Internet, then you are likely exporting your code and serving/accessing it locally?

If so I’d simply put the videos into a separate folder on your local device and use an HTML Embed to reference them manually with <video> elements.

Thank you @garymichael1313 and @memetican. I’m trying with the following code:

<div class="w-embed"><video autoplay="true" playsinline="" style="width:100%;max-height:100%;">
                <source src="file:///Users/JaimeSelva/sample.webm"></video>
</div>

But it’s not working. I’ve tried to open the path and it works, so the problem must be with the Webflow project.

Okay, I think the problem was the spaces in the folder name. Now the video is loading from local :slight_smile:

right now I’m using resources from @tomqwen, as “Stop video when pop up closed

Yeah that’ll work locally, but you’ll need a server to use that code live. The video tag doesn’t work using a reference link, it’ll need a hosted location. It has to pull the video from somewhere on a live server.

Not really, I’ve tested it locally and it works. Right now, I’m working on making the sound work with autoplay. The only way to make it possible is by using JavaScript.

Yep gotcha, but how you going to publish the video? From where? You can’t use your local machine to store the video.