All of us who own a website, usually keep a beautiful picture as the background for a page. Some other interesting options could be placing some moving images at the back or a short animation/video clip, which could provide a richer experience. Bing homepage often uses video clips as it’s background. You can do the same on your website as well. Some of the ways re given below: Bing uses the standard HTML5 tags to place videos on background. This video always has a fixed size and doesn’t resize itself with the size of the browser.
There are also many ready to use jQuery plugins as the Tubular, Bigvideo.js etc. These let you to use a single video or a series of videos as page backgrounds. Another simple approach would be to use HTML and CSS tags (not javascript) which helps you place a YouTube video on page background. In order to place You Tube videos as backgrounds, paste the below given code near the opening? Tag of your web template. Replace the ID with the Video ID of the YouTube video that you will using as the background. The code is :-
1. <div style=”position: fixed; z-index: -99; width: 100%; height: 100%”>
2. <iframe frameborder=”0″ height=”100%” width=”100%”
3. src=”https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1″>
4. </iframe>
5. </div>
6.
7. // Write ID of your YouTube video on the place of ID
YouTube’s iFrame tags are used to embed the video such that it occupies the full page (both the width and height are set to 100%). The z-index should also be set negative which enables the video to appear in several levels below the main content of the page. The only drawbacks of such a background are that it won’t work on mobile devices, and the sound of the video can’t be muted without using javascript.
The Geocities era had websites which would automatically start playing their music as soon as the website was opened. In such cases the raw audio files of MP3 ,WAV, MIDI format are used. You can use any of your favourite You Tube videos as embedded background audio.
You need to embed a regular YouTube video (with autoplay=1) and then set the height and width of the video player to zero which will render it invisible. This can be done using a single line of code which can be added anywhere on the web page. The code is given below:-
1. <embed height=”0″ width=”0″
2. src=”http://youtube.googleapis.com/v/VIDEO_ID&autoplay=1&loop=1″ />