Tune in to YouTube with jQuery


After searching for a jQuery plugin that can play and switch YouTube videos I found this:

jQuery YouTube Playlist plugin by Dan Drayne of Gecko New Media

Bravo to Dan for creating this plugin because it saved me some time and headache! Here’s what I like about it:

Out-of-the-box features:

  • Embed YouTube videos by dropping in a simple link
  • Progressively enchanced links take you to the video on YouTube when JavaScript is turned off
  • Ability to style the main video and thumbnails with CSS
  • Accessing the video’s thumbnail is an optional feature
  • Other variables can be set, such as autoplay etc.

I made a few tweaks

This is the markup that the plugin generates to embed the YouTube video into the HTML document:

  • <object width="450" height="300">
    • <param value="http://www.youtube.com/v/QBBWKvY-VDc&amp;autoplay=1&amp;rel=1" name="movie"></param>
    • <param value="transparent" name="wmode"></param>
    • <embed width="450" height="300" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/QBBWKvY-VDc&amp;autoplay=1&amp;rel=1"></embed>
  • </object>

As you can see the plugin makes use of the embed element which is a deprecated element that doesn’t validate as strict XHTML. If you test the plugin within a document that is strict XHTML you won’t see any validation problem because the JavaScript adds the markup to the document. If you want to to add valid markup to the already valid XHTML then you need to use a version of the Flash Satay method as explained on A List Apart.

After some tweaking, there is no embed element:

  • <object data="http://www.youtube.com/v/QBBWKvY-VDc&amp;autoplay=1&amp;rel=1" style="width: 450px; height: 300px;" type="application/x-shockwave-flash">
    • <param value="http://www.youtube.com/v/QBBWKvY-VDc&amp;autoplay=1&amp;rel=1" name="movie" />
    • <param value="always" name="allowscriptaccess" />
    • <param value="opaque" name="wmode" />
  • </object>

Does this really matter?

If you make an effort to provide truly strict XHTML markup then you may value adding strict markup to the document via JavaScript. I typically make the effort when I am working with valid HTML. However, lately I have been working with HTML5 which supports the embed element. In this case, there is no need for tweaking the plugin because the code generated for the video is alreay valid.

Apostrophes within attribute text

The original code (around line 100) will add the link text as the alt attribute for the image and the title attribute for the link:

  • $(this).children("a").empty().html("<img src='"+thumbUrl+"' alt='"+replacedText+"' />'+replacedText).attr("title", replacedText);

Notice in the example above that the src and alt attributes use single quotes. This can cause a problem, especially in Internet Explorer, when a single quote or apostrophe that is not unicode (&#39; or &rsquo;) is used within the attribute text. To avoid this potential problem you can use double quotes for the src and alt attributes. You must replace the double quotes with single quotes and vice versa within and around the image tag created by this line of code:

  • $(this).children("a").empty().html('<img src="'+thumbUrl+'" alt="'+replacedText+'" />'+replacedText).attr("title", replacedText);

Moving forward

As for markup, I look forward to when support of the HTML5 video element is standard and we are no longer embedding Flash videos. As for the plugin, I look forward to the improvements that Dan will make in the future.

Download the original version here:
jQuery YouTube Playlist plugin

Download the version I tweaked here:
jQuery YouTube Playlist plugin (Flash Satay version)


One comment

Leave a comment