As an enhancement to the YouTube Popup player tool I built almost 2 years back, I have created a jQuery plugin to display YouTube videos in a popup dialog box. This plugin embeds YouTube video using the latest iFrame code which features both Flash and HTML5 players. To display the popup dialog box I have used the jQuery UI Dialog Widget which provides a robust cross-browser dialog box with title bar and supports a movable box with modal behavior. You can even customize the jQuery UI Dialog Widget theme to suit the color and style of you website.
This is a very easy to use plugin and is flexible enough to be used on any DOM element which supports the JavaScript onclick event. You will just need to include the YouTube Video Id in any of the DOM element attributes (default: rel) and initialize it in the plugin options (if other than rel). You can even provide a Title to the popup dialog box by defining it in the element’s title attribute or plugin options.
This plugin offers many configuration options for the dialog box and YouTube video player. You can find more detailed information for configuration and setup on the demo/documentation page.
For complete demo, documentation and download visit my lab page
http://lab.abhinayrathore.com/jquery_youtube/
Please drop me a word in the comments below if you have any modification/enhancements/bug fixes or any new feature to be added to this plugin.
Changelog
UPDATE v2.3, Date: Feb 26, 2013:
The biggest change in this version is that now you don't need to have the YouTube Id to embed the video links. You can now have regular YouTube URLs in the href attribute and don't need to assign the id in a separate attribute for links. If you want to use other DOM elements like images or buttons, you will still need the Id. This version is backward compatible with the old versions.
Also added a new configuration option:
- cssClass: (default: empty string) Attribute containing the CSS class to be assigned to the popup div.
UPDATE v2.2, Date: Aug 30, 2012: Removed some deprecated parameters from the options list
UPDATE v2.1, Date: May 23, 2012: Added 1 new configuration option:
- useYouTubeTitle: (default: true) Gets the video title from YouTube automatically. This option will not work if the title is overridden using the title option. If set to false, the title will fallback to the title attribute of the element.
UPDATE v2.0, Date: Oct 20, 2011: Added 3 new configuration options:
- hideTitleBar: (default: false) Hide the Title Bar of the Dialog Widget. (Only works with Modal option enabled.)
- clickOutsideClose: (default: false) Closes the Popup Dialog when clicked outside on the Modal overlay. (Only works with Modal option enabled.)
- overlayOpacity: (default: 0.5) Sets the opacity value (from 0 to 1) for the Dialog Widget overlay.
