How to embed MP4 videos into my site

Community resources General
1

Hello. I’m trying to embed two MP4 files into my site. I noticed that this is a topic that’s come up before in the forum, but I can’t find a definitive answer on how to do this.

They’re short animations. I’d like them to play automatically and loop. I do not want any controls visible, only the looping video. Currently I host them myself, so I have URLs. Should I use the HTML embed component? If yes, what is the best code to use?

Thanks in advance for your help!

1 Like
2

Played with this in the past but my knowledge of code was meh,
I thought lets have another go now I understand the settings and perculiarities of hosting and so on.
Woot, I got what I wanted and I think its what you want.
If it is, tick the love heart and solution please.

Here is the code.

<video loop autoplay >
<source src="https://www.dropbox.com/s/3bvckbups0zwkz7/sdl-2.mp4?dl=1" type="video/mp4">
   </video>
3

Hey @iDATUS. Thanks.
This almost works. The good news is that the video plays automatically and loops; and there are no controls. But I can’t control the size. I have it sitting in a column, and it exceeds the size of the column. Any idea how to control the size?

4

Thought you might check out the html video settings such as I.
They include lots of other bits but I will show here the setting you can play with.
video loop autoplay width=“320” height=“240”
dont for get the < and > start and end

5

Figured it out:

<video src="https://www.dropbox.com/s/3bvckbups0zwkz7/sdl-2.mp4?dl=1" width="100%" height="100%" loop="loop" autoplay="autoplay"></video>

Thanks so much!

6

Brill, now dont forget the ticks :wink:

7

Hmm … in the Webflow dashboard, things are fine. But the movies don’t play when published in Chrome but rather appear as static, and in Safari the movies appear as blank white boxes.

8

OK, this is the code I wound up using:

<video src="https://player.vimeo.com/external/464270324.hd.mp4?s=27bd8e0f1e5163bd04b250c85da2bf954c07d405&profile_id=174" width="100%" height="100%" loop="loop" muted="muted" playsinline="" autoplay="autoplay"></video>

1 Like
9

Did this end up working on your live site? I’m trying to do the same thing and it works fine in Webflow but is not working on the live site. It’s driving me crazy…

Here is my read only link:
https://preview.webflow.com/preview/spark-4f073a?utm_medium=preview_link&utm_source=designer&utm_content=spark-4f073a&preview=355557a688c124ef58c7b57ccf6f3df1&mode=preview

And here is the live link:
https://spark-4f073a.webflow.io/

10

Try converting to lottie and uploading that json file - Video To Lottie Converter - Isotropic

I can’t really test this as I was thinking of using it in a CMS item, so some were animated, but can’t seem to have a featured image or video instead on some items

11

Hi @oread

There are two different ways to achieve this desired outcome for those still wondering. The first would be to use Vimeo (or YouTube) to hose your video on. This is fairly straight forward and consists of uploading your MP4 file onto these platforms and using Webflow’s standard video widget.

Or if you’d rather doing it natively, you can host it as an MP4 file on the assets panel, from here you can add a video element to your code. Simply add a click on the elements panel and click on ‘Embed’ under the ‘components’ section. Then, copy and paste this code boilerplate and add your video file under the ‘src’ attribute:

<video controls>
    <source src="video/nameofvideo.mp4" type="video/mp4">
</video>