jQuery tubular is a plugin that places a YouTube video of your choice into your page as a background.
REQUIREMENTS
Usage is straightforward and requires JavaScript on the client's browser to work. Tubular is a jQuery plugin and therefore relies on jQuery. 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.
INSTRUCTIONS
- Load the jQuery core on your page. Something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
jQuery must appear BEFORE tubular in your HTML document.
-
Load the tubular plugin. tubular must be called AFTER the jQuery include.
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script> -
Call tubular on your wrapper div, the outermost containing div below the BODY tag. This must be performed within your $(document).ready() function. Ideally, you will make the call in an external JavaScript file, but you may use it in a SCRIPT block or even inline gah. $().ready(function() { $('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID. });
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 is configurable. See the docs for details. Two DIVS, tubular-container and tubular-shield 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.
This plugin was first released on November 21, 2010 and is licensed under the MIT license. Updated October 1, 2012.
