Get YouTube Channel Playlist Videos In SharePoint Content Editor WebPart

Introduction

In this article, I will explain how to get the YouTube Channel Playlist Videos in SharePoint Content Editor Web Part. The YouTube custom Web Part either selects a random YouTube video, a specific video, or channel videos from the specified SharePoint List or directly from YouTube. The Web Part can also be used to display a single static video or a YouTube Channel by specifying a YouTube URL field. The Web Part can be used with SharePoint 2010 and SharePoint 2013.

Prerequisite

The following prerequisite needs to be followed before getting YouTube Channel videos.

Create the publishing site collection in SharePoint.
Navigate to Site and click on “Settings” wheel. Click on “Add an app” or go to “View All site Content”. Then, click “Add an App”.
Select “Pages” from the “Your Apps” page.
Click on Files -> New Document -> Pages.
Give Title, Description, URL Name, and select the Page Layout.
Click on "Create" to create the page in "Page Library".
Open the newly created page.
Edit the page and click on “Add a Web Part”.
Add “Content Editor” Web Part from “Media and Content” category.
Now content editor Web Part gets added to the SharePoint page.

Get YouTube Channel Videos in Content Editor Web Part

Click on “Edit Source” in “Format Text” tab of content editor Web Part.
HTML Source window will pop up.
Download any jQuery plugin JS file and add the JS file to any document library, like Style Library.
Download the below Youmax JavaScript file and add the JS file to any document library, like Style Library.
1. var youmax_global_options = {};
4. (function ($) {
7. var secondsToTime = function(duration) {
8. if(null==duration||duration==""||duration=="undefined")
9. return "?";
11. var minutes = Math.floor(duration/60);
12. //alert(minutes);
14. var seconds = duration%60;
16. if(seconds<10)
17. seconds = "0"+seconds;
19. var time = minutes+":"+seconds;
20. return time;
21. //alert()
23. },
25. //utility function to display time
26. convertDuration = function(videoDuration) {
27. var duration,returnDuration;
28. videoDuration = videoDuration.replace('PT','').replace('S','').replace('M',':').replace('H',':');
30. //TODO: fix some duration settings
31. //console.log('videoDuration-'+videoDuration);
33. var videoDurationSplit = videoDuration.split(':');
34. returnDuration = videoDurationSplit[0];
35. for(var i=1; i<videoDurationSplit.length; i++) {
36. duration = videoDurationSplit[i];
37. ////console.log('duration-'+duration);
38. if(duration=="") {
39. returnDuration+=":00";
40. } else {
41. duration = parseInt(duration,10);
42. ////console.log('duration else -'+duration)
43. if(duration<10) {
44. returnDuration+=":0"+duration;
45. } else {
46. returnDuration+=":"+duration;
47. }
48. }
49. }
50. if(videoDurationSplit.length==1) {
51. returnDuration="0:"+returnDuration;
52. }
53. return returnDuration;
55. },
58. getDateDiff = function(timestamp) {
59. if(null==timestamp||timestamp==""||timestamp=="undefined")
60. return "?";
61. //alert(timestamp);
62. var splitDate=((timestamp.toString().split('T'))[0]).split('-');
63. var d1 = new Date();
65. var d1Y = d1.getFullYear();
66. var d2Y = parseInt(splitDate[0],10);
67. var d1M = d1.getMonth();
68. var d2M = parseInt(splitDate[1],10);
70. var diffInMonths = (d1M+12*d1Y)-(d2M+12*d2Y);
71. /*alert(d1Y);
72. alert(d2Y);
73. alert(d1M);
74. alert(d2M);
75. alert(diffInMonths);
76. */
77. if(diffInMonths<=1)
78. return "1 month";
79. else if(diffInMonths<12)
80. return diffInMonths+" months";
82. var diffInYears = Math.floor(diffInMonths/12);
84. if(diffInYears<=1)
85. return "1 year";
86. else if(diffInYears<12)
87. return diffInYears+" years";
89. },
91. getReadableNumber = function(number) {
92. if(null==number||number==""||number=="undefined")
93. return "?";
95. number=number.toString();
96. var readableNumber = '';
97. var count=0;
98. for(var k=number.length; k>=0;k--) {
99. readableNumber+=number.charAt(k);
100. if(count==3&&k>0) {
101. count=1;
102. readableNumber+=',';
103. } else {
104. count++;
105. }
106. }
107. return readableNumber.split("").reverse().join("");
108. },
111. loadYoumax = function() {
113. youmaxWidgetWidth = $('#youmax').width();
115. $('#youmax').append('<div id="youmax-header"><div id="youmax-stat-holder"></div></div>');
117. //$('#youmax').append('<div id="youmax-tabs"></div>');
119. $('#youmax').append('<div id="youmax-tabs"><span id="featured_" class="youmax-tab">Featured</span><span id="uploads_" class="youmax-tab">Uploads</span><span id="playlists_" class="youmax-tab">Playlists</span></div>');
122. $('#youmax').append('<div id="youmax-encloser"><iframe id="youmax-video" width="'+(youmaxWidgetWidth-2)+'" height="'+(youmaxWidgetWidth/youmax_global_options.youtubeVideoAspectRatio)+'" src="" frameborder="0" allowfullscreen></iframe><div id="youmax-video-list-div"></div><div id="youmax-load-more-div">LOAD MORE</div></div>');
124. $('#youmax-video').hide();
126. $('#youmax').append('<div id="youmax-lightbox"><div style="width:100%; position:absolute; top:20%;"><iframe id="youmax-video-lightbox" width="640" height="360" src="" frameborder="0" allowfullscreen></iframe></div></div>');
128. $('#youmax-lightbox').hide();
129. },
131. //get channel Id if channel URL is of the form ....../user/Adele
132. getChannelId = function(apiUrl) {
133. //console.log('inside getChannelId');
134. //console.log('apiUrl-'+apiUrl);
135. //showLoader();
137. $.ajax({
138. url: apiUrl,
139. type: "GET",
140. async: true,
141. cache: true,
142. dataType: 'jsonp',
143. success: function(response) {
144. youmaxChannelId = response.items[0].id
145. getChannelDetails(youmaxChannelId);
146. },
147. error: function(html) { alert(html); },
148. beforeSend: setHeader
149. });
150. },
153. getChannelDetails = function(channelId) {
155. //var apiProfileURL = "http://gdata.youtube.com/feeds/api/users/"+youmaxUser+"?v=2&alt=json";
156. var apiProfileURL = "https://www.googleapis.com/youtube/v3/channels?part=brandingSettings%2Csnippet%2Cstatistics%2CcontentDetails&id="+channelId+"&key="+youmax_global_options.apiKey;
158. $.ajax({
159. url: apiProfileURL,
160. type: "GET",
161. async: true,
162. cache: true,
163. dataType: 'jsonp',
164. success: function(response) { showInfo(response);},
165. error: function(html) { alert(html); },
166. beforeSend: setHeader
167. });
169. },
172. setHeader = function(xhr) {
173. if(xhr && xhr.overrideMimeType) {
174. xhr.overrideMimeType("application/j-son;charset=UTF-8");
175. }
176. },
178. showLoader = function() {
179. youmax_global_options.youmaxItemCount = 0;
180. $('#youmax-video-list-div').empty();
181. $('#youmax-video').hide();
182. $('#youmax-video').attr('src','');
183. $('#youmax-video-list-div').append('<div style="text-align:center; height:200px; font:14px Calibri;"><br><br><br><br><br><br>loading...</div>');
184. },
186. initFeaturedVideos = function () {
187. youTubePlaylistURL = youmax_global_options.youTubePlaylistURL;
188. console.log('inside init featured - '+youTubePlaylistURL);
189. if(null!=youTubePlaylistURL&&youTubePlaylistURL.indexOf("youtube.com/playlist?list=")!=-1) {
190. youmaxFeaturedPlaylistId = youTubePlaylistURL.substring(youTubePlaylistURL.indexOf("?list=")+6);
191. youmax_global_options.youmaxFeaturedPlaylistId = youmaxFeaturedPlaylistId;
192. }
193. },
197. showInfo = function(response) {
198. console.log('showInfo');
199. console.log(response);
201. var channelData = response.items[0];
202. var channelId = channelData.id;
203. var channelName = channelData.snippet.title;
204. var channelPic = channelData.snippet.thumbnails.default.url;
205. var channelSubscribers = channelData.statistics.subscriberCount;
206. var channelViews = channelData.statistics.viewCount;
207. var channelDesc = "";
208. var channelUploadsPlaylistId = channelData.contentDetails.relatedPlaylists.uploads;
213. $('#youmax-header').append('<img id="youmax-header-logo" src="'+channelPic+'"/>'+channelName);
215. $('#youmax-header').append(' <div class="youmax-subscribe"><div class="g-ytsubscribe" data-channelid="'+channelId+'" data-layout="default" data-count="default"></div></div>');
217. //$('#youmax-stat-holder').append('<div class="youmax-stat">'+channelSubscribers+'<br/> subscribers </div><div class="youmax-stat">'+channelViews+'<br/>video views</div>');
219. //$('#youmax-stat-holder').append('<div class="youmax-stat"><span class="youmax-stat-count">'+getReadableNumber(channelViews)+'</span><br/> video views </div><div class="youmax-stat"><span class="youmax-stat-count">'+getReadableNumber(channelSubscribers)+'</span><br/>subscribers</div>');
221. //$('#youmax-channel-desc').append('About '+channelName+'<br/>'+channelDesc);
223. renderSubscribeButton();
225. $('#youmax-tabs').find('span[id^=uploads_]').attr('id','uploads_'+channelUploadsPlaylistId);
227. youmaxDefaultTab = youmax_global_options.youmaxDefaultTab;
229. if(typeof youmaxDefaultTab === 'undefined'||null==youmaxDefaultTab||youmaxDefaultTab==""||youmaxDefaultTab=="undefined") {
230. $("#youmax-tabs span[id^=featured_]").click();
231. } else if(youmaxDefaultTab.toUpperCase()=='UPLOADS'||youmaxDefaultTab.toUpperCase()=='UPLOAD') {
232. $("#youmax-tabs span[id^=uploads_]").click();
233. } else if(youmaxDefaultTab.toUpperCase()=='PLAYLISTS'||youmaxDefaultTab.toUpperCase()=='PLAYLIST') {
234. $("#youmax-tabs span[id^=playlists_]").click();
235. } else if(youmaxDefaultTab.toUpperCase()=='FEATURED'||youmaxDefaultTab.toUpperCase()=='FEATURED') {
236. $("#youmax-tabs span[id^=featured_]").click();
237. }
240. },
242. renderSubscribeButton = function() {
243. $.ajaxSetup({
244. cache: true
245. });
247. $.getScript("https://apis.google.com/js/platform.js")
248. .done(function( script, textStatus ) {
249. //alert( textStatus );
250. })
251. .fail(function( jqxhr, settings, exception ) {
252. //alert( "Triggered ajaxError handler." );
253. });
254. },
257. showPlaylists = function(response,loadMoreFlag) {
258. console.log(response);
260. if(!loadMoreFlag) {
261. $('#youmax-video-list-div').empty();
262. }
264. var nextPageToken = response.nextPageToken;
265. var $youmaxLoadMoreDiv = $('#youmax-load-more-div');
266. //console.log('nextPageToken-'+nextPageToken);
268. if(null!=nextPageToken && nextPageToken!="undefined" && nextPageToken!="") {
269. $youmaxLoadMoreDiv.data('nextpagetoken',nextPageToken);
270. } else {
271. $youmaxLoadMoreDiv.data('nextpagetoken','');
272. }
274. youmaxColumns = youmax_global_options.youmaxColumns;
276. var playlistArray = response.items;
277. var playlistIdArray = [];
278. var zeroPlaylistCompensation = 0;
279. for(var i=0; i<playlistArray.length; i++) {
280. playListId = playlistArray[i].id;
281. playlistSize = playlistArray[i].contentDetails.itemCount;
282. if(playlistSize<=0){
283. zeroPlaylistCompensation++;
284. continue;
285. }
286. playlistIdArray.push(playListId);
287. playlistTitle = playlistArray[i].snippet.title;
288. playlistUploaded = playlistArray[i].snippet.publishedAt;
289. playlistThumbnail = playlistArray[i].snippet.thumbnails.medium.url;
290. //playlistThumbnail = playlistThumbnail.replace("hqdefault","mqdefault");
291. if((i+youmax_global_options.youmaxItemCount-zeroPlaylistCompensation)%youmaxColumns!=0)
292. $('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%;" id="'+playListId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+playlistThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+playlistThumbnail+'\')"><div class="youmax-playlist-sidebar" id="youmax-playlist-sidebar-'+playListId+'"><span class="youmax-playlist-video-count"><b>'+playlistSize+'</b><br/>VIDEOS</span></div></div><span class="youmax-video-list-title">'+playlistTitle+'</span><br/><span class="youmax-video-list-views">'+getDateDiff(playlistUploaded)+' ago</span></div>');
293. else
294. $('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%; clear:both;" id="'+playListId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+playlistThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+playlistThumbnail+'\')"><div class="youmax-playlist-sidebar" id="youmax-playlist-sidebar-'+playListId+'"><span class="youmax-playlist-video-count"><b>'+playlistSize+'</b><br/>VIDEOS</span></div></div><span class="youmax-video-list-title">'+playlistTitle+'</span><br/><span class="youmax-video-list-views">'+getDateDiff(playlistUploaded)+' ago</span></div>');
296. }
298. youmax_global_options.youmaxItemCount+=playlistArray.length-zeroPlaylistCompensation;
299. //console.log(playlistIdArray);
301. $('.youmax-video-tnail-box').click(function() {
302. //alert(this.id);
303. showLoader();
304. playlistTitle = $(this).find(".youmax-video-list-title").text();
305. getUploads("play_"+this.id,playlistTitle);
306. //getPlaylistVideos(this.id);
307. });
309. /* not sure why this is needed
310. var youmaxTnailWidth = $('.youmax-video-tnail').css('width');
311. youmaxTnailWidth=youmaxTnailWidth.substring(0,youmaxTnailWidth.indexOf("px"));
312. var youmaxTnailHeight = youmaxTnailWidth/youtubeMqdefaultAspectRatio;
313. //$('html > head').append('<style>.youmax-video-tnail{height:'+youmaxTnailHeight+'px;}</style>');
314. $('div.youmax-video-tnail').css({'height':youmaxTnailHeight+'px'});
315. */
318. /*
319. if(youmaxTnailHeight<130) {
320. maxTopVideos = 3;
321. $('html > head').append('<style>.youmax-playlist-video-count{margin: 10%;margin-top: 15%;}.youmax-playlist-sidebar-video{margin: 8% auto;}</style>');
322. //$('div.youmax-playlist-video-count').css({'margin':'10%','margin-top':'15%'});
323. //$('div.youmax-playlist-sidebar-video').css({'margin':'8% auto'});
324. } else {
325. maxTopVideos = 4;
326. }*/
328. resetLoadMoreButton();
330. //console.log(youmaxTnailWidth);
331. //console.log(youmaxTnailHeight);
333. //getTopVideosFromPlaylist(playlistIdArray,maxTopVideos);
334. },
336. showUploads = function(response,playlistTitle,loadMoreFlag) {
337. console.log(response);
339. if(!loadMoreFlag) {
340. $('#youmax-video-list-div').empty();
342. if(playlistTitle) {
343. $('.youmax-tab-hover').removeClass('youmax-tab-hover');
344. $('#youmax-video-list-div').append('<span class="youmax-showing-title youmax-tab-hover" id="uploads_'+response.items[0].snippet.playlistId+'" style="max-width:100%;"><span class="youmax-showing"> Showing playlist: </span>'+playlistTitle+'</span><br/>');
345. }
346. }
348. var nextPageToken = response.nextPageToken;
349. var $youmaxLoadMoreDiv = $('#youmax-load-more-div');
350. //console.log('nextPageToken-'+nextPageToken);
352. youmaxColumns = youmax_global_options.youmaxColumns;
354. if(null!=nextPageToken && nextPageToken!="undefined" && nextPageToken!="") {
355. $youmaxLoadMoreDiv.data('nextpagetoken',nextPageToken);
356. } else {
357. $youmaxLoadMoreDiv.data('nextpagetoken','');
358. }
360. var uploadsArray = response.items;
361. var videoIdArray = [];
363. for(var i=0; i<uploadsArray.length; i++) {
364. videoId = uploadsArray[i].snippet.resourceId.videoId;
365. videoTitle = uploadsArray[i].snippet.title;
366. //videoViewCount = uploadsArray[i].snippet.viewCount;
367. //videoDuration = uploadsArray[i].snippet.duration;
368. videoUploaded = uploadsArray[i].snippet.publishedAt;
369. videoThumbnail = uploadsArray[i].snippet.thumbnails.medium.url;
370. //videoThumbnail = videoThumbnail.replace("hqdefault","mqdefault");
372. videoIdArray.push(videoId);
374. //$('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%;" id="'+videoId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+videoThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+videoThumbnail+'\')"><div class="youmax-duration">'+secondsToTime(videoDuration)+'</div></div><span class="youmax-video-list-title">'+videoTitle+'</span><br/><span class="youmax-video-list-views">'+getReadableNumber(videoViewCount)+' views | '+getDateDiff(videoUploaded)+' ago</span></div>');
377. if((i+youmax_global_options.youmaxItemCount)%youmaxColumns!=0)
378. $('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%;" id="'+videoId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+videoThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+videoThumbnail+'\')"><div class="youmax-duration"></div></div><span class="youmax-video-list-title">'+videoTitle+'</span><br/><span class="youmax-video-list-views">'+getDateDiff(videoUploaded)+' ago</span></div>');
379. else
380. $('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%; clear:both;" id="'+videoId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+videoThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+videoThumbnail+'\')"><div class="youmax-duration"></div></div><span class="youmax-video-list-title">'+videoTitle+'</span><br/><span class="youmax-video-list-views">'+getDateDiff(videoUploaded)+' ago</span></div>');
382. }
384. youmax_global_options.youmaxItemCount+=uploadsArray.length;
386. $('.youmax-video-tnail-box').click(function(){
387. //alert(this.id);
388. //alert(showVideoInLightbox);
389. if(youmax_global_options.showVideoInLightbox){
390. showVideoLightbox(this.id);
391. } else {
392. $('#youmax-video').attr('src','https://www.youtube.com/embed/'+this.id);
393. $('#youmax-video').show();
394. $('html,body').animate({scrollTop: $("#youmax-header").offset().top},'slow');
395. }
396. });
398. // not sure why this is needed
399. /*var youmaxTnailWidth = $('.youmax-video-tnail').css('width');
400. youmaxTnailWidth=youmaxTnailWidth.substring(0,youmaxTnailWidth.indexOf("px"));
401. var youmaxTnailHeight = youmaxTnailWidth/youmax_global_options.youtubeMqdefaultAspectRatio;
402. //$('html > head').append('<style>.youmax-video-tnail{height:'+youmaxTnailHeight+'px;}</style>');
403. $('div.youmax-video-tnail').css({'height':youmaxTnailHeight+'px'});*/
406. getVideoStats(videoIdArray);
407. resetLoadMoreButton();
409. },
412. //get video stats using Youtube API
413. getVideoStats = function(videoIdList) {
414. //console.log('inside getVideoStats');
415. //console.log(videoIdList);
416. //showLoader();
418. apiVideoStatURL = "https://www.googleapis.com/youtube/v3/videos?part=statistics%2CcontentDetails&id="+videoIdList+"&key="+youmax_global_options.apiKey;
419. $.ajax({
420. url: apiVideoStatURL,
421. type: "GET",
422. async: true,
423. cache: true,
424. dataType: 'jsonp',
425. success: function(response) { displayVideoStats(response);},
426. error: function(html) { alert(html); },
427. beforeSend: setHeader
428. });
429. },
431. //display video statistics
432. displayVideoStats = function(response) {
433. //console.log(response);
435. var videoArray = response.items;
436. var $videoThumbnail;
438. for(var i=0; i<videoArray.length; i++) {
439. videoId = videoArray[i].id;
440. videoViewCount = videoArray[i].statistics.viewCount;
441. videoViewCount = getReadableNumber(videoViewCount);
442. videoDuration = videoArray[i].contentDetails.duration;
443. //console.log('videoDuration-'+videoDuration);
445. videoDuration = convertDuration(videoDuration);
446. videoDefinition = videoArray[i].contentDetails.definition.toUpperCase();
447. $videoThumbnail = $('#youmax-video-list-div #'+videoId);
448. $videoThumbnail.find('.youmax-video-list-views').prepend(videoViewCount+' views | ');
449. $videoThumbnail.find('.youmax-duration').append(videoDuration);
450. //$videoThumbnail.append('<div class="youmax-definition">'+videoDefinition+'</div>');
452. }
453. },
456. getUploads = function(youmaxTabId,playlistTitle,nextPageToken) {
457. //showLoader();
458. //var apiUploadURL = "http://gdata.youtube.com/feeds/api/users/"+youmaxUser+"/uploads/?v=2&alt=jsonc&max-results=50";
460. var pageTokenUrl = "";
461. var loadMoreFlag = false;
463. if(null!=nextPageToken) {
464. pageTokenUrl = "&pageToken="+nextPageToken;
465. loadMoreFlag = true;
466. }
468. var uploadsPlaylistId = youmaxTabId.substring(youmaxTabId.indexOf('_')+1);
469. var apiUploadURL = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId="+uploadsPlaylistId+"&maxResults="+youmax_global_options.maxResults+pageTokenUrl+"&key="+youmax_global_options.apiKey;
471. console.log('apiUploadURL-'+apiUploadURL);
473. $.ajax({
474. url: apiUploadURL,
475. type: "GET",
476. async: true,
477. cache: true,
478. dataType: 'jsonp',
479. success: function(response) { showUploads(response,playlistTitle,loadMoreFlag);},
480. error: function(html) { alert(html); },
481. beforeSend: setHeader
482. });
483. },
487. getPlaylists = function(nextPageToken) {
489. var pageTokenUrl = "";
490. var loadMoreFlag = false;
492. if(null!=nextPageToken) {
493. pageTokenUrl = "&pageToken="+nextPageToken;
494. loadMoreFlag = true;
495. }
497. var apiChannelPlaylistsURL = "https://www.googleapis.com/youtube/v3/playlists?part=contentDetails,snippet&channelId="+youmaxChannelId+"&maxResults="+youmax_global_options.maxResults+pageTokenUrl+"&key="+youmax_global_options.apiKey;
499. //var apiPlaylistURL = "https://gdata.youtube.com/feeds/api/users/"+youmaxUser+"/playlists?v=2&alt=jsonc&max-results=50";
500. $.ajax({
501. url: apiChannelPlaylistsURL,
502. type: "GET",
503. async: true,
504. cache: true,
505. dataType: 'jsonp',
506. success: function(response) { showPlaylists(response,loadMoreFlag);},
507. error: function(html) { alert(html); },
508. beforeSend: setHeader
509. });
510. },
512. showVideoLightbox = function(videoId) {
513. $('#youmax-lightbox').show();
514. $('#youmax-video-lightbox').attr('src','http://www.youtube.com/embed/'+videoId);
516. $('#youmax-lightbox').click(function(){
517. $('#youmax-video-lightbox').attr('src','');
518. $('#youmax-lightbox').hide();
519. });
520. },
522. resetLoadMoreButton = function() {
523. var $youmaxLoadMoreDiv = $('#youmax-load-more-div');
524. $youmaxLoadMoreDiv.removeClass('youmax-load-more-div-click');
525. $youmaxLoadMoreDiv.text('LOAD MORE');
526. },
528. prepareYoumax = function() {
529. $('#youmax').empty();
530. /*
531. if(youTubeChannelURL.indexOf("youtube.com/user/")!=-1) {
532. if(null!=youTubeChannelURL&&youTubeChannelURL.indexOf("?feature")!=-1)
533. youmaxUser = youTubeChannelURL.substring(youTubeChannelURL.indexOf("youtube.com/user/")+17,youTubeChannelURL.indexOf("?feature"));
534. else
535. youmaxUser = youTubeChannelURL.substring(youTubeChannelURL.indexOf("youtube.com/user/")+17);
536. }
538. console.log('youTubeChannelURL-'+youTubeChannelURL);
539. console.log('youmaxUser-'+youmaxUser);
540. //youmaxUser = 'UCVUZWBzxM7w8ug87qYwkBLg';
541. //youmaxUser = 'AdeleVEVO';
542. */
544. loadYoumax();
545. showLoader();
547. $('.youmax-tab').click(function(){
548. $('.youmax-tab-hover').removeClass('youmax-tab-hover');
549. $(this).addClass('youmax-tab-hover');
550. //$('.youmax-tab').css('color','#666');
551. //$('.youmax-tab').css('background-color','#e6e6e6');
552. //$('.youmax-tab').css('text-shadow','0 1px 0 #fff');
554. //$(this).css('color','#eee');
555. //$(this).css('background-color','#999');
556. //$(this).css('text-shadow','0 0');
558. youmaxTabId = this.id;
560. showLoader();
562. if(youmaxTabId.indexOf("featured_")!=-1) {
563. getUploads('featured_'+youmax_global_options.youmaxFeaturedPlaylistId,null,null);
564. } else if(youmaxTabId.indexOf("uploads_")!=-1) {
565. getUploads(youmaxTabId);
566. } else if(youmaxTabId.indexOf("playlists_")!=-1) {
567. getPlaylists();
568. }
569. });
571. $('#youmax-load-more-div').click(function(){
573. var $youmaxLoadMoreDiv = $('#youmax-load-more-div');
574. $youmaxLoadMoreDiv.html('LOADING..');
575. $youmaxLoadMoreDiv.addClass('youmax-load-more-div-click');
577. var youmaxTabId = $('.youmax-tab-hover').attr('id');
578. var nextPageToken = $youmaxLoadMoreDiv.data('nextpagetoken');
579. console.log('load more clicked : nextPageToken-'+nextPageToken);
581. if(null!=nextPageToken && nextPageToken!="undefined" && nextPageToken!="") {
582. if(youmaxTabId.indexOf("featured_")!=-1) {
583. getUploads('featured_'+youmax_global_options.youmaxFeaturedPlaylistId,null,nextPageToken);
584. } else if(youmaxTabId.indexOf("uploads_")!=-1) {
585. getUploads(youmaxTabId,null,nextPageToken);
586. } else if(youmaxTabId=="playlists_") {
587. getPlaylists(nextPageToken);
588. }
589. } else {
590. $youmaxLoadMoreDiv.html('ALL DONE');
591. }
593. });
595. youTubeChannelURL = youmax_global_options.youTubeChannelURL;
597. //Get Channel header and details
598. if(youTubeChannelURL!=null) {
599. s=youTubeChannelURL.indexOf("/user/");
600. ////console.log('s-'+s);
601. if(s!=-1) {
602. userId = youTubeChannelURL.substring(s+6);
603. //console.log('userId-'+userId);
604. apiUrl = "https://www.googleapis.com/youtube/v3/channels?part=id&forUsername="+userId+"&key="+youmax_global_options.apiKey;
605. getChannelId(apiUrl);
606. } else {
607. s=youTubeChannelURL.indexOf("/channel/");
608. if(s!=-1) {
609. youmaxChannelId = youTubeChannelURL.substring(s+9);
610. youmax_global_options.youmaxChannelId = youmaxChannelId;
611. //console.log('channelId-'+channelId);
612. getChannelDetails(youmaxChannelId);
613. } else {
614. alert("Could Not Find Channel..");
615. }
616. }
617. }
619. }
622. $.fn.youmax = function(options) {
625. //set local options
626. youmax_global_options.apiKey = options.apiKey;
627. youmax_global_options.youTubeChannelURL = options.youTubeChannelURL||'';
628. youmax_global_options.youTubePlaylistURL = options.youTubePlaylistURL||'';
629. youmax_global_options.youmaxDefaultTab = options.youmaxDefaultTab||'FEATURED';
630. youmax_global_options.youmaxColumns = options.youmaxColumns||3;
631. youmax_global_options.showVideoInLightbox = options.showVideoInLightbox||false;
632. youmax_global_options.youmaxChannelId = '';
633. youmax_global_options.maxResults = options.maxResults||15;
634. youmax_global_options.youmaxItemCount = 0;
635. youmax_global_options.youtubeVideoAspectRatio = 640/360;
637. //youmax_global_options.youmaxWidgetWidth = options.youmaxWidgetWidth||800;
638. //youmax_global_options.showFeaturedVideoOnLoad = options.showFeaturedVideoOnLoad||false;
639. youmax_global_options.youtubeMqdefaultAspectRatio = 300/180;
641. initFeaturedVideos();
642. prepareYoumax();
644. };
647. }( jQuery ));
Download the below Youmax CSS file and add the CSS file to any document library, like Style Library.
1. .youmax-showing {color:whitesmoke;font-weight:normal; text-shadow: none;}
3. .youmax-duration {background-color: black;color: white;padding: 2px 3px;font-weight: bold;position: absolute;bottom: 0;right: 0;opacity: 0.8;}
5. #youmax-header {background-color:rgb(53,53,53);font:24px Arial;color:white;line-height:25px;height:90px;text-align:left;border: 1px solid rgb(53,53,53);position: relative;}
7. .youmax-stat {float:right;margin:10px;font:10px Arial;color:#ccc;margin-top: 25px;text-align: center;}
9. #youmax-stat-holder {float:right;height:100%;}
11. .youmax-stat-count {font: 18px Arial;}
13. #youmax-channel-desc {text-align:left;}
15. #youmax {width:100%; max-width:1000px;background-color: rgb(230,230,230);margin:0px auto;font-family: Calibri;font-size: 14px;text-align:center; overflow-x:hidden;}
17. .youmax-video-tnail {width:100%; background-repeat:no-repeat; background-size:cover;height:180px;position: relative;}
19. .youmax-video-tnail-box {width:46%;margin:2%;float:left;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);cursor:pointer;cursor:hand; background-color: white;}
21. #youmax-encloser {border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc; padding-top: 20px;}
23. #youmax-video-list-div {width:100%;text-align:left;display: inline-block;background-color:rgb(230,230,230); padding: 0px 15px; box-sizing: border-box;}
25. .youmax-video-list-title {color:#438bc5;display: inline-block;padding:2% 10px; padding-bottom: 0px;font-weight:bold;max-width:250px;max-height:18px;overflow:hidden;}
27. .youmax-video-list-views {color:#555;padding:1% 10px; padding-bottom: 3%;display:inline-block;font-size:12px; font-family: Arial;}
29. .youmax-playlist-sidebar {background-color:rgba(0,0,0,0.8);float:right;max-width:50%;height:100%;color:white;text-align:center;width: 70px;}
31. .youmax-playlist-video-count { display:inline-block;margin:3%;margin-top:5%;height:20%; margin-top: 55px; }
33. .youmax-playlist-sidebar-video {opacity:1;width:64px;height:20%;background-color:rgb(114,114,114);display:inline-block;margin:2% auto;background-size:cover;background-position: center center;background-repeat:no-repeat;}
34. .youmax-tab {background-color:rgb(230,230,230);color:#666;text-shadow:0 1px 0 #fff;display: inline-block;margin: 5px;margin-top: 10px;padding: 5px;cursor:pointer;cursor:hand;}
36. #youmax-tabs {text-align:left;background-color:rgb(230,230,230);padding-left: 10px;border-left: 1px solid #cccccc;border-right: 1px solid #cccccc; padding: 25px 30px 0px 30px;font-size: 18px;}
38. #youmax-lightbox {position:fixed;background-color:rgba(0,0,0,0.9);z-index:100;width:100%;height:100%;left:0;top:0;}
40. #youmax-video-lightbox {opacity:1;}
42. .youmax-subscribe div {
43. position:static !important;
44. vertical-align: top !important;
45. }
47. .youmax-subscribe iframe {
48. position:static !important;
49. }
51. .youmax-subscribe{
52. display: inline-block;
53. width: 150px;
54. height: 25px;
55. overflow: hidden;
56. position: absolute;
57. top: 0;
58. margin: auto;
59. bottom: 0;
60. right: 0;
61. }
63. #youmax-header-logo{
64. vertical-align:middle; height:60px; margin: 15px; display:inline-block;
65. margin-left: 32px;
66. }
68. div#youmax-load-more-div {
69. /* height: 40px; */
70. padding: 10px;
71. margin: 15px 30px;
72. font-size: 18px;
73. border: 1px solid #ccc;
74. cursor:pointer;
75. }
77. .youmax-tab-hover {
78. color:#eee;
79. background-color:#999;
80. text-shadow:0 0;
82. }
84. .youmax-showing-title {
85. font-size: 18px;
86. padding: 10px;
87. margin-left: 20px;
88. margin-bottom: 15px;
89. display: inline-block;
90. }
92. iframe#youmax-video {
93. margin-bottom: 20px !important;
94. }
96. .youmax-load-more-div-click {
97. background: darkgray;
98. color:white;
99. }
101. #youmax-load-more-div:hover {
102. background: darkgray;
103. color:white;
104. }
Create one Google API Key to get the videos from YouTube.
Get the YouTube Channel Video URL from the YouTube site that you want to display in Content Editor Web Part.

https://www.youtube.com/channel/UCYfdidRxbB8Qhf0Nx7ioOYw
Get the YouTube Playlist Video URL from the YouTube site that you want to display in Content Editor Web Part.

https://www.youtube.com/playlist?list=PL3ZQ5CpNulQmFrUkJrzmnegpttJATXZO4
After getting Google API Key, YouTube Channel ID, and Playlist ID, add that to YouMax jQuery plugin, as below:
1. $('#youmax').youmax({
3. apiKey:'HGDRHjjekkj4mkjd954HHHFGUu45jrt45',
5. youTubeChannelURL:" https://www.youtube.com/channel/UCYfdidRxbB8Qhf0Nx7ioOYw",
7. youTubePlaylistURL:" https://www.youtube.com/playlist?list=PL3ZQ5CpNulQmFrUkJrzmnegpttJATXZO4",
9. youmaxDefaultTab:"PLAYLISTS", //can be UPLOADS or PLAYLISTS or FEATURED
11. youmaxColumns:3,
13. showVideoInLightbox:false,
15. maxResults:15,
17. });
Your channel playlist video will be added to the Content Editor Web Part using complete code snippets, as shown below.
1. <script src="../Style%20Library/YouTubeChannel/jquery-1.9.1.min.js"></script>
2. <script src="../Style%20Library/YouTubeChannel/youmax.js"></script>
3. <link rel="stylesheet" href="../Style%20Library/YouTubeChannel/youmax.css"/>
5. <div id="youmax"></div>
6. <script type="text/javascript">
7. $('#youmax').youmax({
8. apiKey:'HGDRHjjekkj4mkjd954HHHFGUu45jrt45',
9. youTubeChannelURL:" https://www.youtube.com/channel/UCYfdidRxbB8Qhf0Nx7ioOYw",
10. youTubePlaylistURL:" https://www.youtube.com/playlist?list=PL3ZQ5CpNulQmFrUkJrzmnegpttJATXZO4",
11. youmaxDefaultTab:"PLAYLISTS", //can be UPLOADS or PLAYLISTS or FEATURED
12. youmaxColumns:3,
13. showVideoInLightbox:false,
14. maxResults:15,
15. });
16. </script>
Thus, the YouTube channel videos are added to the SharePoint Page.

Summary: So, you have learned how to get the YouTube Channel Playlist Videos in SharePoint Content Editor Web Part.

12 Comments

Join the conversation! Your thoughts help the community grow.

Harish Khawath10y ago
Good one
- Ramesh Palaniappan10y ago
  Thank You
Harish Khawath10y ago
Good one
- Ramesh Palaniappan10y ago
  Thank You
Guru Gunal10y ago
Good one
- Ramesh Palaniappan10y ago
  Thank You
Tarun D10y ago
Very Nice article..
- Ramesh Palaniappan10y ago
  Thank You
Vinodh Narayanan10y ago
Good one
- Ramesh Palaniappan10y ago
  Thank You
Humayun Kabir Mamun10y ago
Nice...
- Ramesh Palaniappan10y ago
  Thank You