This is an easy to use jQuery Plugin to embed YouTube videos on your page by displaying them in a popup dialog box.
I have used jQuery UI Dialog Widget as the popup container instead of reinventing the wheel. jQuery UI Dialog is a robust cross-browser mechanism to display a popup dialog box with title bar including a movable box with modal behavior.
This is plugin is very simple to configure and use. All you need is a regular link to YouTube page or other elements like image or a button with YouTube Video Id stored in any attribute of the DOM element.
This plugin keeps track of all the assigned popup events and won't assign the click event if there already exists one, that way you can reassign the event for dynamically added HTML elements without affecting the existing ones. This plugin automatically gets the video title from YouTube to display on the dialog box title bar.
You can easily configure YouTube video settings from the configuration options which are an extension of YouTube Embedded Player Parameters, letting you to customize your own video size and player setting.
Videos are embedded through the new iframe embed code style which supports both Flash and HTML5 players (More info).
This plugin is built over jQuery so you need to include that on your page:
For regular links you can use the any standard YouTube URL to embed the plugin, but for other dom elements that do not support href attribute, you will need the YouTube Video Id to embed the videos. You can get the YouTube Video Id from the url as shown in this screenshot (characters between "v=" and "&" if any):
Examples & Usage:
Simply initialize the YouTube Popup in your page load event like this...
How to structure the link:
Use any of the following YouTube URL formats:
How to structure other DOM elements:
Put the YouTube video id (not the url) in the "rel" attribute. You can use any other attribute to store the YouTube Id, but you will need to define the "idAttribute" name in the plugin configuration.
You can use the "title" attribute to store the video title and set useYoutTubeTitle option as false to use it insted of the YouTube title. You can even override the title by setting your own in the plugin configuration. The "title" attribute value will be ignored if useYoutTubeTitle option is set to true (which is default).
Sample DOM element...
Initialize the YouTube Popup with options...
Assign the YouTube Id using Plugin options...
Use on other HTML attributes:
Popup on Image clicks...
Popup on Button clicks...
Using custom attributes to store YouTube Id...
Example: Click me
Hide the Title Bar for Popup Dialog...
Example: Click me
Auto-popup on page load
To disable the plugin:
To remove/disable the plugin, you can use the destroy option like this:
To get the video thumbnails from YouTube, use one of these URL's in an img tag:
title: Override the title text. To get the title from YouTube, leave this blank.
useYouTubeTitle: (default: true) Gets the video title from YouTube. This option will not work if the title is overridden using the title option above.
idAttribute: (default: rel) Attribute containing the YouTube Id.
cssClass: (default: empty string) Attribute containing the CSS class to be assigned to the popup div.
draggable: (default: false) If set to true, the dialog will be draggable by the title bar.
modal: (default: true) If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.
width: (default: 640) Width of the YouTube player.
height: (default: 480) Height of the YouTube player.
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.