If showcasing an animated background is what you’re looking to put in your website, you don’t have to limit your options to CSS or Flash. You can actually use a video from YouTube, all thanks to a clever little jQuery plugin called Tubular by Sean McCambridge. Some of you may have already known about this since it’s been around for quite a while.

Tubular is deployed on a web server to function and, needless to say, requires that JavaScript (and Flash player) is enabled on the client’s browser to work since it is dependent on jQuery and swfobject. All you’d need is the YouTube ID of the video you want to use and the content wrapper or DIV container ID on your web page.

To implement it into your site, you need to perform the following:

• Upload Tubular’s JS file into a server (ex. Google Code).

• Insert the following code right before the </head?> tag in your template’s code.

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>
<script type="text/javascript" charset="utf-8">
 $().ready(function() {
 $('body').tubular('someYTid','wrapper'); // where someYTid is the YouTube ID and wrapper is your containing DIV.
 });
</script>     

• Replace the necessary values in the above code with the proper info or data (i.e. YouTube ID, div ID).

• Save your file and you’re done!

You can find more detailed info, and even feel free to fork it over at GitHub.

Incoming search terms for the article:

• Tubular: Use YouTube Videos as Website Backgrounds
• optical illusions