Streaming live at 10am (PST)

[Tutorial] How to add a Custom HTML5 Background Video


#1

Method #1

Based on code from: http://syddev.com/jquery.videoBG/index.html 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: http://syddev.com/jquery.videoBG/index.html


HTML5 Background Video
Video background to a section
Header Background Video
Let's bring on the embedded video loops!
Parallax video slider
Fullscreen-background-video
How to make a video background?
Video Background (100% Height)
3 hour One-page website done for Youth Event
Video background problem
Embed video as a background
Video embed widget
Video Background Sites
Design Agency Website
Complete custom code for full browser HTML5 video background
360 product rotation
Video background to a section
Video Hosting recommendations
How to set a video loop in hero section
Looking for tutorials on using video in Webflow
Video Autoplay and looping doesnt work
Need help with background video positioning in layout
Mind tweaking my Wistia video inbed code so it actually works?
Embedding Self Hosted Videos
Dropbox Traffic Limits - Background Video - Alternative?
#2

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>

3) Then replace the video paths with urls to your own files.

4) 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


Add two more media Queries for a total of 6
Video BG Not Showing Up
#3

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!)


#4

@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?


#5

@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)


#6

It solved the problem. Thanks.


#7

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)


#8

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


#9

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.


#10

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


#11

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


#12

Hey, I use Handbrake. http://handbrake.fr/downloads.php


#13

Thanks. Will try that.


#14

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


#15

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!


Full screen video background?
#16

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


#17

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.


#18

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


#20

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:
http://jsbin.com/EJaWUDe/2/edit?html,css,js,output

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


#21

It works, thank you!