Adobe Muse Tips: Video background

Adobe Muse Tips: Video background

I’ve recorded a new tutorial about background videos in Adobe Muse. Using videos as hero banners is definitely a huge web design trend. My concern with videos is about hosting and performance, I don’t want to host an HD video on my web server. For the users, depending on their bandwidth (ADSL? 3G? 4G?), I may want to dynamically adapt the quality of this video. This is exactly what YouTube is doing, and that’s why I’ve been working on design solutions that leverage YouTube.

Here is a link to my first samplehttp://museyoutube.businesscatalyst.com/ – The Paris timelapse is hosted on Youtube and used as a welcome banner for my page. If you scroll down, the content of the page will hide the video. Notice that nothing indicates that the video is hosted on YouTube.

The second samplehttp://museyoutube.businesscatalyst.com/videopattern.html just adds a pattern/texture on top of the video. This is just a transparent PNG file that is tiled on top of the video.

The third sample is a stunning effect: http://museyoutube.businesscatalyst.com/videomask.html . This time, I’ve placed a transparent PNG that behaves as a mask for the video in the background.

If you want to learn how to create these pages, check this video tutorial and download the Muse project file: http://bit.ly/museyoutube

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

3 Comments

  1. None of the examples are working. There are no videos in any of the examples.

    • Sorry for this. On which platform are you browsing the website ? Do you have access to Youtube ?

  2. Amazing! Thank you very much for this great tutorial!!! Greetings from switzerland

Submit a Comment

Your email address will not be published. Required fields are marked *