[Tutorial] How to add a Custom HTML5 Background Video

@danro Hi. That last method seems to be what I need. But I can’t figure it out…

I need a website with a Fullscreen fixed background video. 100% width 100% height. What are the steps I need to follow?

This is the website:

http://de-jonge-dikkert.webflow.com/

Looks like I figured it out somehow…however, z-index is messed up? What can I do to fix this.
(https://webflow.com/design/de-jonge-dikkert?preview=5ed4a7c1049d1c60fff572fe631a716f)

@rowan, set your “Container” class to Position Relative and give it a z-index of 100. That should bring it to the top. I think because you have your Video BG at the very bottom it’s overlapping all the elements in the document (or at least that can be part of the problem).

Hi. Yes I understand. but in stead of bringing the content to the top (z index 100), can’t figure out how I can simply bring the video to be the absolute bottom element of the website?

But you are right… Setting the main Container class to relative and 100 z-index will solve it for now :smile:

@thesergie Another question… This method seems to be responsive on desktop, but on mobile devices it’s a disaster! Hmmm this is unfortunate. Anyone has a solution?

Hi @danro @thesergie
So was struggling a little more with this full video BG. Wasn’t completely aware that iphone/ipad doesn’t allow this (at least autoplay etc)… So i figured to disable the video on mobile devices and show a BG image instead…

However, there seems a z-index problem on mobile devices. When scrolling on tablet/smartphone, z-index is messed up, but when you stop scrolling it seems to restore correct z-index after 1 or 2 seconds.

Anyone has a solution?

http://de-jonge-dikkert.webflow.com/
https://webflow.com/design/de-jonge-dikkert?preview=5ed4a7c1049d1c60fff572fe631a716f

Yeah I’m not surprised that video background aren’t well supported on mobile.

As for the z-index weirdness - can you post a subdomain link so we can test it out on our own phones? Thanks!

hi @thesergie & @danro i didn’t fully understand the method described here

I have no clue where i should put that custom JS code to make my background video stay full screen.

here is my public link https://webflow.com/design/glamsoulstar?preview=a39022b1875cad521be3b56c7d976060

and the site is here http://glamsoulstar.webflow.com/

thanks for your help

if i want to make a video “fixed” to a section, how can that be done

slaps forehead i was able to figure it out.

but is there a way to get this to work in Safari?

FYI to others just getting started, you put the Javascript code in your site settings, under custom code

since desktop view and tablet landscape is the same on @webflow, am having problem with video background on the tablet landscape view. If only webflow will tablet landscape view function. @danro, is there a solution to this?

1 Like

how do u stop the video playing in design mode? its very annoying, sometimes causing the video card driver to crash.

This tutorial to add video isn’t well integrated into Webflow so it’s not as simple as pressing a checkmark to turn it off in the Webflow designer. Right now it behaves like it would when viewing the page in any browser.

But we’ll see what we can do to turn off autoplay while in the designer.

@thesergie, about my recent post here, can you suggest a solution to this. Also video background does not show on internet explorer 11

Hi Guys, i am busy with a background video, i followed the ideas. I does indeed not work on the iPad. Also the question. How can i make the “still” image widescreen?
enter link description here

You should use the poster attribute instead of placing an image inside the video-tag for a background/loading-image.

<video autoplay loop poster="video.jpg">  
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogv" type="video/ogg" />
  <source src="video.webm" type="video/webm" />
</video>

See: <video>: The Video Embed element - HTML: HyperText Markup Language | MDN

1 Like

Hi,

I’m trying to follow this, but it doesn’t seem to be working for me.

Here’s my public: https://webflow.com/design/bigfallsfish?preview=7c8ab54f0f2968e1c34dc62b144b8879

On the “Industry” page, I’m trying to embed a full page video that I have hosted in DropBox here: Dropbox - Error

(and I tried removing the “s” in https…but that didn’t work either…

Alternatively, I have it here: Big Falls Fish Growers on Vimeo

I’m not sure what/how to use the other snippets of the embedded code (you have 3 “src=” for example…but I only have the one link??).

I’d also like to add a coloured mask over the top of it, and have it loop. Is that possible?

Can you help point me in the right direction? Thanks so much!!

I discovered this solution for a full page background video:
http://www.pencilscoop.com/2013/12/awesome-full-page-video-effects-with-html5/

No Javascript needed.

2 Likes

Thank you! I haven’t had a chance to check this out yet, as I am working on a tight deadline for a different project, but I appreciate the input!

just curious the reasons behind including both a .mp4 and .ogv video files in the above method #2

Is one format better than the other??

@Amreet_Gill, hi, it is for maximum browser compatibility, to include .ogg, .mp4 and .webm links. This way, if if one of the video formats cannot be played by the browser, the next format will be played and so on, until a format is found that can be displayed by the browser.

Cheers !

1 Like