https://szkene.hu/js/jquery.youtube.js

1(function($){ //jQuery.noConflict()compliant
2$.fn.extend({
3	youtube: function(opts) {
4		opts = jQuery.extend({}, jQuery.youtube.defaults, opts);
5		return this.each(function() {
6			var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w-]*/ig;
7			if ((matches = re.exec($(this).attr('href'))) != null) {
8				opts.youtubeID = matches[1];
9				if (opts.directEmbed) {
10					if (opts.directEmbedToTarget)
11						$(this).appendTo(opts.target);
12					return $(this).youtubeEmbed(opts);
13				}
14				else {
15					return $(this).youtubeThumbnail(opts);
16				}
17			}
18			var vimeore = /vimeo\.com\/(.*\/)?([0-9]+)/;
19			if ((matches = vimeore.exec($(this).attr('href'))) != null) {
20				opts.youtubeID = matches[2];
21				return $(this).vimeoEmbed(opts);
22			}
23		});
24	},
25	youtubeEmbed: function(opts) {
26		opts = jQuery.extend({}, jQuery.youtube.defaults, opts);
27		return this.each(function() {
28			var container = $('<div class="youtubevideocontainer"><div id="yt-'+opts.youtubeID+'" class="youtubevideo"></div>')
29			$(this).replaceWith(container);
30			$('<iframe width="'+opts.playerWidth+'" height="'+opts.playerHeight+'" src="//www.youtube.com/embed/'+opts.youtubeID+'?rel=0'+(opts.autoplay ? "&autoplay=1" : "")+'" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>').appendTo($('.youtubevideo', container));
31		});
32	},
33	youtubeReplaceThumbnail: function(opts) {
34		opts = jQuery.extend({}, jQuery.youtube.defaults, opts);
35		//var optsLocal = opts;
36		return this.each(function() {
37			var link = this;
38				var thumbnail = $(link).data("thumbnail");
39				var id = $(link).data("videoId");
40				var title = $(link).text();
41				var thumbnailWidth = Math.min(thumbnail.width, opts.thumbnailMaxWidth);
42				var thumbnailHeight = thumbnailWidth/thumbnail.width*thumbnail.height;
43				$(link).replaceWith('<div id="ytTh-'+id+'">');
44				var $thDiv = $("#ytTh-"+id);
45				$thDiv
46				.css({width: thumbnailWidth})
47				.addClass("youtubeThumbnail")
48				.click(function() {
49					opts = jQuery.extend({}, opts, {youtubeID: id})
50					if (opts.target == '__POPUP__') {
51						if ($("#youtubepopup").length == 0) {
52							$('<div id="youtubepopup">').appendTo("body");
53						}
54						$("#youtubepopup").html("<div></div>").dialog({
55							width: opts.playerWidth+30, 
56							height: opts.playerHeight+60,
57							title: title,
58							close: function() {
59								$(this).html("<div></div>");
60							}
61						});
62						$("#youtubepopup div").youtubeEmbed(opts);
63					}
64					else {
65						$(opts.target).html("<div></div>");
66						$("div", opts.target).youtubeEmbed(opts);
67					}
68				})
69				.append($("<img src=\""+thumbnail.url+"\" alt=\"Thumbnail\" width=\""+thumbnailWidth+"\" />"));
70				if (opts.thumbnailTitle)
71					$('<div>').addClass('title').html(title).appendTo($thDiv);
72				$("<img src=\""+opts.playIcon+"\" alt=\"play\" class=\"playicon\" />").css({position: "absolute", left: (Math.floor((thumbnailWidth-opts.playIconWidth)/2)), top: (Math.floor((thumbnailHeight-opts.playIconHeight)/2)), opacity: 0.5, filter: "alpha(opacity=50)"}).appendTo($thDiv);
73			});
74	},
75	youtubeThumbnail: function(opts) {
76		opts = jQuery.extend({}, jQuery.youtube.defaults, opts);
77		var optsLocal = opts;
78		return this.each(function() {
79			var link = this;
80			var thumbnail = $(link).data("thumbnail");
81			if (!$(link).data("thumbnail")) {
82				$(this).youtubeGetThumbnail(opts);
83				return;
84			}
85			$(this).youtubeReplaceThumbnail(opts);
86		})
87	},
88	youtubeGetThumbnail: function(opts) {
89		opts = jQuery.extend({}, jQuery.youtube.defaults, opts);
90		return this.each(function() {
91			var link = this;
92			jQuery.ajax({
93			  url: "https://www.googleapis.com/youtube/v3/videos?part=snippet&id="+opts.youtubeID+"&key="+opts.apiKey,
94			  dataType: "jsonp",
95			  success: function(data) {
96			  	$(link).data("thumbnail", data.items[0].snippet.thumbnails[opts.thumbnailSize]).text(data.items[0].snippet.title);
97			  	if ($(link).data("thumbnail"))
98						$(link).youtubeReplaceThumbnail(opts);
99			  }
100			});
101		});
102	},
103	youtubeVideolist: function(opts) {
104		var defaults = {
105			feedURL: "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet",
106			playlistId: null,
107			pageSize: 24,
108			page: 0,
109			showFirst: true,
110			playerWidth: 550,

111			playerHeight: 335
112		};
113		opts = jQuery.extend({}, jQuery.youtube.defaults, defaults, opts);
114		var container = this;
115		if ($(this).data("feedurl"))
116			opts.feedURL = $(this).data("feedurl");
117		if ($(this).data("playlistid"))
118			opts.playlistId = $(this).data("playlistid");
119		var tnContainer = $('<div class="thumbnails ui-helper-clearfix">').appendTo(container); 
120		if (opts.feedURL && opts.playlistId) {
121			jQuery.ajax({
122			  url: opts.feedURL + "&playlistId=" + opts.playlistId + "&startIndex=" + (opts.page * opts.pageSize + 1) + "&maxResults="+opts.pageSize + "&key="+opts.apiKey,
123			  dataType: "jsonp",
124			  success: function(data) {
125				//TODO: paging
126				var total = data.pageInfo.totalResults;
127				$.each(data.items, function (idx, video) {
128					$("<a>")
129					.attr("href","http://youtu.be/"+video.snippet.resourceId.videoId)
130					.data("videoId", video.snippet.resourceId.videoId)
131					.data("thumbnail", video.snippet.thumbnails[opts.thumbnailSize])
132					.text(video.snippet.title).appendTo(tnContainer);
133				});
134				$("a", container).first().clone().appendTo(opts.target).youtube(jQuery.extend({}, opts, {directEmbed: true}));
135				$("a", container).youtube(jQuery.extend({}, opts, {directEmbed: false, thumbnailTitle: true, autoplay: true}));
136			  }
137			});
138		}
139		else if ($(this).data("youtubeids")) {
140			$.each($(this).data('youtubeids').split(','), function(idx, ytid) {
141				$("<a>").attr("href", 'http://youtu.be/'+ytid).data("videoId", ytid).text('video').appendTo(tnContainer);
142			});
143			$("a", container).first().clone().appendTo(opts.target).youtube(jQuery.extend({}, opts, {directEmbed: true}));
144			$("a", container).youtube(jQuery.extend({}, opts, {directEmbed: false, thumbnailTitle: true, autoplay: true}));
145		}
146	},
147	vimeoEmbed: function(opts) {
148		opts = jQuery.extend({}, jQuery.youtube.defaults, opts);
149		return this.each(function() {
150			$(this).replaceWith($('<div class="youtubevideocontainer"><div id="yt-'+opts.youtubeID+'" class="youtubevideo"></div>'));
151			$('<iframe src="//player.vimeo.com/video/'+opts.youtubeID+(opts.autoplay ? "?autoplay=1" : "")+'" width="'+opts.playerWidth+'" height="'+opts.playerHeight+'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen title="Youtube video"></iframe>').appendTo('#yt-'+opts.youtubeID);
152		});
153	}
154});
155})(jQuery);
156
157(function($){ //jQuery.noConflict()compliant
158function Youtube() { // Default settings object
159	this.defaults = {
160		directEmbed: 1,
161		directEmbedToTarget: 0,
162		playIcon: "/images/play.png",
163		playIconWidth: 60,
164		playIconHeight: 60,
165		playerWidth: 384,
166		playerHeight: 288,
167		youtubeID: null,
168		autoplay: false,
169		target: "#media",
170		thumbnailTitle: false,
171		thumbnailSize: "default",
172		thumbnailMaxWidth: 120,
173		apiKey: "AIzaSyBrDqmc9Whxm1AmIAbrbkD5NGnoARwCCQ0"
174	};
175	this.setDefaults = function (opts) {
176		jQuery.extend(this.defaults, opts);
177	};
178}
179$.youtube = new Youtube();
180})(jQuery);
181
182/*
183function onYouTubePlayerReady(playerid) {
184	var player = document.getElementById('yt-' + playerid.substr(8));
185    player.addEventListener("onStateChange", 'youtubePlayerStateChange');
186}
187function youtubePlayerStateChange(state) {
188	alert (state);
189}
190*/