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.
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.
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
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.
