Do you want to put a video background on your website to achieve the same impressive design results showcased by sites such as Razorfish and Random Dance? It’s really not difficult to do, so long as you have a cursory knowledge of how to edit HTML files and upload Javascript files.
One way to add a video background to your website is to use the video embed HTML5 feature along with a bit of CSS3 to help your video maintain its position. Though this is an option, it’s not an ideal solution because it doesn’t allow you the control you need to make your videos interactive (if desired) or to determine what device your website is being loaded on. The latter is critical, because many devices won’t run background videos.
The best method is to employ Javascript to load your background video. Javascript can determine what device is being used, and then load an image when background videos cannot be played.
There are many different scripts out there for loading videos, and each can be customized to serve your own purposes. However, there are two scripts I recommend, depending on your video source.
Big Video
Developed by John Polacek at Draftfcb Chicago, this script makes it simple for you to add a background video to your website. You’ll need the jQuery, jQuery UI, and jQuery imagesloaded libraries and plugin to use the script. With this script, you can load videos from any source (though the author recommends Vimeo), and you can even add an interactive playlist.
YouTube Video Background
This is a simple script that’s likewise easy to use; it will call YouTube videos to be loaded as your web page background.
As with any web implementation, test your new video background to make sure it plays on all major browsers and responds as it should (such as with image replacement) on different devices and operating systems. Don’t be afraid to play with the code to add features you want to use, and make it your own! And, if you’re more a designer by heart, you can always hire a freelancer to install these scripts for you.
They’re relatively simple, so an experienced coder should be able to implement them rather quickly and with minimal charge.
Do you have a preferred method of loading videos as web page backgrounds? Have I missed anything that should be included? Let me know in the comments!
Guest Author Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint and Facebook.
Personally, I find these kinds of backgrounds distracting and a bit overpowering (especially Random Dance’s) and I think they might have negative impacts on onsite SEO if links are pointing to the home page where there is little content for a web crawler to read. New web designers would have to be careful with new sites in this regard.
Well it always depend on the purpose of the website.
If someone ants to show his video portfolio, it is a great way to show off 🙂
My current client creates perfumes and she has several collections. For each category she has a promotional video.
When the visitor reaches the site, there will be a oversized video. At the right there alays is an off-canvas panel which will slide over the video with all the “normal” website content.
Like I already said: It always depends 🙂
When using a video as a background on a website it must relate to the audience (not just a nice decoration) and must be sized correctly to alow for site loading along with SEO. When used correctly a video background on a website can look fantastic with a real visual appeal, implemented incorrectly video can slow down the whole ite.