YouTubin’ Plugin for jQuery

YouTube

YouTubin’ is a jQuery plugin that makes embedding YouTube videos clean, easy and unobtrusive. In its simplest form, YouTubin’ grabs any links that point to a YouTube page and replaces them with an embedded video. To do so, YouTubin’ leverages SwfObject 2 if available, but otherwise just embeds the video through standard markup.

Advanced options include flagging specific video elements using a jQuery selector and setting a variety of swf properties such as dimensions, flash version, flashvars and params. Youtubin’ can even be used to cause the video to embed once a link is clicked rather than when the page loads.

Download YouTubin’ jQuery Plugin

How to use YouTubin’

Basic YouTubin’ is extraordinarily simple. Just include the Javascript files for jQuery, YouTubin’ and optionally SwfObject 2, then write:

$(function() {
    $.youtubin();
});

This will pull in any links to YouTube video pages and replace them with an embedded video.

If you only want to replace certain links, say those with the class “youtube”, you can call YouTubin’ from any jQuery selector:

$(function() {
    $('a.youtube').youtubin();
});

If you want, you can pass custom options as an object in the first argument of youtubin():

$(function() {
    $('a.youtubin').youtubin({
        swfWidth : 400,
        swfHeight : 360
    });
});

Here we are setting the dimensions of the embedded video to 400px wide and 360px tall. Among the other options you can set replaceTime: 'click' if you want YouTubin’ to embed the video when a user clicks on the link rather than replacing all the links automatically. For a complete list of options please check the YouTubin’ documentation.

Finally, for best results with any method, include the Javascript for SwfObject 2 and YouTubin’ will automatically leverage it.

Download YouTubin’ jQuery Plugin


Jon Raasch

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.


Tags: , , , , , , ,

This entry was posted on Monday, June 15th, 2009 at 11:47 am in the category front-end.

You Might Also Like:

12 Comments to “YouTubin’ Plugin for jQuery”

  1. November 10, 2009 at 10:15 pm
    Amir says:

    Hey, nice plugin. Does it also work for links that just have youtube.com or uk.youtube.com or http://youtube.com in them?

  2. March 3, 2010 at 2:10 am
    M2E says:

    I’ve been looking for this.
    At first I found oembed, but not suite my needed.
    Finally I found YouTubin. This is very useful plugin.

    Awesome man!!

  3. April 14, 2010 at 6:06 am
    Micah says:

    Sweet plugin. This looks to be exactly what I need. I was just about to write the exact same thing, except crappier, I’m sure.

  4. June 16, 2010 at 8:10 am
    jon says:

    I saw on a forum: http://bit.ly/aw1XD8, that this plugin can be used to embed youtube videos on a https page without making a non-secure call, which will cause IE to produce its non-secure warning. I checked through your documentation, and didnt see any mention of this. Im using prototype instead of jquery and would consider switching if I can make this work with your plugin, but I was hoping you could give me a bit more explanation of how it works.

    Im loading one video per page, and already have the full embed code on the page, but Im willing to make whatever changes necessary in order to avoid the nasty IE warning.

    Thanks!

  5. July 7, 2010 at 9:57 am
    Peter says:

    I have th exact same request as Jon. Your Plugin is very useful to avoid the non-secure warnings and have Youtube movies on a ssl website.

    How can we do that? I too find it hard to understand…

    Thanks.

  6. November 4, 2010 at 10:24 am
    Robert says:

    My theory about why this works on an https page is that browsers just aren’t smart enough to detect, post-javascript-processing, the embed that used to be a link. You can link to a http page all you want in https and not get a browser warning. And if you include javascript that does a simple document.write of an embed that contains a http source attribute on an https page, you’ll get a warning. But this code, which goes in and alters the DOM, flies under the radar. Just my theory. Haven’t tested it yet.

  7. January 12, 2011 at 7:01 am
    Peter says:

    I read this comment on a page:

    “Neither swfobject nor youtubin works in FF 3.6.12. The small warning icon is displayed in the status bar footer, indicating that the page contains unsecure elements.”

    So I think we where cheering to soon…

    I’ve been into this for a year now and still no solid cross-browser solution.

  8. May 17, 2011 at 2:14 am
    Michael says:

    Hi,

    It’s great plugin, but unfortunately stopped working after the last JQuery library update. With jQuery 1.6 it throws JS error:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; .NET4.0E)
    Timestamp: Tue, 17 May 2011 10:11:20 UTC

    Message: ‘length’ is null or not an object
    Line: 79
    Char: 17
    Code: 0
    URI: http://……/jquery.youtubin.js

  9. March 24, 2012 at 2:19 am
    Marcell says:

    Replace line 79 — if ( !boxId.length ) { —
    with — if ( !boxId ) { —

    to make it work with the latest jQuery.

  10. August 23, 2012 at 9:05 am
    Steve says:

    I tried everything including Marcell’s solution. Using Safari or Firefox I still get the message “boxid is not defined”. jquery 1.8.0

    I’m about to call it a day and give up having spent so much time on this.

  11. September 13, 2012 at 12:26 am
    Alexander says:

    Replace line 40 with:

    $(“a[href^=’http://www.youtube.com/watch?v=’]”, options.scope).youtubin(options);

    to fix an error with the default selector in the latest versions of jQuery.

  12. October 10, 2012 at 8:03 am
    pcout says:

    hi,

    Is it possible with this plugin to track the you tube videos embeded with the track event analytics code ?

    If so, how ?

    thanks

Comments are closed.