[Tutorial] How to add a Custom HTML5 Background Video

Hi guys, as many of you I’m using this tutorial in order to add a background video to my website. I got the mp4 video and put it inside the public folder on dropbox and used the public url (with http and https) but I hear the audio of the video but I see only a black box.

Do you have any suggestion on how to actually see my video?

Is it possible to use a video directly from youtube (without audio, without youtube controls)?

Thanks

Hi Fab, youtube will not work.

If you want me to place a BG video,
i can do this for you.
See my site www.Wingsofwonders.com but i need your dashboard login (chance it afterwards).

Hey Kactus, does it work? or do you still need help?
I can do it for you, if you want! rgrds,
Koen

Hi Koen, thanks for your reply. Actually I’d prefer you to explain me how to do it instead of doing it for me, I’d like to learn how to do it, I think it will be more useful for me.

Could you please tell me how to do it?

Thanks

I don’t understand what I’m missing, I just put this code inside the embed widget and it’s not showing the video

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;"><source src="http://www.dropbox.com/s/d5j07y4q54u4yvm/Booking-Yeah.mp4" type="video/mp4" /></video>

Hey @Koen,

That would be great! Do you know what’s currently wrong with the code that I’m using?

I’ve put the public link up above, but here it is again:

https://webflow.com/design/bio442?preview=f319562344001cd9cb45f19444c90d20
http://bio442.webflow.com/

Thanks!

For both of you, it could be different things, the first one is maybe that the link is not good.

i you use:
http://dl.dropboxusercontent.com/u/
in case of:
http://www.dropbox.com/s/

it could work…

Succes!

Hi. I am currently trying to implement the video BG into a site I’m working on. Though, I could get the tutorial to work with the video provided in an above example. I can’t seem to make mine show up. I’ve loaded it on DropBox but my provided Share URL doesn’t end in .mp4, instead it is Dropbox - Error
I have taken out the s in http and have taken off the ending and still no go.

If anyone could help out! That’d be awesome!

Hey Dave,

We’re you able to take a look at the links that I put below?

I’m still struggling with how to properly set up the fill screen background video.

Thanks,

Thanks Koen!

Actually if you take the public link from the dropbox site and use it, it doesn’t work.

If you right-click on the video in your local public folder and copy the public link, it works!

1 Like

Genius!

This worked for me too :slight_smile:

Hey fab,

Does the video background load very slow for you as well?

Yesterday when I added it was kind of slow, but I just tested it and it runs fine.

Cool, the same thing happened for me.

But, were you able to have it responsive to a smaller screen? My video seems to keep it’s width, instead of acting as “cover”. Were you able to have your vid cover the section no matter the size of the screen?

If you adjust the size of your browser on this site, you’ll see what I mean: http://bio442.webflow.com/

Actually I did not continue with my project, I did not have time. Any way, you site seems to work just fine. Reducing the browser window I see that the video is adapting his width too, so I don’t see any problem.

Hi Fab! I’m wondering as to how I can get this code to work. Apparently I can’t get the right code link from my dropbox or my Vimeo for some reason. And my dropbox was started after 2012 so the public share folder doesnt exist in my account. i can only share via the share link. It says for me to access a public folder I have to upgrade to dropbox paid pro account and that’s not a feasible option for me. Is there another way that you know of for me to get the right link?
My dropbox share code looks like Dropbox - Error

and my vimeo looks like

I’ve tried taking the dropbox s out of https and still no go.
I’ve tried multiple different things and I just can’t seem to figure this out

Hey everybody, so I am wondering if the two methods have been updated/utilized lately and successfully?

Method 1: Copying the code from github and pasting it into the custom code section induces a litany of code problems that wont allow you save your changes. About 15 different wrong code detections show up every time.

Method 2: Pasting JUST the embed block with this code that @danro provided shows the video but it is shifted to the right and off the screen.

So, following the directions I put the code block into a section div and make the section div (relative, and hidden). This just flat out makes everything disappear.

Really confused. Seeing that these methods were posted last January I am wondering if updates/changes to webflow or the code has changed things or if this is even working for anyone anymore?

Hi @Jack_John_Joseph_Ame, sorry to hear this is got you confused, it can be at times. If you are having problems getting code to save in the Custom Code section, I can probably give you a workaround for that. Because the workaround is code specific, could you send a support request to support@webflow.com, and I am happy to look at that for you, and provide a solution to your saving code in the Custom Code section problem. Then the other things should work better :smile:

Cheers, Dave

Hello, I have copied the code you wrote and it works for the desktop view but not properly on my mobile views. Instead of the video playing, I get a play button that doesn’t work. What I would like is the video to play for the desktop view and a static image for mobile viewing. How do I do this? My website is www.syncedmedia.com

Hi Cyberdave, can you look at my post to danro. Perhaps you can give me a hand.