jQuery YouTube Popup Player Plugin
A simple and light weight plugin to display YouTube videos in a jQuery dialog box.
See it in action...
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. YouTube Video Id can be 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.
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/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://www.devcurry.com/2010/05/latest-jquery-and-jquery-ui-theme-links.html.
<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>Finally include the YouTube Popup jQuery Plugin file:
<script type="text/javascript" src="jquery.youtubepopup.min.js"></script>
Where to get the YouTube Video Id:
This plugin requires YouTube Video Id to embed the videos, so you can't use the complete url. 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 url:
- Use "#", "javascript:void(0);" or "javascript:;" in the href field.
- 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.
- Use the "title" attribute to store the video title. You can even override the title by setting your own in the plugin configuration.
Use on other HTML attributes:
Popup on Image clicks... Example:
Popup on Button clicks... Example:
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: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
Configuration Options
- youtubeId: Use it to override the YouTube Id using JavaScript.
- title: Override the title text.
- idAttribute: (default: rel) Attribute containing the YouTube Id.
- 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.
- 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: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="#" rel="4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>
</body>
</html>
Download
View the formatted version.Download the JavaScript file for development.
Download the minified version.
