How to add a mp4 file

Design help General
1

could anyone please explain to me how to add a mp4 file?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

could anyone please tell me how to add a MP4 file video on Webflow? I need to add this video which is never been uploaded anywhere, so there’s no URL for it.

3

Webflow only allows uploading background videos, which are limited in size, and optimizes them for that use. You cannot load video files into assets and host them. People generally use other services for that like YouTube or Vimeo for example. Details about the types of files supported are listed in the University.

2 Likes
4

Hey there! I found this website that is hosted on Webflow and there’s a video embed that isn’t from Youtube or Vimeo, it seems. Astro Cannabis

Do you have an idea how this is done? I’d like to achieve the same. The inspect link somehow suggests that it’s hosted on Webflow… but I’m wrong perhaps?

5

@panikovsky901 - Inspect the video with browser devtools and you will see exactly how it is done. Embed with HTML5 video element and video hosted on a URL accessible to the visitor.

6

I did inspect it: it says “hosted by Webflow”, so wasn’t sure…

7

I meant the actual page source for the embed element. Here it is.

<video playsinline="" autoplay="" muted="" loop="" width="100%">
  <source src="https://uploads-ssl.webflow.com/60e72ba448754a0893f612d7/614234e1b89254d49ce216ba_AASTRO-transcode.mp4">
</video>

The source is a background video they uploaded to their project and grabbed the value of to use in the embed.

8

I think I almost understood… (sorry, I’m still learning here). So it seems like the person is using a 2-column section, right? In the one, there’s an image, and in the other one, they just put the background video inside? Tried doing that, but then doesn’t seem to be possible to control the margins+background in that video column, because the video fills up the whole space.

Or what exactly did you mean by “grabbed the value of it to use the embed?”. I can’t seem to see any embeds when I upload the vid as a background video?..

9

I’ve experimented with this somewhat. One way I found to be successful is:

  • first upload the mp4 video to Dropbox or a similar cloud based storage platform
  • make sure the mp4 has no restrictive permissions so that it can freely be shared or embedded.
  • In webflow, go to “Add Elements”. Then select the “Embed” Component and place it within your page structure. Open the “Embed” component and paste this code:
<video controls autoplay playsinline poster="www.thumbnailurl.com" style="max-width:100%;width:100%; height:auto; max-height: 100%">
  <source src="www.mp4videourl.com">
</video>

Grab the urls for both the thumbnail of your video and the actual mp4 video and paste them instead of the placeholder urls. Then it should work.

for more information about the Video tag used in the code above, see here

2 Likes
10

Hm! Didn’t really work for me…

11

Are you sure the url you’re using for the thumbnail and video are correct? If you’re using Dropbox for example, you have to select Link Settings so that anyone with the link can view.

Screenshot 2022-08-29 at 09.59.34
Screenshot 2022-08-29 at 09.59.341082Ă—234 15.7 KB

12

Hi Olga, here’s a Loom video walkthrough on the basic setup.

You’ll need to read up on the HTML5 <video> element to determine what settings will work best for your goals. You’ll also likely need to prepare your videos specially so that they’re portrait, rather than landscape, for your columnated layout.

https://video-demo-f384a8.webflow.io/

https://preview.webflow.com/preview/video-demo-f384a8?utm_medium=preview_link&utm_source=designer&utm_content=video-demo-f384a8&preview=3749e31605231e520febd5a40f2debe9&workflow=preview

1 Like
13

That is really a deal-breaker imo. Even Adobe Portfolio host videos.

14

@Jakob_Thuemoes - I personally recommend Vimeo as the best solution on Webflow. Works for me and my clients. But I feel your pain as everything extra adds up quickly and eats our profits.

15

It doesn’t let me preview it or test it. Any tips on how to do so?

16

Also, can you use the same viedo link for the thumbnail if you don’t have a thumbnail to use?

17

Thank you so much, your awesome !

18

@Davide_Martinelli there are two ways to upload the MP4 video in webflow.

firstly upload the video in the background video and publish it:

image

then pick the video URL src

image
image1838Ă—702 190 KB

then add into the embed code like this:

<video playsinline="" autoplay="" muted="" loop="" width="100%">
  <source src="https://uploads-ssl.webflow.com/630e00312de75c578a95ebfb/650adc936238375baa9e4c99_6176439f8c32ee43bb74400c_lp-camera-launch-hero-video-1550x1025@2x_4-transcode (1)-transcode.mp4">
</video>