Streaming live at 10am (PST)

Video Background In Hidden Section


#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). smile

Thought you all may enjoy a peak. 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.

http://www.youfoundwaldo.com/

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

Thank you so much!

Waldo smile


#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


#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


#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>

#8

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


#9

Thank you so much @jaidenleach 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


#10

You're very welcome! Haha Fluid Material Design -- FMD. I like the term wink


#11

Really like the menu interactions! Very nice features in here


#12

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


#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. 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: https://webflow.com/website/Johannes-Tonollo-Interaction-Design-in-Motion-Portfolio

Let me know if you have any questions smiley

Thank you,

Waldo


#15

#16