Learning jQuery

The title sounds interesting? Isn't it? Have a Youtube video as your page background using jQuery? Well having a Youtube video as background may be disturbing as if speed is not good then the user experience will not be good. But let's not discuss the pros and cons of having Youtube video as background. That is left to you. You decide?

Okay. So now lets go to the point on how to set the Youtube video as background. Well, that is possible using a jQuery plugin called "jQuery tubular". jQuery tubular is a plugin that places a YouTube video of your choice into your page as a background.

Usage is pretty simple and easy. And requires JavaScript and the Flash player to be installed and functional on the client's browser. tubular is dependent on jQuery and swfobject. You will need to know the YouTube ID of the video you want to use as well as the container DIV of your web page.

Please note, tubular must be deployed on a web server to function. The YouTube player will not work when loaded into your browser from your machine.

Load the jQuery

<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Load the SWF object

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

Load the jQuery tubular plugin

<script type="text/javascript"src="js/jquery.tubular.js"></script>

Call tubular on your BODY tag with the YouTube ID and your content container DIV as parameters. This must be performed within your $(document).ready() function.

$().ready(function() {
  $('body').tubular('someYTVideoId','dvVideoID'); 
//someYTVideoId is the YouTube ID and dvVideoID is your containing DIV.
 });

That's it! tubular does the rest.

Please note that tubular will change the structure of your CSS. Your wrapper DIV will become position: relative and z-index: 99. The z-index value will be configurable in future versions. Two DIVS, yt-container and video-cover will be created at z-index: 1 and 2 respectively with position: fixed for the video and an empty DIV above it to prevent accidental clickthroughs to YouTube.

Feel free to contact me for any help related to jQuery, I will gladly help you.