Video Background In Hidden Section

Community resources Show & Tell
1

Hey Everyone,

Recently returned from vacation where I was able to capture a few videos to use as video backgrounds on my portfolio site (set them to not display on mobile as they can be pretty heavy even with the different formats in there). :slight_smile:

Thought you all may enjoy a peak. :slight_smile: Trying to decide whether or not I should put a title to the “+” & “-” links or not, could maybe place a hover-in styled tool-tip.

Thoughts? @PixelGeek, @thesergie, @cyberdave, @Revolution, @sabanna

Thank you so much!

Waldo :smile:

2 Likes
2

:blush: waterfall is amazing (I am even jealous a little bit :stuck_out_tongue: LOL), but on my chromebook video is not playing clear, speed kinda jumping :confused:
I like the idea with such “about me” section :blush: gives feeling that I am “speaking with real person”

3

It’s jumpy on the chromebook? Are most/all videos usually clear on your chromebook? I have the video in several other formats so I will try adding those in there as well. :smile:

Thank you @sabanna so much! The waterfall is at the Alluvial Fan in Estes Park, Colorado. :smiley:

Waldo

1 Like
4

Weeeeeeell :smile: I know Chromebook doesn’t sound very “cool” :wink: LOL but usually it plays videos pretty well

For example this site is playing fine http://www.myprovence.fr/snapshots2012/en

5

That site is awesome!!! :smiley:
Okay, I went ahead and added some other versions of the video, is the video loading in better now by chance @sabanna?

Thank you,

Waldo :smiley:

6

YESSS!!! Now it is smooth! :+1:

1 Like
7

Woohoo!!! Thank you so much @sabanna :smiley:

So to do this, I have the video in these formats:
.jpg for the poster
.m4v
.mp4
.ogv
.webm
& some javascript generated by the Easyhtml5video app. :smiley:

All I had to do was drop the video into the Easyhtml5video app, then select the formats needed and then export the videos. Then upload those to my CDN, along with the .js file that easyhtml5video spat out (I should probably minify it), and gave the class to a parent div of the video background section of “easyhtml5video” and it worked :smiley:

And this is what’s inside the embed:

<div class="easyhtml5video"><video autoplay loop style="width: 100%; position:absolute; z-index: -1; " poster="video/waterfall.jpg">

<source src="video/waterfall.m4v" type="video/mp4" />
<source src="video/waterfall.webm" type="video/webm" />
<source src="video/waterfall.ogv" type="video/ogg" />
<source src="video/waterfall.mp4" />
  <img src="video/waterfall.jpg"> 

</video></div>
<script src="video/html5ext.js" type="text/javascript"></script>
2 Likes
8

Love the background that responds to the mouse, and the top left corner menu is amazing. Excellent work :slight_smile:

1 Like
9

Thank you so much @jaidenleach :slight_smile: I’m going for a combination of Material Design and a fluid feel to the site :smile: haha Fluid Material Design if you will. :smiley:

1 Like
10

You’re very welcome! Haha Fluid Material Design – FMD. I like the term :wink:

1 Like
11

Really like the menu interactions! Very nice features in here

1 Like
12

Thanks @Daniel_Sun and @jaidenleach :smile:
I’m just having fun and trying to think of navigation in a different way :slight_smile: you guys rock!

1 Like
13

@Waldo_Broodryk How did you make the hidden section?

14

Hey @MinewireNetwork
You can either take a look at the working webflow preview link: https://webflow.com/website/You-Found-Waldo

All you have to do is create your section and then the trigger you want to have open it. Then go in to the interaction panel, set an interaction for the section to be at a height of 0px, and display: none.

Then go to the trigger, and set it to open the section on whatever interaction you choose to 100% height. :slight_smile: And you can set a trigger to close it as well. I made mine a little more complex by having two buttons for the open close part.

Another great example to learn how to do it it is here: Johannes Tonollo - Interaction Design in Motion Portfolio - Webflow

Let me know if you have any questions :smiley:

Thank you,

Waldo