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 sample: http://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 sample: http://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