YouTubePicker

Search and select videos on YouTube without leaving the page.

• Dependencies
• Options
• Events
• Migrate
• Examples

Dependencies

• jQuery
• nanoScroller.js

Options

{
	"key": "AIzaSyAuHQVhEmD4m2AXL6TvADwZIxZjNogVRF0",
	"prefix": "youtubepicker",
	"minChar": 3,
	"searchDelay": 2,
	"preview": true,
	"cloneField": true,
	"offset": {
		"x": 0, 
		"y": 0
	},
	"language": {
		"buttons": {
			"preview": "Preview",
			"select": "Select",
			"close": "×" 
		},
		"labels": {
			"views": "Views",
			"noRecords": "No records",
			"loading": "Loading..."
		}
	},
	"searchParams": { 
		"maxResults": 50,
		"order": "relevance",
		"channelId": "",
		"channelType": "",
		"eventType": "",
		"location": "",
		"locationRadius": "",
		"publishedAfter": "",
		"publishedBefore": "",
		"regionCode": "",
		"relatedVideoId": "",	
		"safeSearch": "none",
		"topicId": "",
		"videoCaption": "any",
		"videoCategoryId": "",
		"videoDefinition": "any",
		"videoDimension": "any",
		"videoDuration": "any",
		"videoEmbeddable": "any",
		"videoLicense": "any",
		"videoSyndicated": "any",
		"videoType": "any"
	}
}

• Documentation explaining each search parameter

Events

Event	Description
loadInit	Fired before sending data to the YouTube.
loadComplete	Fired when you receive the search data.
loadError	Fired if you have a trouble.
itemSelected	Fired when you select some video.

How to use

$('.my-field').youtubepicker()
  .on('itemSelected', function(ev, data){
    alert(data.vid + ' : ' + data.title);
  });

Migrate

v1

var credentials = { 
	'API_KEY': 'AIzaSyAuHQVhEmD4m2AXL6TvADwZIxZjNogVRF0'
};

var options = {
	'channelId': 'UCK8sQmJBp8GCxrOtXWBpyEA'
};

$('.my-field').youtubepicker(credentials, options);

v2

var options = {
	'key': 'AIzaSyAuHQVhEmD4m2AXL6TvADwZIxZjNogVRF0',
	'searchParams': {
		'channelId': 'UCK8sQmJBp8GCxrOtXWBpyEA'
	} 
};

$('.my-field').youtubepicker(options);

Examples

• Basic usage
• Search videos from Google
• Select multiple videos
• Select multiple videos with sorting