jQuery YouTube Popup Player Plugin

A simple and light weight plugin to display YouTube videos in a jQuery dialog box.

DEMO

Overview

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).

Requirements

This plugin is built over jQuery so you need to include that on your page:

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

You will also need jQuery UI theme library for the dialog. You can build a custom one at http://jqueryui.com or use the existing themes. You can get the complete list of default themes and Google CDN links from http://lab.abhinayrathore.com/jquery_cdn/.

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Finally include the YouTube Popup jQuery Plugin file:

<script type="text/javascript" src="jquery.youtubepopup.min.js"></script>

YouTube URL or YouTube Video Id:

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...

$(function () {
	$("a.youtube").YouTubePopup(options);
});

How to structure the link:

Use any of the following YouTube URL formats:

<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU">title</a>
<a class="youtube" href="http://www.youtube.com/embed/4eYSpIz2FjU">title</a>
<a class="youtube" href="http://youtu.be/4eYSpIz2FjU">title</a>

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...

<button class="youtube" id="4eYSpIz2FjU" title="...">Click me</button>

Initialize the YouTube Popup with options...

$("a.youtube").YouTubePopup({ autoplay: 0, draggable: true });

Assign the YouTube Id using Plugin options...

$("#youtubeLink").YouTubePopup({ youtubeId: '4eYSpIz2FjU', title: 'My New Title' });

<a id="youtubeLink" href="#">YouTube Link</a>

Use on other HTML attributes:

Popup on Image clicks...

$("img.youtube").YouTubePopup({ idAttribute: 'id' });

<img class="youtube" id="4eYSpIz2FjU" src="..." title="..." />

Example:

Popup on Button clicks...

$("button.youtube").YouTubePopup({ idAttribute: 'id' });

<button class="youtube" id="4eYSpIz2FjU" title="...">Click me</button>

Example:

Using custom attributes to store YouTube Id...

$("a.youtube").YouTubePopup({ idAttribute: 'youtube' });

<a class="youtube" youtube="4eYSpIz2FjU" href="#" title="...">Click me</a>

Example: Click me

Hide the Title Bar for Popup Dialog...

$("a.youtube").YouTubePopup({ hideTitleBar: true });

<a class="youtube" rel="4eYSpIz2FjU" href="#">Click me</a>

Example: Click me

Auto-popup on page load

$(function () {
	$("a.youtube").YouTubePopup().click();
});

To disable the plugin:

To remove/disable the plugin, you can use the destroy option like this:

$("a.youtube").YouTubePopup('destroy');

Video Thumbnails:

To get the video thumbnails from YouTube, use one of these URL's in an img tag:

http://img.youtube.com/vi/video-id/0.jpg
http://img.youtube.com/vi/video-id/1.jpg
http://img.youtube.com/vi/video-id/2.jpg
http://img.youtube.com/vi/video-id/3.jpg
http://img.youtube.com/vi/video-id/default.jpg
http://img.youtube.com/vi/video-id/hqdefault.jpg
http://img.youtube.com/vi/video-id/maxresdefault.jpg

<img class="youtube" id="4eYSpIz2FjU" src="http://img.youtube.com/vi/4eYSpIz2FjU/1.jpg" title="..." />

Example:

Configuration Options

//default configuration
$.fn.YouTubePopup.defaults = {
	'youtubeId': '',
	'title': '',
	'useYouTubeTitle': true,
	'idAttribute': 'rel',
	'cssClass': '',
	'draggable': false,
	'modal': true,
	'width': 640,
	'height': 480,
	'hideTitleBar': false,
	'clickOutsideClose': false,
	'overlayOpacity': 0.5,
	'autohide': 2,
	'autoplay': 1,
	'color': 'red',
	'color1': 'FFFFFF',
	'color2': 'FFFFFF',
	'controls': 1,
	'fullscreen': 1,
	'loop': 0,
	'hd': 1,
	'showinfo': 0,
	'theme': 'light',
	'showBorder': true
};

youtubeId: Use it to override the YouTube Id using JavaScript.
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.
showBorder: (default: true) To show or hide the border around the dialog box.
Rest of the options are used to configure the YouTube player. For more help on these options, please refer YouTube Embedded Player Parameters on YouTube API website.

Set global defaults...

You can even set some global defaults for your website in the page load event like this:

$(function () {
	$.fn.YouTubePopup.defaults.fullscreen = 0;
	$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
});

Demo Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery YouTube Popup Player Plugin</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link type="text/css"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.youtubepopup.min.js"></script>
    <script type="text/javascript">
		$(function () {
			$("a.youtube").YouTubePopup({ autoplay: 0 });
		});
    </script>
</head>
<body>
	<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>
</body>
</html>

Download

View the formatted version.

Fork it on GitHub

Download the JavaScript file for development.

Download the minified version.

Download the Bootstrap version.

Comments / Suggestions

If you have any comments/suggestions/modifications/enhancements or bug fixes for this plugin, please drop a comment on my blog page or create an issue on GitHub.