[Tutorial] How to add a Custom HTML5 Background Video

sunjay · November 11, 2014, 3:06pm

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

a_s_lee · November 28, 2014, 4:54am

Hi, Did you ever get an answer to the problem with the fixed navbar not working with the video background? I have the same problem. The navbar is set to be fixed and works fine UNTIL i add the video to the page. The the navbar scrolls up as if it is not fixed.
Any help is much appreciated!
Lee

Daniel_Ace · December 1, 2014, 1:09am

HTML 5 video does not want to work !
I have used several video. Remove and add the “S” in part “HTTP”, but instead of a video I have black block .

I can not be so stupid … or can? =)

Somebody tell me : " You stupid because you have a bug here and here ! You need to fix it this way …"

I’m tired of fighting it . It does not work (((
Help me, please !

https://webflow.com/design/rukopash-na-volge?preview=58c39d5f2b696532064d28d73ecfa0d5
http://rukopash-na-volge.webflow.com/

vincent · December 1, 2014, 10:38am

@Daniel_Ace your code can’t work.

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: 0;">
  <source src="http://vid.me/delete/9wsvsiphsfco4wookwko4gs8" type="video/mp4" />
  <source src="http://vid.me/delete/3ya2990winms084o84ssgg4k8" type="video/ogg" />
  <source src="http://vid.me/delete/5xq23qdrh9s8ogc0soko44ksw" type="video/webm" />
</video>

All the URLs have to be direct URls to video files. Like http://www.domain.com/video.mp4. For instance, if I copy one of your URL into a browser, I get an error message. So you need to host your video files somewhere (it’s possible on Dropbox, opr any FTP linked to a http server will work too.) When you will be able to resolve the URLs of your videos, your code will work.

I found hosted videos, you can try to add their URL’s in your code, you’ll see, it will work:

http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogg
http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm

Daniel_Ace · December 1, 2014, 12:01pm

Sorry @vincent . Links are out of date , so they could not show anything.
You’re right, your video really works.
But here I changed the link to the video that is uploaded in DROPBOX, replaced by “https” at the “http” and they do not work . Or is it not a link to a file that you want to take? I do not know where to get another.

Maybe it’s much easier and I need to purchase a pro account?

Это мой код с новыми ссылками. All links lead directly to the video files И видео не работает.

 <video autoplay loop style="width:100%; height: auto; position:absolute; z-index: 0;">
      <source src="http://www.dropbox.com/s/24fat58pghazed6/6007136.mp4?dl=0" type="video/mp4" />
      <source src="http://www.dropbox.com/s/ctpfwb6xp20oo01/6007136.oggtheora.ogv?dl=0" type="video/ogg" />
      <source src="http://www.dropbox.com/s/yq158abkdyl1243/6007136.webmhd.webm?dl=0" type="video/webm" />
    </video>

vincent · December 1, 2014, 12:22pm

Ok @Daniel_Ace the link to your video MUST be the link to the file, directly. When you link to dropbox like that, dropbox take over avec plays the vid in a player, so this will never work.

For this to work, replace www.dropbox.com by dl.dropboxusercontent.com. So your code should be:

 <video autoplay loop style="width:100%; height: auto; position:absolute; z-index: 0;">
      <source src="http://dl.dropboxusercontent.com/s/24fat58pghazed6/6007136.mp4?dl=0" type="video/mp4" />
      <source src="http://dl.dropboxusercontent.com/s/ctpfwb6xp20oo01/6007136.oggtheora.ogv?dl=0" type="video/ogg" />
      <source src="http://dl.dropboxusercontent.com/s/yq158abkdyl1243/6007136.webmhd.webm?dl=0" type="video/webm" />
    </video>

I bet this is going to work now.

Daniel_Ace · December 1, 2014, 1:46pm

It works! @vincent you are a God of background Video! Thanks!

vincent · December 2, 2014, 9:26am

Lol, you’re welcome (:

Although I’d prefer something more glamorous, like the god of all pleasures on earth. Not that I dislike background video, but still (;

pedroturambar · December 16, 2014, 6:40pm

Hi @danro, there is this problem with Method #2 in my case.

After a follow the instructions, any next section i add after de section with de vid, goes on the vid, not after it. And absolutely nothing i try make it happen.

I also tried to copy the exactly parameters of your public link, and yet, doesn’t work.

Can you help?

here is my public link: https://webflow.com/design/csem-futuro?preview=95660a968ed23a4228d2d47d66b4cc5f

cyberdave · December 19, 2014, 6:19am

hi @pedroturambar, sorry for the delay, is the site still experiencing the issue? I looked at your preview link plus the published site, and the vid appears to show in it’s own section, then section with content is properly showing below that. Let me know if you still need some help with this, I am happy to assist Cheers, Dave

cyberdave · December 19, 2014, 6:26am

Hi @sunjay , sorry for the late response, is there still issues with the bg video code in the site you were working on? Background video is not supported on mobile devices, so you need to add this line below to your embed code inside of the video tag:

<img src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">

Change the img src tag to have the path of the image you want to use as the poster image, when background video is not available.

I hope that helps, if not, let me know and I am happy to further assist.

Cheers, Dave

pedroturambar · December 19, 2014, 1:46pm

Hi @cyberdave, i’ve finished te site layout, and kinda solved the problem.

But when it comes to big monitors the section below of the video goes up, hiding part of the vid section.

Here is the published link: http://csem-futuro.webflow.com/

Here is the public link: https://webflow.com/design/csem-futuro?preview=95660a968ed23a4228d2d47d66b4cc5f

How can i solve this?

hvinh1 · January 16, 2015, 6:41pm

Hi @pedroturambar and @cyberdave I’m having a similar problem as the one you had before
where a section div doesn’t show underneath the video but rather on top of it. I tried putting the overflow
on hidden, but that just makes the entire video disappear.

Can one of you guys help me please?

Thanks!

Koen · January 18, 2015, 9:12pm

Hi Guys, i use FinalCut Pro X, and it looks i can’t greate a .ogv video file? Does anyone have a suggestion?

Koen · January 19, 2015, 3:57pm

And the answer is:
You can convert your video online to a agv of webm file here!

Daniel_Luebke · February 23, 2015, 3:52am

I get a series of errors when I try to paste the code from part 1 into my Custom Code. Has this happened to anyone else? What am I doing wrong? Thank you for your help.

Line 109 column 16: Expected tag name. Got something else instead.
Line 118 column 16: Expected tag name. Got something else instead.
Line 141 column 23: Trailing solidus not allowed on element div.
Line 153 column 27: Trailing solidus not allowed on element video.
Line 319 column 24: Trailing solidus not allowed on element div.
Line 346 column 13: Expected closing tag. Unexpected end of file.

jaidenleach · February 24, 2015, 1:31am

did you wrap the jquery in <script>enter the code here</script> tags? @Daniel_Luebke

Daniel_Luebke · February 25, 2015, 1:21am

Fixed - THANK YOU! What a simple mistake…

jaidenleach · February 25, 2015, 4:16am

Glad it helped!

REV · March 14, 2015, 5:47pm

Great Thread Big Help