Friday, 5 April 2013


By Ishant Gupta
You saw the Bing homepage. You fell in love with the video background that was used in it. Yearning to make that video as your homepage background? You can easily embed the same video on your page background with small line of code.
Right now you must be using a dull boring static image as a background for your website. Want to make your website interesting and appealing? All you need to do is replace the static image with a new dynamic image with animations that will bring a fresh look to your website.
The Bing homepage uses interesting videos of animals which you too can use.
This can be done in many ways.
  • Bing uses the standard HTML5 <video> tags to serve videos on the homepage. The embedded video has a fixed size and it doesn’t resize itself with the browser.
  • There are ready-to-use jQuery plugins, Tubular and BigVideo.js for example, that let you easily use any video, or a series of videos, as page backgrounds.
  • The other more simple approach, as you can see in this demo, uses HTML and CSS tags (no JavaScript) to help you place any YouTube video in the page background.
YouTube Video Backgrounds
To start with, paste the code below near the opening <body> tag of your web template. You need to replace the ID with the video ID of the YouTube video that you would like to use in the background.

Internally, we are using YouTube’s IFRAME tags to embed that video such that it occupies the entire page (both width and height are set to 100%). Also, the z-index is set to negative so the YouTube video layer will appear several levels below the main content of your page.
The negative side to this is your background video won’t work on mobile devices and it is not possible to mute the sound of a video without using JavaScript.

Bonus Tip: Embed Background Music with YouTube
Do you recall the earlier Geocities era when the background music would be played automatically once any website is accessed. This would often embarrass you in front of your colleagues. These websites used raw audio files, like MP3, WAV or even the MIDI format, to embed music but you can now use any of your favorite YouTube tracks for embedding background audio to your choice of video background.
To do this you need to employ a trick. You need to embed a regular YouTube video (with autoplay=1) and set the height & width of the video player to zero so it stays invisible. This can be achieved with a single line of code which you can add anywhere on your web page.

Related Posts Plugin for WordPress, Blogger...