How to

Install

Download and install jQuery. Guide on the official site. Example:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js" defer></script>

Download and install plugin ytShownotes. Example:

<script type="text/javascript" src="jquery.ytShownotes.js" defer></script>

Don't use the link, which you can see in the code of this site - it can change!

Use only tested on your site version of the plugin. Do not replace old versions of mindlessly to new. Always test in your environment!

Use

Block for video

Before using the plugin is insert code to html, which will be contain video, and add to it id attribute.

<div id="ytShownotesWrapper">
  <div id="ytShownotesPlayer">
  </div>
</div>

Wrapper-block must have id=ytShownotesWrapper. Inside this block will be insert the iframe with id=ytShownotesPlayer.

Data format

This plugin uses a specific data format. First of all you need to bring the data in the proper format. If the data is already in the proper format, then see Initialization.

Use generation tools

On Tools you can see a tools for generation data in the proper format.

On Tools is necessary paste link to Youtube video and set caption.

Optional parameters are Start time and Stop time, also optional set size of video (default 640x360 pixels).

Button AddToList add entered data to the list. Button Delete delete this element from list.

Button Preview allows you to view video without adding to the list.

Button Clear remove enterrd data from the form, but don't erase the list.

Fields Tag and Tag Class allow to set element of generated data inside html-tag (default to div) and also set a class of this tag (default ytShownotes).

Button Get HTML show generated html-code below. This data prepared to use in the plugin.

Initialization and binding to data

For initialize the plugin and bind it to data, you must call the following method of plugin:

$('.ytShownotes').ytShownotes();

or direct specify the event, which is bind the player launch:

$('.ytShownotes').ytShownotes('click');

where .ytShownotes is a class, which contains your data, click - is a mouse event 'click to element';

Work?

If you have done all steps correctly, then click on your data in the block div#ytShownotesWrapper will launch your preferred video with specified parameters.

Does Not Work?

If the plugin does not work, you must return to the beginning of this instruction and verify that all steps.

If, after rechecking plugin does not work anything, then write about error on GitHub issues.

Questions and other proposals also write on Issues page on GitHub.