HTML5 Video embedding issues - Chrome

Community resources General
1

Hi all, I’ve enjoyed learning webflow and transitioning to a visual editor. Having trouble embedding HTML 5 video. Seems to work on Safari, but not on Chrome (even with a .webm source file). I have four videos at the bottom of the page:

First: absolute link to the vimeo player (not working, as a test)

Second: using the Webflow “video” widget (working, but i prefer to self-host)

Third: absolute link using a .webm file (also not working)

Fourth: absolute link using a .mp4 file (also not working)

LINK TO PREVIEW

Thanks for any insight

2

I dont use chrome but for max compatibility I would stick to mp4.
Try that.

3

thanks for looking, I added back the .mp4 file as a fourth option. Still no dice.

4

I got 35 mins, lets see if I can helps you.

5 
<video loop autoplay preload="metadata" style=" width:px;  height:px;">
<source src="https://www.dropbox.com/s/3bvckbups0zwkz7/sdl-2.mp4?dl=1" type="video/mp4">
Your browser does not support the HTML5 video tag.


does that work?
its live code so copy paste the lot!

6

interesting … it didn’t work but i added the controls attribute and now it does.

7

woot, at least we got somewhere.
Does changing the source to yours work?

8

it doesn’t seem to work when I switch out the source to mine. I just double checked the permissions in the directory on my site to make sure it wasn’t that :confused:

9

and that is where I thought your problem might be.
its not just a question of pointing a file somewhere its the source allowing it to stream if you know what i mean.
Even dropbox doesnt work, you have to change mp4?dl=0 to mp4?dl=1
Why is it some complicated, fk knows.
See if you can find out if your filehost has options.

10

hmmm … doesn’t seem to require any special parameters:

https://help.dreamhost.com/hc/en-us/articles/216735448-HTTP-Streaming-overview

11

does it work when published?
Other than that I cant help any more. :frowning:

12

nope, the published link doesn’t work either.

HOWEVER … i just downloaded the zip file & uploaded to my site to see what would happen and it works there.

This will be self-hosted anyway so that works. I guess it’s some weird permissions glitch on Webflow’s end ???

anyway, thanks for your help in troubleshooting this!

13

anytime…

14

Use raw=1 instead of dl-1

15

I will try that, do you know what benefit it has over dl=1 ?

16

Not sure if it helps you. But it helps me thst it works ob mobile / ipad etc.

1 Like
17

Thanks,
Looks like dl=1 streams ok but is designed for downloading.
raw=1 is for streaming only.

Thanks for this.

18

There are also bandwidth limitations for streaming from dropbox. The plus version has unlimited downloads and 200gb a day. The free only 100.000 downloads and 5gb i think.

19

Noted, placing them on dropbox is for small sound files like narration and background looping videos.
Anything of substance needs to be placed on something like youtube and vimeo.

1 has basic or no controls and no branding.
2 has controls and branding.