Streaming live at 10am (PST)

Video Background In Hidden Section

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

: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”

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

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

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:

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

1 Like

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

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

1 Like

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

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

1 Like

Really like the menu interactions! Very nice features in here

1 Like

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

@Waldo_Broodryk How did you make the hidden section?

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

Let me know if you have any questions :smiley:

Thank you,

Waldo