[Tutorial] How to add a Custom HTML5 Background Video

thanks for the reply @cyberdave !

anyone here have any good online resources for good background video etiquette ?? (file & frame size, bitrate etc)
want to know the best practices behind well implemented background videos…

Hi @Amreet_Gill, I am not a professional video creator for these kinds of things, and I am interested too in having good quality, and effective videos. I have just started to evaluate a new tool, that let you create living photos either video or animated gif, looks interesting:

I am experimenting also, so if you get some good info, post it here :smile: Cheers !

1 Like

not exactly what i was after, i believe thats a tool used to create cinemagraphs.

i believe Microsoft has a free tool called, Cliplets

not sure if its any good or not.

i am currently using Sorenson Squeeze to compress my videos.

1 Like

Cool @Amreet_Gill, I will have to check it out…I am always on the hunt for good video creating apps :smile: Yeah I am on mac, and currently I use Miro Video Converter which is free. so I will have to try out this Sorenson Squeeze!. I also like to get video clips from online video clip libraries, like graphicstock.com. I am sure there are loads of places to get some good videos though :smile:

should really open a sticky thread for people to submit their favourite apps, sites, tips and tricks.
i personally have quite a lot to share… :smile:

Yes @Amreet_Gill, we have a topic for that, we should organize this a bit or create a list of resources in our help would be a good idea too :). Your Favorite Design Resources - Design inspiration - Forum | Webflow

At this moment i use dropbox for hosting the video. It would be great when we can put some files in Webflow because it looking slow in Dropbox. It would be very nice if Webflow came with a video background element/solution.

[enter link description here][1]
[1]: http://www.wingsofwonders.com

2 Likes

I echo @koen when he says it would be nice to have a background video component in webflow. That would save a lot of time.

3 Likes

I also agree with Koen - I imagine the fantastic Webflow team is already considering hosting files!

2 Likes

Does anyone have a code snippet to mute audio on scroll?
Thanks

GAreth

Thanks for the tut. #2 works fine in Safari, Firefox and Chrome. Accept for my sticky navbar. This couses an issue in Chrome. it appears and disappears randomly and creates a glitchy effect on my page.

anyone have the solution for this?

@darno Thanks for the tut. #2 works fine in Safari, Firefox and Chrome. Accept for my sticky navbar. This couses an issue in Chrome. it appears and disappears randomly and creates a glitchy effect on my page.

How can we fix this?

Hi, is it possible to use a Vimeo video link with this method?

Hi @Mark, this method can be used with Vimeo, if you have the the Vimeo Pro subscription which then gives you direct link to the Vimeo source video file. Free Vimeo account does not let you have access to the direct link.

I hope this helps, cheers !

Dave

how to get the directlink from dopbox to paste it the embeded html

Hi @Archilles_Morales, you should be able to get a public share link from dropbox direct to the MP4. Here is their documentation how to get that link:

Then once you have the link, you just put that path in your embed code that you paste into the embed widget. I hope that helps !

Cheers, Dave

thanks

does this works also of .OGV

Hi @Archilles_Morales, it should work with .ogv, .webm and .mp4 video, and you really should use all three versions in your page, so that you have maximum compatibility with different browsers. Now, one thing to keep in mind, is that we do not control how Dropbox stores the video, so although you can get a link on Dropbox, if for some reason Dropbox puts some restriction on your links, or something like that, then we have no control on that. Things should work though, try it and then if it does not work, come back for more help :slight_smile: Sometimes just doing it, and having to correct yourself a bit while setting it up, is the best way to learn :smile: Cheers !

1 Like

I’ve tried to swap out the URL for my dropbox link (in a public folder) and the screen does nothing but show up black, even after removing the “s”. Does anyone know why this is happening?

Here’s the code i’m using:

video autoplay loop style=“width:100%; height: auto; position:absolute; z-index: -1;”
source src=“Dropbox - Error” type=“video/mp4” /
source src=“Dropbox - Error” type=“application/ogg” /
img src=“Dropbox - Error
/video

Each line is wrapped in <>, I didn’t put them in becasue the code disappears for some reason once I do so.

I’ve tried removing the “www” and that doesnt work either.

Any ideas @cyberdave ?

Thanks!

Hi @Kactus, can you share your site public link, or at least your published site link? The first thing you should check, is if there are any errors on the page, by checking inspect element (right click in chrome) and then go to the Console tab and see if there are any messages… there can be many reasons why the video is not showing, it can be that there is no permission on the video files, or problem with something else.

First find out if there are any error messages in the browser, then address each of those messages to start troubleshooting what the issue might be.

Cheers, Dave