Hero image/video technique

Design help General
1

Hi everyone!

Have been trying to replicate the effect of the hero section within this site. It’s a video on the background being looped, with a parallax foreground effect, to give it a more backgroundy feel I suppose. It takes up the entire width and height of the viewport as long as it’s scrolled to the top. When you resize the browser, the section resizes accordingly. When you scroll down, it scrolls like a normal image.

I’m just wondering, how would you achieve the same effect with webflow? Any ideas anyone?

Thank you in advance.

Noah.

2

From what I see:

There is no parallax effect.
The video is in a 100% height section that take up all the browser height, whatever the height is.

So use a html widget to place custom code for a looped HTML5 video (search the forum for html5 video code), add min height 100% and min width 100% to the custom code, along with the loop parameter. Be aware that this won’t work as expected on mobile, you shold deactivate that alltogetehr for mobile and replace with a animated gif (videos don’t autoplay on mobile). oh and there is a transparent pattern on top of the video, to make it more discreet as a background.

3

Thanks for the ideas @vincent! The parallax effect is essentially the pattern on top of the video. This is just a repeated image isn’t it?

4

It’s pretty simple to add in a video background, so long as you have the video in several different formats and can host the video on a CDN (Content Delivery Network). Setup hosting on GoDaddy or Amazon, then create a FTP and login using an FTP client like Filezilla, Cyberduck or FTPcore.

Then have your videos ready in .mp4, .ogv and a backup image for browsers that cannot display video backgrounds, and embed them like this:

 <div class="w-embed video-background">
       <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>
    </div>

Here is an example of one I just built using existing video from the web: http://w-video-background.webflow.io/
Feel free to clone it and play around :slight_smile:

The parallax effect would just mean you’ll need to make the video fixed, and z-index 0. :slight_smile:

Getting the videos formatted and hosted will take the longest but is doable with Premiere :slight_smile:

Let me know if you have any questions please.

[@waldobroodryk][1]

[1]: https://twitter.com/waldobroodryk**strong text**

1 Like
5

Updated to add in a parallax second section. I would need to clean up the positioning of any elements that sit on top of the video.
http://w-video-background.webflow.io/

6

Yep, it’s a silly gif. And you can find loads of them here http://www.transparenttextures.com/

2 Likes
7

Absolutely awesome @Waldo_Broodryk!! Thank you so much for taking your time to whip something up for me! That’s definitely what I’ve been looking for, I really appreciate your help. I think I can host the videos ok, but getting them in ogg format I’m not quite sure of, as I don’t have Premiere. No worries though, at least I have something to play with. Thanks again!

1 Like
8

Thanks @vincent! Appreciate the new source of images. That’s definitely going to help!

9

@Waldo_Broodryk, on your public site, how do I actually clone it?

10

Just click the clone button when you’re looking at my profile on webflow :smile:
And for the videos all you have to do is upload them to a free video formatting website online, I also included a .webm version of the video because it’s much more widely accepted across browser support, used it in the second one :slight_smile:

Enjoy!!! Let me know if you have any questions. And feel free to promote this post so others can make it as well.

Thanks! :smile:

1 Like
11

Hi Waldo,

Either I’m looking at the wrong place, or I haven’t found the “clone” button yet. I went to your profile: Forum | Webflow, but I can’t seem to find the webflow I want to clone, nor can I see any clone buttons. Have I missed something?

Thanks.

12

750×1334 88.6 KB

It’s definitely set as cloneable???

https://webflow.com/website/Creating-a-Video-Background-in-Webflow

Here is my profile link: https://webflow.com/website/Creating-a-Video-Background-in-Webflow

13

Just had to republish it. Sorry it was acting up!

750×1334 71.5 KB

14

Brilliant! Cloned it! Thanks Waldo, you’re a legend!

2 Likes
15

Always happy to help :smiley: thanks @jmak35

There are tons of free video compression/formatting tools out there. Just Google it :smiley:

Here is the finalized code for what you should put in for your video backgrounds for those that just want that code. :smile:

 <video autoplay loop style="width: 100%; position:absolute; z-index: -1;">

<source src="http://waldowill.com/tunnel_animation.webm" type="video/webm"/> 
<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"> 
  <img src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">
</video>
16

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.