Streaming live at 10am (PST)

Embedd full page autoplay video


#1

Hello,

I am tring to embeed a bg video full page with autoplay function and forever looping- it also needs to be responsive.

*Before starting I'd like to know how to access the HTML embed code editor once you click on another element. I double clicked, right clicked but can't work out how to get the editor back to change the code.. maybe is super dumb but can't figure it out smile

**Also, is there any functional, practical difference when embedding a video from Vimeo, Youtube, Dropbox or personal server?

Back to embedding video troubleshooting, what I have done:

1- I have upload a sample video to dropbox. Here is the link:

https://www.dropbox.com/s/3aq65xhncjk5d2f/60708448.mp4?dl=0

That according to this post ( http://forum.webflow.com/t/embed-video-as-a-background/16472 ) needs to be changed to:

dl.dropboxusercontent.com/s/3aq65xhncjk5d2f/60708448.mp4?dl=0

2- I have added an Embed element just below the body

3- I have paste and edited the code from the above link to look like this:





..and of course it doesn't work smile

Any advise?

Here is my webflow share link:
https://preview.webflow.com/preview/dandydiner?preview=0e9c0840dd09cff9492d8cd8f724b581

Any help would be greaty appreciated.
Mattia


#2

It goes on the setting tab, the one with the gear icon.

Vimeo and youtube are easy to embed with the video widget provided by webflow. They will also behave autimatically, serving the video in the best way considering the bandwidth. But you can't autoply them on mobile among other minor downside. They're great because so quick to setup.

Dropbox or server hosted HTML video will require 3 to 5 video files with different formats and compression, plus a poster image, plus a well crafted code. But you can use them on loop and as backgrounds, and get more control over what happens on mobile devices.

oh yes it does, it may be mine own advice

because:

No, it's not the link to the video, it's the link to a page on dropbox with a video player playing the video. Follow the advice to alter the url and domain to get the real link to the video.

Please add http:// in front of any URL you use when doing web development, javascript etc... this will spare you many problems (: For instance it will make your video play:

You can read the post I just made this morning, it usefull to generate all the formats you're going to need:


#3

Thanks

Thanks

Thanks

And Thanks.

All very clear and extremely useful!

Cheers.


#4

Above you say that the link is not directing to the actual video but rather to the page. How do I link it to the video instead?

According to dropbox I did it the correct way (or maybe I am missing something)
https://www.dropbox.com/en/help/167

Would be great if you could clarify on these to avoid future errors.

Thanks!


#5

Sorry it wasn't clear, you have to transform the domain in the URL to this:

So your good link will indeed be:

https://dl.dropboxusercontent.com/s/3aq65xhncjk5d2f/60708448.mp4

Dropbox tells you how to share a file, not how to hotlink a file. They want you to link to their own readers and players, not hotlink the files per se. However, hotlinking is possible and works quite very well.


#6

Ok I see...

Let's keep it hot then

smile

Thank you.
Very helpful.


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.