HTML5 Video Embed Trouble

Design help Custom code
1

I’m trying to embed an HTML5 video using the embed HTML widget and having no luck! Nothing shows up.
Though if I paste the URL into a browser they play just fine.

I’ve followed the coding guides and ended up with the following:

<video width="1080" height="640" controls autoplay preload="auto">
<source src="my-video.mp4" type='video/mp4' />
<source src="my-video.webm" type='video/webm' />
<source src="my-video.ogg" type='video/ogg codecs="theora, vorbis"' />
  Your browser doesn't support HTML5 video. Download it <a href="my-video.mp4" download>here</a>
</video>

Any help would be MUCH appreciated!

2

Hi!

URL of the video must resolve. It means if you paste my-video.mp4 in the browser address bar it must play.

It’s not the case in your example because… it leads nowhere. You must host your video files somewhere on a server, or dropbox with a direct link, and have the complete url in your code. Something like this:

<source src="http://domain.com/videos/my-video.mp4" type='video/mp4' />
3

Great, thanks Vincent. Does Webflow not host videos? If not I’ll use dropbox – thanks!

4

No they don’t, use dropbox. Right click on the file and select “Copy link to file”. You’ll get a URL finishing by =0. Replace the “0” by a “1” and test the URL in a browser. It must play or download right away, not show a Dropbox page.

5

You’re my hero. Thank you.

1 Like
6

Vincent, have you had success with html5 videos (not background) on mobile?

Mine works great on desktop, but not mobile… Just shows the poster with an unresponsive play button on it

7

Are you respecting HTML5 video specifications? You need several versions of your video (webm, mp4, ogg, m4v…) declared in the code, to address all platforms. It usually works well for me. Search HTML5 videos on this forum for detailed posts and advices for tools.

1 Like
8

Yes, I went through and created all the versions, not sure what’s going on. But thanks for all your help!

9

Can you paste here the complete embed code you’re using?

10

Hi @vincent,
I’ve tried everything to embed a HTML Video on my Website (just like the videos on Webflow’s landing page that autoplay & loop)

I’ve tried the free version of “easyHTML5Video”, hosted my files on dropbox and when I embed the generated code on my Webflow Webpage it doesn’t work (the player and controls show, but nothing happens)

So I contacted the Webflow support asking how it works on the Webflow landing page, they replied me sending me theyr costum made HTML code snippet from the videoon the landing page, which I also tried to implement (first without chaning, it just to see if it works). But this time only the Poster image shows, but again no video…)

Is it possible that it is not working because I have no paid hosting plan?
I currently have a LITE PLAN (which comes with Enhanced Staging). Would it work if I upgraded to Basic?

43
432018×1614 495 KB

Here are the two code snippets I tried from the Webflow landing page and also the easyHTML5Video site:

Webflow:

    <video playsinline="" loop="" style="max-width: 100%; max-height: 100%; display: block; overflow: hidden; border-radius: 5px;" poster="https://daks2k3a4ib2z.cloudfront.net/583347ca8f6c7ee058111b3b/58d2c35a6dd138d216014587_designer-poster.jpg">

easyHTML5Video:

<video controls="controls" autoplay="autoplay" poster="eh5v.files/html5video/cartoon_website_weiss_01.jpg" style="width:100%" title="cartoon_website_weiss_01" loop="loop" onended="var v=this;setTimeout(function(){v.play()},300)">
cartoon_website_weiss_01
11

Any solution on this?