[Tutorial] How to add a Custom HTML5 Background Video

Method #1

Based on code from: Make an HTML5 video a background you can add background video by adding some custom code to your Webflow site.

Edit: This method is not responsive. Use Method #2 below for a responsive (and simpler) solution.

Example:

http://videotest.webflow.com/

Troubleshooting webflow link here.

Directions:

  1. Paste all the code in this .JS file (copy paste from GitHub) into your site’s Before </body> tag custom code section:
  1. Then paste this right after:

  2. Then replace with your own classes and files:

  • Replace .video-section with the class of the div/section/container you want your video to appear inside.
  • Replace each "http://...." with url’s to your video files.

Note: remove background colors/images from that class or you won’t see your video.

Cheers!


Source: Make an HTML5 video a background

10 Likes

Method #2: HTML5 video embed.

@thesergie’s example uses a jQuery plugin, which likely offers better support for older browsers. However, if you are targeting more modern browsers, you can reduce much of the above code into a single video tag.

The following example should work in IE9+ and the latest versions of Chrome, FF, Safari.

Example:

http://videotag.webflow.com/

Webflow designer link here.

Directions:

  1. Drag an Embed widget into your webflow page.

  2. Paste this code into the embed:

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;">
  <source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4" type="video/mp4" />
  <source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type="application/ogg" />
  <img src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">
</video>
  1. Then replace the video paths with urls to your own files.

  2. Select the element that you are placing the video inside (e.g. the Section div), give it a class, and style it using the Advanced position menu, to the following settings:

Position: Relative
Overflow: Hidden

Remember, your mileage may vary… that is until we build this natively into webflow :wink:
-Dan

17 Likes

Wow thanks for the step by step guides @thesergie and @danro! Thats amazing support!

I recently posted a thread about changing background images on refresh. I found a lot of code from various sources, but I can’t figure out how to implement it into Webflow. Would you mind making a little Tips & Tricks on that subject for everyone? :smile:

And also, while we’re at it, is there any way to make images slide in from the side of the browser like on the new Webflow homepage? That would be KILLER.

(BTW, I totally love your new redesign, tweeted about it yesteday!)

1 Like

@danro I have copied exactly what you’ve done in your example and this is what I get: http://caffeartjava.webflow.com/notre-histoire

Somehow, the video goes over the next section. All the position settings are exactly like the ones in your designer link. Any idea why?

@LaurentCardinal Select the element that you are placing the video inside (e.g. the Section div), and style it using the Advanced position menu, to the following settings:

Position: Relative  
Overflow: Hidden

This should effectively crop the video from appearing outside the video section.
-Dan

(Edit: I’ve added this to the instructions above)

It solved the problem. Thanks.

What happened with method 2? I remember it worked before, but now it’s giving really strange problems.
I tried it in 2 of my demo pages here:

http://zombidemos.webflow.com/voorbeeld-3
http://zombidemos.webflow.com/voorbeeld-10

The video is loading sometimes in normal way. But sometimes the whole page will mess up (especially background images and sticky navbar). Somebody have a clue what could be happening? Videos are around 5 MB. (Like example video).

https://webflow.com/design/zombidemos?preview=9f3a65fb958fccb7784d5fe4b67e8d93
(page 3 and 10 contain video BG)

We’ve been finding a lot of browser quirks lately in regards to Fixed background images. I would suggest avoiding Fixed and see if that helps with the rendering issues on your video pages. As always, we’re searching for ways around this so that it behaves as expected.

-Dan

Hmm… Seems to be fixed BG images in combination with video BG indeed… Too bad. Then for now I will choose either of two on specific pages.

Thanks for the note.

Thanks for the tips, I was searching for some code like this for ages!

1 Like

Hi @rowan, what do you use to compress videos at 5MB?

Hey, I use Handbrake. HandBrake: Downloads

1 Like

Thanks. Will try that.

Question: where can I upload my videos? Can I use a dropbox link?

Tried this myself tonight, you can use a dropbox link from a file uploaded to your public folder, but when inserting that link into the embed block, you need to be sure to remove the ‘s’ from ‘https’ - otherwise you’ll see a black background and the video won’t load!

2 Likes

Thanks man! I would have never guessed that i have to remove the s from https. It works.

No problem! I was racking my brain for a while too, trying to figure out why it wouldn’t work! I tried hosting the file on Google Drive - doesn’t work unfortunately. I temporarily moved all webflow files to my own server, to be able to load the video hosted on the same server and found it works quite well. I guess not having to retrieve the file elsewhere and pass through all of Dropbox’s server calls speeds up the retrieval of the video.

It works for me, but the video doesn’t fit the full screen if the browser is too narrow. Any advice?
https://webflow.com/design/dariostefanutto?preview=0b81f04b2bb7a956f27a38235915b120

Hi @Dario,

I see what you mean… you’re essentially trying to achieve background cover for your video. While this isn’t natively built into webflow, you can add some custom code to achieve this effect.

Take a look at this example on JS Bin:

In order to get this working on your webflow site, follow these steps:

  1. Copy the new HTML Embed block into your video embed.
  2. Style your videocontainer div to make the Overflow hidden.
  3. Place the custom JS into your </body> code section, inside a <script></script> tag.

Since this uses custom JS, it won’t actually execute the resize effect until published or exported, but hopefully this gets you on the right path! :thumbsup:

-Dan

5 Likes

It works, thank you!