The jQuery Tubular plugin, created by Sean McCambridge, allows web developers and designers to incorporate a YouTube video as the background to a web page or website. The plugin is available for download at code.Google as a zip file (jquery.tubular.1.0.1.zip, 19KB). The download includes a copy of the working demonstration along with the required js, css, and media files, along with the instructions and license as text files.

Sean has a live demo, which features a time lapse video entitled American Southwest Landscape -Time-Lapse HD 1080p by Tom Lowe and Catherine Laplace-Builhe. A screenshot of the demo page is displayed above.

The plugin is released and licensed under the MIT license, which means that it is provided “as is” without warranty of any kind, and the most recent update is dated October 1, 2012.

Usage of the Tubular plugin might be limited to specialty websites that want to promote their own videos, or it could be a perfect fit as a featured element contained within a parallax scrolling effect implementation for a web page or website.

Requirements and install instructions

JavaScript is required to work in the browser for the video to appear, otherwise the background is blank. The plugin also requires that you load jQuery core on the web page or web site with the typical and universal script code within the <head>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

According to the instructions, jQuery must appear BEFORE tubular in your HTML document.

<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"> </script>

Then, to load the tubular plugin, tubular must be called AFTER the jQuery core. You will also need to know the YouTube video ID that you want to use as your background video, as well as the div wrapper you will use as the container. The default settings require that you use a wrapper div with the id of wrapper, and then you just attach it to your wrapper div and specify the video you want to load with the code snippet example shown below:

$().ready(function() {
   $('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
 });

According to the plugin instructions, you call the tubular plugin 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.

I have several notes, and the first one is that the plugin assumes that you have a single wrapper element under the body tag that envelops all of your website content. The plugin then promotes that wrapper to a z-index: 99 and position: relative; however, you can configure the z-index value in the options. The plugin is expecting that your wrapper can accept positioning without breaking your site.

Second, the tubular plugin injects the YouTube video you specified as an iframe using a fixed position at z-index: 1. Browsers that do not support fixed positioning will not support tubular. Also, since the YouTube iframe API requires the HTML5 postMessage feature, browsers that do not support it include IE7 and earlier and only partial support for IE8 and IE9, and therefore will not support tubular. As a result the tubular plugin will return false before any changes are made to your CSS in IE7.

Defaults and options

The demo page provides these defaults and options for the tubular plugin:

  • ratio: 16/9 // usually either 4/3 or 16/9 — tweak as needed
  • videoId: ‘ZCAnLxRvNNc’ // toy robot in space is a good default, no?
  • mute: true
  • repeat: true
  • width: $(window).width() // no need to override
  • wrapperZIndex: 99
  • playButtonClass: ‘tubular-play’
  • pauseButtonClass: ‘tubular-pause’
  • muteButtonClass: ‘tubular-mute’
  • volumeUpClass: ‘tubular-volume-up’
  • volumeDownClass: ‘tubular-volume-down’
  • increaseVolumeBy: 10 // increment value; volume range is 1-100
  • start: 0 // starting position in seconds

While tubular might have a limited application set, partial relevance to specific uses or users, or a niche audience, I really like the creativity, inspiration, and possibilities that this plugin might be able to complement with existing multimedia, video, or parallax scrolling effects on web pages or websites. It also opens the door for furthering creative and imaginative works adding an artistic aspect for web development.